[모던 자바스크립트 Deep Dive] 8장 - 제어문

5 minute read

모던 딥다이브

🎉 제어문

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

  • 코드의 실행 흐름을 인위적으로 제어할 수 있다.
  • 가독성을 해치기도 하고 오류를 발생시키는 원인이 된다.
    • forEach, map, filter, reduce 를 이용해 깔끔하게 표현이 가능하다.

😉 블록문

0개 이상의 문을 중괄호 { }로 묶은 것 -> 코드블록 -> 블록

  • 블록문을 하나의 실행 단위로 취급
  • 단독도 가능하나, 일반적으로 제어문이나 함수를 정의할 때 사용한다.
    • 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 가져 세미콜론을 붙이지 않는다.

😉 조건문

주어진 조건식의 평가 결과에 따라 코드블록의 실행을 결정한다. (조건식은 boolean 값으로 평가될 수 있는 표현식이다)

🐱‍🐉 if…else 문

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

  • 조건식이 참(true) -> if문의 코드블럭
  • 조건식이 거짓(false) -> else문 코드 블럭 실행

  • if문의 조건식은 불리언 값으로 평가되어야 하는데, 그렇지 않은 경우 ‘암묵적 타입 변환’에 의해 불리언 값으로 강제 변환이 된다.

    var a;
if (a) {} => false
if (!a) {} => true

var b = null;
if (b) {} => false
if (!b) {} => true
    • 블록 내의 문이 하나뿐이라면 중괄호를 생략가능

  • else if: 조건식을 추가하여 조건에 따라 실행될 코드를 블록으로 늘리고 싶을떄 사용

    • else if문은 여러번 사용 할 수 있다.
    if (조건식1) {
  //조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) {
  //조건식2가 참이면 이 코드 블록이 실행된다.
} else {
  //조건식1과 조건식2가 모두 거짓이면 이 코드 블럭을 실행된다.
}

  • 삼항 조건 연산자로 변경 할 수 있다.

    var num = 2;
var kind = num ? (num > 0 ? "양수" : "음수") : "영";
//kind에 결과값을 할당한다.
//그룹연사자로 인해 먼저 num>0의 삼항조건 연산자의 값을 낸다.
//var kind = num ? '양수' : '영';
console.log(kind); //양수

🐱‍🐉 switch 문

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

  • case문 : 상황을 의미하는 표현식/콜론:으로 마침/ 실행할 문들이 뒤에 위치
  • default문 : case문과 일치하는 문이 없다면 실행

  • break : break가 들어있는 해당 case가 종료됨을 뜻하고 switch 문을 빠져나오게 함

    switch(표현식){
  case 표현식1 :
    switch문의 표현식과 표현식1이 일치하면 실행되는 문;
    break;
  case 표현식1 :
    switch문의 표현식과 표현식1이 일치하면 실행되는 문;
    break;
  default;
    switch문의 표현식과 일치하는 case문이 없을 때 실행되는 문;
}
  • switch문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.

  • 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정 할때 사용한다.

  • 폴스루(fall through)

    • switch 문을 탈출하지 않고 switch문이 끝날 때까지 이후의 모든 case문과 default문을 실행하는 것
    // 폴스루를 활용해 여러개의 case문을 하나의 조건으로 상용할 수 있다.
//윤년 판별 코드
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 === year % 100 !== 0) ||(year % 400 === 0)) ? 29 : 28 ;
    //윤년계산 알고리즘
    //1.연도가 4로 나누어떨어지는 해(2000, 2004, 2008 ...)는 윤년이다.
    //2.연도가 4로 나누어 떨어지더라도 연도가 100으로 나누어떨어지는 해(2000, 2100 ....)는 평년이다.
    //3.연도가 400으로 나누어 떨어지는 해 (2000, 2400...)는 윤년이다.
    break;
  default;
    console.log('Invalid month');
}

console.log(days); //29

💡 만약 if else문으로 해결이 가능하다면 switch문보다 if else문을 사용하자

하지만, 조건이 너무 많아 가독성이 좋지 않을때 switch문을 고려하자.

😉 반복문

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

  • for문 while문 do…while문

※ 참고 ) 반복문을 대체 할 수 있는 다양한 기능

  • forEach메서드 : 배열 순회 -> array1.forEach(element => console.log(element));
  • for…in문 : 객체의 프로퍼티를 나열할 때 -> for (const property in object) {
  • for…of문 : 이터러블을 순회할 수 있을 때 대체 가능한 반복문 -> for (let [key, value] of iterable)
    • Map, Set, Array, function*

🐱‍🐉 for 문

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

for(변수 선언문 또는 할당문; 조건식; 증감식){
  조건식이 참인 경우 반복 실행될 문;
}
for(var i = 0; i < 2; i++){
  console.log(i);
}
//0
//1

for(;;;){...} //어떤 식도 선언하지 않으면 무한 루프

for(var i = 1; i <= 6; i++){
  for(var j= 1; j <= 6; j++){
      if(i+j ===6) cosole.log(`${i},${j}`);
  }
} // 중첩사용 예시

🐱‍🐉 while 문

주어진 조건식의 평가 결과가 참이면 코드블록을 계속해서 반복 실행한다. (반복 횟수가 불명확할 때 주로 사용한다.)

var conut = 0;
while (count < 3) {
  console.log(count); //0 1 2
  count++;
}
  • 조건식의 평가 결과가 언제나 참이면 무한루프가 된다.
  • 무한루프에서 탈출하기 위해서는 코드 블록 내에 if문으로 탈출 조건을 만들고 break문으로 코드를 탈출한다.
    • for 문은 반복 횟수가 명확할 때 주로 사용한다.

🐱‍🐉 do…while문

코드블록을 먼저 실행하고 조건식을 평가한다. (코드 블록은 무조건 한 번 이상 실행된다.)

var count = 0;
do {
  console.log(count); //0 1 2
  count++;
} while (count < 3);

😉 break continue문

🐱‍🐉 break

코드 블록을 탈출한다.

  • break문은 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있어 유용하다.
var string = "Hello World.";
var search = "l";
var index;

//문자열은 유사 배열이므로 for 문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
  //문자열 개별 문자가 'l'이면
  if (string[i] === serch) {
    index = i;
    break; //반복문을 탈출한다.
  }
}
console.log(index); //2
//참고로 String.prototype.indexOf 메서드를 사용해도 같은 동작을 한다.
console.log(string.indexOf(search)); //2

🐱‍🐉 continue 문

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

  • continue문을 만나면 아래의 코드를 실행하지 않고 다시 조건문으로 돌아가 실행된다.
var string = "Hello World";
var search = "l";
var count = 0;
//문자열은 유사 배열이므로 for문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
  //'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동한다.
  if (string[i] !== search) continue;
  count++;
}
console.log(count); //3

//참고로 String.propotype.match 메서드를 사용해도 같은 동작을 한다.
const regexp = new RegExp(search, "g");
console.log(string.match(regexp).length); //3

👀 참고 : 레이블 문

break는 레이블 문, 반복문, switch문 외의 코드 블록에서 SyntaxError가 발생한다.

  • ※ 레이블 문 : 프로그램의 실행 순서를 제어하는데 사용하는 문

    • 레이블 문은 중첩된 for문 외부로 탈출할 때 유용하지만 프로그램의 흐름이 복잡해지고 가독성이 나타져 오류를 발생시킬 가능성이 높아진다.
    var i, j;

loop1: for (i = 0; i < 3; i++) {
  //첫번째 for문은 "loop1" 레이블을 붙였다.
  loop2: for (j = 0; j < 3; j++) {
    //두번째 for문은 "loop2" 레이블을 붙였다.
    if (i === 1 && j === 1) {
      continue loop1;
    }
    console.log("i = " + i + ", j = " + j);
  }
}

// 출력 결과:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// 다음 두 경우를 어떻게 스킵하는지 주목 : "i = 1, j = 1", "i = 1, j = 2"

foo: {
  // 반복문이 아닌 레이블에는 break; 만 사용 가능하다.
  console.log("face");
  break foo;
  console.log("this will not be executed");
}
console.log("swap");

Leave a comment

You may also enjoy