🖥️ Frontend/모던 자바스크립트 Deep Dive

08장 제어문

우다 2024. 6. 14. 21:45

✅ 제어문

조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.

8.1 블록문

✅ 블록문

0개 이상의 문을 중괄호로 묶은 것으로 코드 또는 코드 블록이라고 한다.

블록문은 자체 종결성을 가지므로 블록문의 끝에는 세미콜론을 붙이지 않는다.

8.2 조건문

✅ 조건문

주어진 조건식(표현식)의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다.

  • if-else
  • switch

8.2.1 if ~ else 문

✅ if-else

조건식의 논리적 참/거짓에 따라 실행할 코드 블록을 결정한다.

if문의 조건식이 불리언 값이 아닌 경우 암묵적 변환에 의해 불리언 값으로 변환된다.

if(조건식1) {
	// 조건식1이 참이면 이 코드 블록이 실행된다.
} else if(조건식2){
	// 조건식2가 참이면 이 코드 블록이 실행된다.
} else {
	// 조건식1, 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}

만약 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략할 수 있다.

let num = 2;
let kind

if(num > 0) kind = '양수';
if else (num < 0) kind = '음수';
else kind = '영';

if-else문은 삼항 조건 연산자로 변환 가능하다.

변수에 할당하는 경우에는 삼항 조건 연산자로 블록문 내의 코드가 복잡하다면 if-else문이 가독성에 좋다.

let kind = num ? (num > 0 ? '양수' : '음수) : '영';

8.2.2 switch 문

✅ switch

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮기고 일치하는 case문이 없다면 default문으로 이동한다.

default문은 선택 사항이다.

switch(표현식) {
	case 표현식1:
		switch 문의 표현식과 표현식1이 일치하면 실행될 문;
		break;
	case 표현식2:
		switch 문의 표현식과 표현식2가 일치하면 실행될 문;
		break;
	default:
		switch 문의 표현식과 일치하는 case 문이 없을 떄 실행될 문;
}

✅ 폴스루(fall through)

break문이 없을 경우 case문의 표현식이 일치하지 않더라도 실행 흐름이 다음 case문으로 연이어 실행한다.

⚠️ case문에 break문이 없다면 폴스루가 발생하여 의도하지 않은 결과가 나올 수 있다.

let month = 11;
let monthName;

switch(month) {
	case 1: monthName = 'January';
	case 2: monthName = 'Febuary';
	case 3: monthName = 'March';
	case 4: monthName = 'April';
	case 5: monthName = 'May';
	case 6: monthName = 'June';
	case 7: monthName = 'July';
	case 8: monthName = 'August';
	case 9: monthName = 'September';
	case 10: monthName = 'Octocber';
	case 11: monthName = 'Novemer';
	case 12: monthName = 'December';
	default: monthName = 'Invalid Date';
}

// 폴스루 때문에 monthName 변수에 'November'가 할당된 후
// 연이어 'December'가 재할당되고
// 마지막으로 'Invalid month'가 재할당된다.
console.log(monthName); // Invalid month

폴스루를 사용해 여러 개의 case문을 하나의 조건으로 사용할 수 있다.

let year = 2000;;
let month = 2;
let days = 0;

switch(month) {
	case 1: case 3: case 5: case 7: case 8: case 10: case 12:
		days = 31;
		break;	
	case 4: case 6: case 9: case 11:
		days = 30;
		break;
	case 2: 
		// 윤년 계산 알고리즘
		// 연도가 4로 나누어 떨어지는 해는 윤년이다.
		// 4로 나누어 떨어져도 100으로 나누어 떨어지면 평년이다.
		// 400으로 나누어 떨어지는 해는 윤년이다.
		days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0) ? 29: 28);
		break;
	default:
		console.log('Invalid month');
}

👉🏻
if-else vs switch


if-else 문은 논리적 참, 거짓으로 실행 블록을 결정할 때, switch 문은 문자열이나 숫자 등 다양한 상황에 따라 실행할 때 사용한다.

switch문보다 if-else 문을 사용하는 편이 좋지만 switch문을 썻을 때 가독성이 더 좋은 경우 switch문을 사용하는 편이 좋다.

8.3 반복문

✅ 반복문

조건식의 평가 결과기 참인 경우 코드 블록을 실행하고 조건식이 거짓일 때까지 반복한다.

  • for
  • while
  • do-while

8.3.1 for 문

✅ for

조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.

for(변수 선언문 또는 할당문; 조건식; 증감식) {
	조건식이 참인 경우 반복 실행될 문;
}

for 문의 변수 선언식, 조건식, 증감식은 모두 옵션이다.

하지만 어떤 식도 선언하지 않으면 무한루프가 된다.

for(;;) {}

8.3.2 while 문

✅ while

주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.

만약 조건식이 불리언 값이 아니라면 암묵적 변환을 통해 참, 거짓을 판별한다.

while(조건식) {
	조건식이 참일 경우 반복 실행할 문;
}

조건식이 언제나 참이면 무한루프가 되는데 break문으로 탈출할 수 있다.

let count = 0;

// 무한 루프
while(true) {
	console.log(count);
	count++;
	// count가 3이면 무한 루프 코드 블록을 탈출한다.
	if(count === 3) break;
}

8.3.3 do~while 문

✅ do-while

코드 블록을 먼저 실행하고 조건식을 평가한다.

👉🏻 무조건 1회 이상 실행된다.

let count = 0;

do {
	console.log(count);
	count++;
} while (count < 3)

8.4 break문

✅ break

레이블 문, 반복문(for, for-in, for-of, while, do-while) 또는 switch문의 코드 블록을 탈출한다.

👉🏻
이 외에 사용하는 경우 SyntaxError(문법 에러)가 발생한다.
if(true) {
	break; // Uncaught SyntaxError: Illegal break statement
}

✅ 레이블문

식별자가 뭍은 문을 말하며 프로그램의 실행 순서를 제어하는데 사용한다.

foo: {
	console.log(1);
	break; // foo 레이블 반복문을 탈출한다.
	console.log(2);
}

console.log('Done!')

레이블 문은 중첩된 for 문 외부로 탈출할 때 유용하지만 그 밖의 경우에는 일반적으로 권장하지 않는다.

중첩된 for문에서 내부 for문을 탈출하려면 break문만 쓰면 되지만 외부 for문을 탈출하려면 레이블 문을 사용해야 한다.

// outer이라는 식별자가 붙은 레이블 for문
outer: for(let i = 0; i < 3; i++){
	for(let j = 0; j < 3; j++) {
		// i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출한다.
		if(i + j === 3) break outer;
		console.log(`inner [${i}, ${j}]`)
	}
}

// inner [0, 0]
// inner [0, 1]
// inner [0, 2]
// inner [1, 0]
// inner [1, 1]
outer: for(let i = 0; i < 3; i++){
	for(let j = 0; j < 3; j++) {
		// i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출한다.
        if(i === 0 ) break;
		if(i + j === 3) break outer;
		console.log(`inner [${i}, ${j}]`)
	}
}

inner [1, 0] 
inner [1, 1]

8.5 continue문

✅ continue

반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.

break문처럼 반복문을 탈출하지는 않는다.

반복문 안의 if문에 코드가 길어질 경우 사용하면 가독성이 좋다.

const string = 'HelloWorld'
const search = 'l'
let count1 = 0;
let count2 = 0;

for(let i = 0; i < string.length; i++) {
	if(string[i] === search) {
		count1++;
		count2++;	
	}
}

// continue를 사용해 코드의 들여쓰기가 깊어지는 것을 방지하여 가독성을 높임
for(let i = 0; i < string.length; i++) {
	if(string[i] !== search) continue;
	count1++;
	count2++;
}

QUIZ

var i = 0
for(i; i < 10; i++) {
	console.log(i)
	var i = 10
	console.log(i)
}
console.log(i)

'🖥️ Frontend > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글

10장 객체 리터럴  (0) 2024.06.24
09장 타입 변환과 단축 평가  (0) 2024.06.18
07장 연산자  (1) 2024.06.10
06장 데이터 타입  (1) 2024.06.06
05장 표현식과 문  (1) 2024.06.03