JavaScript (3)

깨진알·2023년 12월 5일

목록 보기

3/21

JavaScript 추상화 및 제어문

1. 할당 연산자 (Assignment operators)

let name = "이름";
let x = 5;

x = x - 2;

프로그램에서 =은 값이 같다는 것을 의미하기 보다는 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당하는 의미를 갖고 있다.

2. 복합 할당 연산자

// 서로 붙어있는 두 줄을 같다.
x = x + 1;
x += 1;

x = x + 2;
x += 2;

x = x * 2;
x *= 2;

x = x - 3;
x -= 3;

x = x / 2;
x /= 2;

x = x % 7;
x %= 7;

3. 증가(increment), 감소(decrement) 연산자

변수의 값을 1씩 증가시키거나 감소시킬 때는 복합 할당 연산자보다 더 간략하게 증가연산자, 감소연산자를 사용하면 된다. 더하기 기호를 연달아 쓰거나(++), 빼기 기호를 연달아 쓰면 된다.(--)

// 다음 세 줄은 같은 의미이다.
x = x + 1;
x += 1;
x++;

// 다음 세 줄은 같은 의미이다.
x = x - 1;
x -= 1;
x--;

4. 옵셔널 파라미터 (Optional Parameter)

function introduce(name, age, nationality = '한국') {
	console.log(`제 이름은 ${name}입니다.`);
	console.log(`나이는 ${age}살 이고,`);
	console.log(`국적은 ${nationality}입니다.`);
};

introduce('코드잇', 4, '미국'); // 값을 모두 전달한 경우
introduce('코드잇', 4); // 파라미터 값을 생략한 경우

파라미터 값에 아무 값도 할당하지 않으면 결과값으로 undefined가 출력된다. 옵셔널 파라미터는 파라미터에 미리 값을 할당하는 것을 의미한다. 옵셔널 파라미터를 선언할 때는 가장 뒤쪽에 선언해야 한다.

5. 변수의 scope

let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)

function myFunction() { // 블록문 (Block Statement)
	let x = 5; // 로컬 변수, 지역 변수 (Local Variable)
	console.log(x);
};

myFunction(); // 5
console.log(x); // 3

전역 변수 : 모든 범위에서 사용 가능하다.
지역 변수 : 블록문 내에서만 사용 가능하다.

6. 상수 (변하지 않는 값)

// 상수 (constant)
const PI = 3.14; // 값 변경 X
let radius = 0; // 처음에 빈 값으로 표현하고 싶을 때 -> 문자(''), 숫자(0)

// 원의 넓이를 계산하는 함수
function calculateArea() {
	return PI * radius * radius;
};

// 반지름에 따른 원의 넓이를 출력하는 함수
function printArea() {
	return `반지름이 ${radius}일 때, 원의 넓이는 ${calculateArea()}`;
};

radius = 4;
console.log(printArea());

radius = 7;
console.log(printArea());

상수명은 대문자를 사용하고 띄어쓰기를 사용할 때는 밑줄(_)로 표기한다.

7. if문, else if문

/* if문
if (조건부분) {
	동작부분
}
*/

let temperature = 1;

if (temperature <= 0) {
	console.log("물이 업니다.");
} else {
	console.log("물이 얼지 않습니다.");
};

// else if문
let temperature = 1;

if (temperature <= 0) {
	console.log("물이 업니다.");
} else if (temperature < 100) {
	console.log("물이 얼지도 끓지도 않습니다.");
} else {
	console.log("물이 끓습니다.");
}

8. switch문

switch(비교할_값) {
	case 조건값_1:
		동작부분;
		break; // switch문을 빠져나오기 위한 
	case 조건값_2:
		동작부분;
		break;
	default: // 아무 조건도 만족하지 않을 때
		동작부분;
}

let myChoice = 2;

switch(myChoice) {
	case 1:
		console.log('토끼를 선택한 당신, ...');
		break;
	case 2:
		console.log('고양이를 선택한 당신, ...');
		break;
	case 3:
		console.log('코알라를 선택한 당신, ...');
		break;
	case 4:
		console.log('강아지를 선택한 당신, ...');
		break;
	default:
		console.log('1에서 4사이의 숫자를 선택해 주세요.');
};

9. switch문 vs if문

let myChoice = 2;

switch(myChoice) {
  case 1:
    console.log('토끼를 선택한 당신, ...');
    break;
  case 2:
    console.log('고양이를 선택한 당신, ...');
    break;
  case 3:
    console.log('코알라를 선택한 당신, ...');
    break;
  case 4:
    console.log('강아지를 선택한 당신, ...');
    break;
  default:
    console.log('1에서 4사이의 숫자를 선택해 주세요.'); 
}

if (myChoice === 1) {
  console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
  console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
  console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
  console.log('강아지를 선택한 당신, ...');
} else {
  console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

범위를 만족하는 조건식을 만든 때는 if문을 활용하는 것이 효과적이고, 특정값을 만족하는 조건식을 만든 때는 switch문이 더 효과적이다. 또한 조건식에서는 반드시 등호를 3개 입력해야 한다. switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 점과 if문으로 대체할 때는 반드시 등호 3개를 사용해 일치 비교를 해야 한다.

10. for 반복문

/*
for (초기화부분; 조건부분; 추가동작부분) {
		동작부분
};
*/

// '최고! 라는 문자를 10번 출력
for (let i = 1; i <= 10; i++) {
		console.log(`${i} 최고!`);
};

// 추가 동작 부분을 꼭 채울 필요는 없다.
for (let i = 1; i <= 10;) {
  console.log(`${i} 깨진알 최고!`);
  i++;
}

// 초기화 부분에서 생성한 변수를 for문의 로컬 변수다
for (let i = 1; i <= 10; i++) {
  console.log(`${i} 깨진알 최고!`);
}

console.log(i);  // Error!

// 초기화 부분도 반드시 채울 필요는 없다
let i = 1; 
for (; i <= 10; i++) { // for문의 소괄호 안쪽 가장 첫 번째 세미콜론은 생략할 수 없다.
  console.log(`${i} 깨진알 최고!`);
}

간단한 문제

// 1 ~ 100까지 짝수만 출력
for (let i = 2; i <= 100; i += 2) {
		console.log(i);
}

// *을 이용하여 직각삼각형 만들기 (여러 응용 문제 많으니 찾아서 풀어보기 추천
function printTriangle(height) {
	for (let i = 1; i <= height; i++) {
	  let star = '';
	  for (let j = 1; j <= i; j++) {
	    star += '*';
	  };
	  console.log(star);
	};
};

console.log('높이: 3');
printTriangle(3);

11. while문

while (조건부분) {
		동작부분
};

간단한 문제

// 최고! 10번 출력
let i = 1;

while (i <= 10) {
		console.log(`${i} 최고!`);
		i++;
};

// 7의 배수 찾기
let i = 30;

while (i % 7 !== 0) {
	i++;
}

console.log(i);

// 1 ~ 100까지 홀수 출력
let i = 1

while (i <= 100) {
		console.log(i);
		i += 2;
};

// 180의 약수와 갯수 구하기
const N = 180;
let i = 1;
let count = 0;

while(i <= 180) {
  if (N % i === 0) {
    console.log(i);
    count++;
  };
  i++;
};
console.log(`${N}의 약수는 총 ${count}개입니다.`);

12. break와 continue

// 1부터 10까지 홀수 출력
// for문, break 사용
for (let i = 1; i <= 10; i++) {
	console.log(i);
	if (i === 7) {
		break;
	};
};

// while문, break 사용
let i = 1;

while (i <= 10) {
	console.log(i_;
	if (i === 7) {
		break;
	};
	i++;
};

// for문, continue 사용
for (let i = 1; i <= 10; i++) {
	if (i % 2 === 0) {
		continue; // 조건에 맞으면 아래 출력을 넘어간다.
	};
	console.log(i);
};

// while문, continue 사용
let i = 1;

while (i <= 10) {
	if (i % 2 === 0) {
		i++; // 미리 continue전에 증가시켜 주어야 한다
		continue;
	};
	console.log(i);
	i++;
};

13. 풀어보면 좋을 문제들

반복문을 통한 구구단 만들기

for(let i = 1; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} * ${j} = ${i * j}`);
  };
};

피보나치 수열

let first = 1;
let second = 1;

for (let i = 1; i <= 50; i++) {
  if (i <= 2) {
    console.log(1);
    continue;
  };
  
  const sum = first + second;
  first = second;
  second = sum;
  console.log(sum);
};