- 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복실행(반복문)할 때 사용한다.
- 일반적으로 코드는 위에서 아래로 순차적으로 실행하지만
제어문을 사용하면 인위적으로 제어할 수 있다. - 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다.
제어문의 사용을 억제하기 위한 노력으로
forEach, map, filter같은 고차함수를 사용하는 방법이 있다.
👩🏻💻 8.1 블록문
- 블록문은 0개 이상의 문을 중괄호{ }로 묶은 것으로,
코드블록 또는 블록이라고 부르기도 한다. 하나의 실행 단위로 취급한다.
- 단독으로 사용할 수도 있으나 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.
- 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에
블록문의 끝에는 세미콜론을 붙이지 않는다.
👩🏻💻 8.2 조건문
- 조건문은 주어진 조건식의 결과에 따라 블록문의 실행을 결정한다.
- 조건문은 불리언 값으로 평가될 수 있는 표현식이다.
- 자바스크립트는 if…else문과 switch문을 제공한다.
8.2.1 if … else 문
- if…else문은 주어진 조건식의 평가결과, 즉 불리언값에 따라 실행할 코드 블록을 결정한다.
- true일 경우 if문의 코드 블록이 실행되며, false일 경우 else문의 코드 블록이 실행된다.
if(조건식){ // 조건식이 true일 경우 실행 } else { // 조건식이 false일 경우 실행 } - 만약 if문의 조건식이 불리언 값이 아닌 값으로 평가되면
엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 결정한다.
- 조건식을 추가하고 싶다면 else if문을 사용한다.
if(조건식1) { // 조건식1이 true일 경우 실행 } else if(조건식2) { // 조건식2가 true일 경우 실행 } else { // 조건식1과 2가 모두 false일 경우 실행 } - 코드 블록 내의 문이 하나라면 중괄호를 생략할 수 있다.
var num = 2; var kind; if(num>0) kind = '양수'; else if(num<0) kind = '음수'; else kind = '영'; - 대부분의 if문은 삼항 조건 연산자로 바꿔 쓸 수 있다.
// x가 짝수이면 result 변수에 문자열 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당한다. var x = 2; var result; if (x % 2) { // 2 % 2는 0이다. 이때 0은 false로 암묵적 강제 변환된다. result = '홀수'; } else { result = '짝수'; } console.log(result); // 짝수 **삼항 조건 연산자** var x = 2; // 0은 false로 취급된다. var result = x % 2 ? '홀수' : '짝수'; console.log(result); // 짝수
삼항조건연산자표현식은 값처럼 사용할 수 있어 변수에 할당할 수 있다.
하지만 if문은 값처럼 사용할 수 없기 때문에 변수에 할당할 수 없다.
- 단순히 값을 결정하여 변수에 할당하는 경우
삼항 조건 연산자를 사용하는 편이 가독성이 좋다. - 하지만 조건에 따라 실행해야 할 내용이 복잡하다면
if문을 사용하는 것이 가독성이 좋다.
8.2.2 switch문
- switch문은 주어진 표현식을 평가하여
그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. - case문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다.
- 표현식과 일치하는 case문이 없다면 실행 순서는 default문으로 이동한다.
default 문은 사용할 수도 있고 사용하지 않을수도 있다.
- if문은 논리적 참, 거짓으로 실행할 코드블록을 결정하며,
switch문은 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용한다.
- 예제처럼 나오는 이유는 문을 실행한 후 switch문을 탈출하지 않고
switch문이 끝날때까지 모든 case문과 default문을 실행했기 때문이다.
이를 ‘폴스루’라고 한다.
→ ‘Invalid month’가 출력된 이유는
해당하는 문의 마지막에 break문 을 사용하지 않았기 때문이다.// 월을 영어로 변환한다. (11 → 'November') var month = 11; var monthName; switch (month) { case 1: monthName = 'January'; case 2: monthName = 'February'; 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 = 'October'; case 11: monthName = 'November'; case 12: monthName = 'December'; default: monthName = 'Invalid month'; } console.log(monthName); // Invalid month - 올바른 switch문은 아래와 같다.
// 월을 영어로 변환한다. (11 → 'November') var month = 11; var monthName; switch (month) { case 1: monthName = 'January'; break; case 2: monthName = 'February'; break; case 3: monthName = 'March'; break; case 4: monthName = 'April'; break; case 5: monthName = 'May'; break; case 6: monthName = 'June'; break; case 7: monthName = 'July'; break; case 8: monthName = 'August'; break; case 9: monthName = 'September'; break; case 10: monthName = 'October'; break; case 11: monthName = 'November'; break; case 12: monthName = 'December'; break; default: monthName = 'Invalid month'; } console.log(monthName); // November - default문은 switch문의 마지막에 위치하므로 별도의 break문이 필요 없다.
- 여러 개의 case문을 하나의 조건으로 사용하고 싶을 경우, 폴스루가 유용한 경우도 있다.
- if문으로 해결될 수 있다면 if문으로 사용하는 것이 좋지만,
조건이 너무 많은 경우에는 switch문을 사용하는 것이 가독성이 더 좋다.
👩🏻💻 8.3 반복문
- 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다.
- 조건식이 거짓일 때까지 반복한다.
- 자바스크립트는 for문, while문, do…while문을 제공한다.
8.3.1 for문
- for문은 조건 식이 거짓으로 평가될 때 까지 코드블록을 실행한다.
- for문의 실행순서
for ( 변수 선언문 또는 할당문; 조건식 ; 증감식) { 조건식이 참일 경우 반복 실행될 문; } for (var i = 0; i < 2; i++) { console.log(i); } // 0 1- 제일 처음, 변수 선언문 var i=0이 실행된다.
- 그 다음 조건식이 실행되는데 i=0이기 때문에 결과는 true이다.
- true이기 때문에 콘솔을 실행하여 0을 출력하게 되고,
그 다음 증감식이 실행되며 i는 1이 된다. - 조건식이 false가 나올때까지 반복..
- 조건식이 false가 나오게 되면 for문의 실행이 종료된다.
- for문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다.
단, 어떤 식도 선언하지 않으면 무한 루프가 된다.
- for문 내에 for문을 중첩 해 사용할 수 있다. 이를 중첩 for문이라 한다.
//이중 중첩 for문을 이용한 주사위 합 구하기 for (var i = 1; i <= 6; i++) { for (var j = 1; j <= 6; j++) { if (i + j === 6) console.log(`[${i}, ${j}]`); } }
8.3.2 while문
- while문은 주어진 조건 식의 평가 결과가 참이면 코드 블록을 계속 반복 실행한다.
- for문은 반복 횟수가 명확할 때 사용하고,
while문은 반복 횟수가 불명확할 때 주로 사용한다. - while문은 조건문의 결과가 거짓이 되면 종료한다.
var count = 0; // count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다. while (count < 3) { console.log(count); // 0 1 2 count++; } - 조건식의 결과가 언제나 참이면 무한루프에 빠지게 되는데,
이를 탈출하기 위해서는 if 문으로 탈출 조건을 만든 뒤,
break문을 이용하여 코드 블록을 탈출한다.var count = 0; // 무한루프 while (true) { console.log(count); // 0 1 2 count++; if(count === 3) break; }
8.3.3 do … while문
- do…while문은 코드 블록을 먼저 실행하고 조건 식을 평가한다.
- 따라서 코드 블록은 무조건 한 번 이상 실행된다.
var count = 0; // count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다. do { console.log(count); count++; } while (count < 3); // 0 1 2
👩🏻💻 8.4 break문
- break문은 레이블 문, 반복문 또는 switch문의 코드 블록을 탈출한다.
- 그 외의 코드 블록 외에 break문을 사용하면 SyntaxError가 발생한다.
- 참고로 레이블 문이란 식별자가 붙은 문을 말한다.
// foo라는 레이블 식별자가 붙은 레이블 문 foo: console.log('foo');- 레이블 문은 프로그램의 실행 순서를 제어하는 데 사용한다.
- 중첩된 for문에서 내부 for문이 아닌 외부 for문을 탈출하려면 레이블 문을 사용한다.
// 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문 외부로 탈출할 때 유용하지만
그 밖의 경우에는 권장하지 않는다. - 프로그램의 흐름이 복잡해져 가독성이 나빠지고
오류를 발생시킬 가능성이 높아지기 때문이다.
👩🏻💻 8.5 continue문
- continue문은 반복문의 코드블록 실행을 현 지점에서 중단하고
반복문의 증감식으로 흐름을 이동시킨다.var string = `Hello World`; var search = `l`; var count = 0; // continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다. for (var i = 0; i < string.length; i++) { // 'l'이면 카운트를 증가시킨다. if (string[i] === search) { count++; // code // code // code } } // continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다. for (var i = 0; i < string.length; i++) { // 'l'이 아니면 카운트를 증가시키지 않는다. if (string[i] !== search) continue; count++; // code // code // code }
😆 알게되거나 느낀 점
- 반복문과 제어문은 많이 사용되니 여러번 반복을 통해 숙지해두는 것이 중요한 것 같다.
그냥 쉽게쉽게 이론만 알고 넘어가지 말고, 응용 할 수 있는 능력을 기를 것.
- switch문에서 break문을 항상 기억하자.
반드시 사용되는 것은 아니며,
폴스루를 응용할 수 있는 방법도 있으니 무조건적인 작성은 지양하자.
프론트엔드를 희망하고 있습니다.