[JS] 제어문(Control Statement)

vSsongv·2021년 11월 23일

TIL break continue else for frontend if js switch while 제어문 조건문

JS

목록 보기

6/40

제어문은 조건에 따라 코드 블록을 실행하거나, 반복 실행을 할 때 사용한다. 제어문을 사용하면 위 -> 아래 순서인 코드의 실행 흐름을 인위적으로 제어하는 것이다.

✅ 블록문 (block statement)

0개 이상의 문을 중괄호로 묶은 것.

코드 블록 또는 블록이라고 부르기도 한다. JS는 블록문을 하나의 실행 단위로 취급한다.
	// 블록문
	{ var foo = 10; }
	// 제어문
	var x = 1;
	if(x < 10) { x++; }
	// 함수 선언문
	function sum(a,b) {
      	   return a + b;
    	}

✅ 조건문 (control statement)

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

조건식은 boolean 값으로 평가될 수 있는 표현식이다.

🔰 if ... else문

if...else 문은 주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다.

	if (조건식 1) {
	  // 조건식 1 이 true이면 실행
	  else if (조건식 2){
	    // 조건식 2 가 true이면 실행
	  }
	  else{
	    // 조건식 1,2 모두 false인 경우 실행
	  }
	}

❗ if문과 else문은 2번이상 사용할 수 없다.

대부분의 if ... else문은 삼항 연산자로 변경할 수 있다.

	var x = 2;
	//if문
	var result;
	if(x % 2) result= '홀수';
	else result = '짝수';
	//삼항 연산자
	var result = (x % 2) ? '홀수' : '짝수'
    
	console.log(result); // 짝수

3가지 경우의 수를 갖는 경우

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

🔰 switch 문

switch 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.

일치하는 case문이 없다면 실행 순서는 default 문으로 이동한다.

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

📌if...else문의 조건식은 boolean 값으로 평가되어야 하지만 switch문의 표현식은 boolean 값 보다는 문자열이나 숫자 값인 경우가 많다.
❗ fall through
평가 결과와 일치하는 case문을 실행 한 후, switch문이 끝날 때까지 이후의 모든 case문과 default문을 실행하는 현상. -> break문으로 switch문을 탈출할 수 있게 해 줘야 함!
❗BUT break없이 fall through를 활용할 수도 있다.

✅ 반복문 (loop statement)

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다.

이는 조건식이 거짓일 때까지 반복된다.

🔰 for 문

for문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.
for(변수 선언문 또는 할당문; 조건식; 증감식){
  조건식이 참인 경우 반복 실행될 문;
}
📌 for문의 변수 선언문, 조건식, 증감식은 모두 옵션이다.
❗ 단, 어떤 식도 선언하지 않으면 무한루프가 된다.

🔰 while 문

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

for문은 반복횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.
❗ 조건이 계속 참이면 무한루프가 된다. -> if문으로 while문 내부에 탈출 조건을 만들고, break로 탈출해야 한다.
	var cnt = 0;
	
	while (cnt < 3) {
	  console.log(cnt); // 0 1 2
	  cnt++;
	}

🔰 do...while 문

do...while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.
	var cnt = 0;
	
	do {
	  console.log(cnt); // 0 1 2
	  cnt++;
	} while (cnt < 3); ->cnt가 3보다 작을 때까지 코드 블록을 반복 실행한다.

🔰 break 문

break 문은 코드 블록을 탈출한다.

레이블 문, 반복문 또는 switch문의 코드 블록을 탈출한다. -> ❗이 세 가지 외에 break문을 사용하면 SyntaxError가 발생한다.
✅ 레이블 문

식별자가 붙은 문, 프로그램의 실행 순서를 제어하는데 사용한다. (ex)switch문의 case, default 문)

레이블 문을 탈출하려면 break문에 레이블 식별자를 지정한다.
	foo: console.log(1);
	break foo; // foo 레이블 블록문을 탈출한다.
📌 레이블 문은 중첩 for문 외부로 탈출할 때 유용하다.
	outer: for(let i = 0; i < 3; i++) {
     	   for(let i = 0; i < 3; i++) {
		if(i+j === 3) break outer; -> outer, 밖의 for문을 빠져나간다.
	   }
	}
❗ 이 외의 경우에 레이블 문을 사용하면 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문에 권장하지 않는다.

🔰 continue 문

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

break 문처럼 반복문을 탈출하지는 않는다.
	for(let i = 0; i < 3; i++) {
	    if(i=== 2) continue; -> i가 2인 경우 아래 console.log 실행 ❌
		console.log("check", i);
	 }