처음부터 시작하는 javascript deep dive(08.제어문)

 

핵심 정리

8장 제어문

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

일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행됩니다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있습니다.

 

블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 합니다.

블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않습니다.

{
	var foo = 10;
}

 

조건문

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

조건식은 불리언 값으로 평가될 수 있는 표현식입니다.

Javascript에는 if...else... 문과 switch 문으로 두 가지 조건문이 있습니다.

if...else 문

조건에 따라서 단순히 값을 결정하여 변수에 할당하는 경우 if...else 문보다 삼항 조건 연산자를 사용하는 편이 가독성이 좋습니다. 하지만 조건에 따라 실행해야 할 내용이 복잡하여 여러 줄의 문이 필요하다면 if...else 문을 사용하는 편이 가독성이 좋습니다.

var x = 2;
var result;

if(x % 2) { // 2 % 2는 0 이므로 0은 암묵적 강제 변환되어 false를 리턴합니다.
 result = '홀수';
} else {
 result = '쨕수';
}

 

switch 문

if...else 문은 조건식은 불리언 값으로 평가되어야 하지만 switch 문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많습니다.

switch 문은 논리적 참,거짓보다는 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용합니다.

var month = 12;
var monthName;

switch (month) {
	case 1: monthName = 'January';
    case 2: monthName = 'February';
    case 3: monthName = 'March';
    ...
    case 12: monthName = 'December';
    default: monthName = 'Invalid month';

console.log(monthName);

 

위 결과는 "Invalid month"가 출력됩니다. December를 기대하였지만 switch 문이 끝날 때까지 이후의 모든 case 문과 default 문을 실행했기 때문입니다. 이를 풀스루(fall through)라 합니다. 이러한 결과가 나온 이유는 break 문을 같이 사용하지 않았기 때문입니다.

var month = 12;
var monthName;

switch (month) {
	case 1: monthName = 'January';
     break;
    case 2: monthName = 'February';
     break;
    case 3: monthName = 'March';
     break;
    ...
    case 12: monthName = 'December';
     break;
    default: monthName = 'Invalid month';

console.log(monthName);

default 문에는 break 문을 생략하는 것이 일반적입니다.

만약 if...else 문으로 해결할 수 있다면 switch 문보다 if...else 문을 사용하는 편이 좋습니다.

 

반복문

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

 

for 문

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

 

반복문을 대체할 수 있는 다향한 기능

자바스크립트는 배열을 순회할 때 사용하는 forEach 메소드, 객체의 프로퍼티를 열거할 때 사용하는 for...in문, ES6에서 도입된 이터러블을 순회할 수 있는 for...of 문등 다양한 기능을 제공합니다.

 

while 문

while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행합니다. for 문은 반복 횟수가 명확할 때 주로 사용하고, while 문은 반복 횟수가 불명확할 때 주고 사용합니다.

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

 

do...while 문

do...while 문은 코드 블록을 먼저 실행하고 조건식을 평가합니다. 따라서 코드 블록을 무조건 한 번 이상 실행합니다.

var count = 0;

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

 

레이블 문 

레이블 문이란 식별자가 붙은 문을 말합니다.

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

// foo라는 식별자가 붙은 레이블 블록문
foo : {
 console.log(1);
 break foo; // foo 레이블 블록문 탈출
 console.log(2);
}

console.log('Done');

 

완벽 공략

일부 개발자들은 if...else... 문에서 else 부분을 사용하지 않는 것이 가독성을 높인다고 주장합니다.

이러한 접근 방식은 주로 "조건문의 레벨을 낮추기(Flat Conditional)"라고 불리며, 코드의 복잡성을 줄이고 가독성을 향상시키기 위한 목적으로 사용됩니다.

 

if...else... 문에서 else를 생략하는 것이 가독성에 도움이 된다는 주장의 주요 포인트는 다음과 같습니다:

1. 단순화 및 명확성: else를 생략하면 코드가 더 단순해지고, 각 조건의 결과가 더 명확하게 드러납니다. 이는 특히 중첩된 if 문에서 유용합니다.
2. 조기 반환(Early Return): 함수에서 조건이 충족되지 않는 경우 조기에 반환하는 방식을 사용하면, 나머지 코드가 주 조건을 충족한다는 것이 명확해집니다. 이는 else 블록을 사용하는 것보다 코드 흐름을 이해하기 쉽게 만듭니다.
3. 가드 절(Guard Clauses): 특정 조건이 충족되지 않을 때 빠르게 처리를 종료하는 '가드 절'을 사용하면, 중첩된 조건문을 피할 수 있어 코드가 더 읽기 쉬워집니다.
   

저는 코드는 명시적이고 직관적이어야 한다고 평소에 생각하였는데요, else 문을 사용하지 않는 것이 가독성을 높인다는 주장도 신빙성 있고 공감도 갔습니다. 어느 상황이나 구조에 어떤 식으로 사용할지는 개발자 스타일이겠지만 가장 중요한 것은 코드의 가독성, 유지 보수의 용이성, 그리고 의도의 명확성을 유지하는 것입니다.