자바스크립트 제어문 Control flow statement

Achivement Goals

 

🏁  조건문

 

✅  truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.

✅  비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.

✅  if 와 else if , else를 이해하고 무리없이 활용할 수 있다.

✅  논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다.

 

🏁  반복문

 

✅  반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다.

✅  for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다.

✅  기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다.

✅  for와 while의 차이에 대해서 설명할 수 있다.

✅  반복문에 조건문을 적용하여 특정 조건에서만 코드가 실행되도록 할 수 있다.

✅  이중 포문이 무엇인지 이해하고 활용할 수 있다.

 

 

📌  제어문 왜 써?

 

조건에 따라 코드 블록을 실행하거나 (조건문)

반복실행할 때 사용한다. (반복문)

 

제어문을 사용하면, 코드의 실행 흐름을 인위적으로 제어할 수 있다.

그러나 코드의 실행 순서 변경은,

단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 만든다.

 

나중에 살펴볼 forEach, map, filter, reduce 같은 고차 함수는

제어문의 사용을 억제하여 코드의 복잡성을 해결하는 메서드들이다.

 

 

📌  제어문 종류?

 

🏁  블록문

 

// 블록문

{
   var foo = 10;   
}


// 함수 선언문

function sum(a, b){
   a + b;   
}

 

블록문은 언제나 문의 종류를 의미하는, 자체 종결성을 갖는다.

블록문의 끝에는 세미콜론을 붙이지 않는다는 것에 주의하자.

 

 

🏁  조건문

 

 

◾ if...else 문

 

// if...else 문의 정석 if / else if / else 

var x = 2;
var result;

if(x % 2){
   result = '홀수';   
}else{
   result = '짝수';   
}

 

// 코드 내 블록문이 1개면 {} 생략 가능

var num = 2;
var kind;

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

 

// 삼항 연산자 (경우의 수 2가지)

var x = 2;

var result = x % 2 ? '홀수' : '짝수';

 

// 삼항 연산자 (경우의 수 3가지)

var num = 2;

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

 

삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에, 변수에 할당할 수 있다.

하지만, if else 문은 표현식이 아닌 문이다. 즉, if else 문은 변수에 할달할 수 없다.

 

 

◾ switch 문

 

var year = 2000;
var month = 2;
var 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:   
      days = ((year % 4 === 0 && year % 100 !== 0) || (year % 400)) ? 29 : 28;      
      break;      
   default:   
      console.log('Invalid month');      
}

console.log(days);

 

조건문은 문제를 많이 풀면서 익숙해져야 한다. 케이스들을 최대한 많이 접해보자. 

 

 

 

🏁  반복문

 

 

◾ for 문

 

// for문의 정석

for (var i = 0; i N 2; i++){
   console.log(i);   
}

 

// 무한 루프

for(;;){...}

 

// 이중 for문

for(var i = 1; i <= 6; i++){
   for(var j = 1; j <= 6; j++){   
      if(i + j === 6) console.log(`[${i},${j}]`);      
   }   
}


/** 
 *  [1, 5]
 *  [2, 4]
 *  [3, 3]
 *  [4, 2]
 *  [5, 1]
**/

 

 

◾ while 문

 

// while문의 정석

var count = 0;

while(count < 3){
   console.log(count);   
   count++;  // for문과 다르게 while문 내부에서 조건을 증감해버림   
}

// for(변수 선언문 or 변수 할당문; 조건식; 증감식)
// while(조건식){증감식}

 

// 무한 루프

while(true){...}

 

// 무한 루프 탈출 break

var count = 0;

while(true){
   console.log(count);   
   count++;   
   if(count === 3) break;   
}

 

 

◾ do...while 문

 

// 그냥 while(조건문)을 뒤로 뺀것 ...
// 뭐얌 다를 게 없잖아

var count = 0;

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

 

코드 블록을 먼저 실행하고  -->  조건식을 평가하기 때문에

무조건 한번 이상 실행되는 특징을 지니고 있다.

 

 

🏁  break 문

 

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

이들 이외에 break문을 사용하면 SyntaxError(문법 에러)가 발생한다.

 

// if문 -> Uncaught SyntaxError: Illegal break statement

if (true){
   break;
}

 

// 레이블 문 -> 식별자가 붙은 문

// ex. foo라는 식별자가 붙은 레이블 문 

   foo: console.log('foo');
   
    
// ex. foo라는 식별자가 붙은 레이블 블록문

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

 

레이블 문은 프로그램의 실행 순서를 제어하는 데 사용한다.

사실, switch문의 case문과 default문도 레이블 문이다. 

레이블 문을 탈출하려면 break문에 레이블 식별자를 지정한다.

 

// outer라는 식별자가 붙은 레이블 for문

outer: for(var i=0; i<3; i++){
          for(var j=0; j<3; j++){          
             if(i+j === 3) break outer;             
             console.log(`inner [${i}, ${j}]`);             
          }          
          console.log('Done!');          
       }

 

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

레이블 문을 사용하면, 프로그램의 흐름이 복잡해져서 가독성이 나빠지고, 오류를 발생시킬 가능성이 높아진다.

 

 

🏁  continue 문

 

continue문은 반복문의 코드 블록 실행을 현 시점에서 중단하고,

반복문의 증감식으로 실행 흐름을 이동시킨다.

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

 

var string = 'Hello World';
var search = 'l';
var count = 0;


// continue문을 사용하지 않으면 if문 내에 코드를 작성해야 한다.

for(var i=0; i<string.length; i++){
   if(string[i] === search){   
      count++;      
   }   
}


// continue문을 사용하면 if문 밖에 코드를 작성할 수 있다.

for(var i=0; i<string.length; i++){
   if(string[i] !== search) continue;
   
   count++;
}

 

// 참고로 String.prototype.match 메서드를 사용해도 같은 동작을 한다.

const regexp = new RegExp(search, 'g');

console.log(string.match(regexp).length);

 

 

 

출처

모던 자바스크립트 Deep Dive - 이웅모