이 글은 모던 자바스크립트 Deep Dive책을 보고 정리한 내용입니다.

제어문

일반적으로 코드는 위에서 아래로 실행되지만, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있습니다. 제어문에는 조건문과 반복문이 있습니다. 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치므로, 함수형 프로그래밍기법에서는 forEach, map, filter, reduce 같은 고차 함수를 활용하여 제어문의 사용을 억제하여 가독성을 좋게 만듭니다.

블록문

// 블록문
{
  a = 1;
}

// 객체
let b = {
  a: 1;
}

• 블록문(코드 블록)은 문을 중괄호로 묶은 것으로, 하나의 실행 단위다. 단독으로도 사용할 수 있으나 일반적으로 제어문이나 함수를 정의할 때 사용한다.

조건문

• 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다.
• if... else문과 switch문 두 가지가 있다.

if... else문

• if문의 조건식은 불리언 값으로 평가되어야 하고, 만약 불리언 값이 아닌 값이 아닌 값으로 평가된다면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 강제 변환된다.

if(조건식1) {
	// 조건식1이 참이면 실행하는 코드 블록
} else if(조건식2) {
	// 조건식2가 참이면 실행하는 코드 블록
} else if(조건식3) {
	// 조건식3이 참이면 실행하는 코드 블록
} else {
	// 조건식 1,2,3이 모두 거짓이면 실행하는 코드 블록
}  

• else문과 else if문은 옵션인데 else if만 2번 이상 사용 가능하다.
• 만약 코드 블록 내의 문이 하나라면 중괄호를 생략 가능하다.
• 대부분의 if... else문은 삼항 조건 연산자로 변경할 수 있다. 조건에 따라 단순히 값을 결정하는 경우에는 삼항 조건 연산자를 사용하는 편이 가독성이 좋지만, 여러 줄의 문이 필요한 경우 if... else문을 사용하는 편이 가독성이 좋다.

switch문

switch(표현식) {
    case(표현식1):
    	switch 표현식과 표현식1이 일치할 경우 실행될 문;
        break;
    case(표현식2):
    	switch 표현식과 표현식2이 일치할 경우 실행될 문;
        break;
    case(표현식3):
    	switch 표현식과 표현식3이 일치할 경우 실행될 문;
        break;
    default:
        switch 표현식과 일치하는 case문이 없을 경우 실행될 문;

• if... else문은 주어진 조건의 평가의 참거짓으로 실행될 코드 블록이 결정되지만,switch문은 논리적 참거짓 보다는 문자열이나 숫자 등 표현식의 케이스에 따라 사용됩니다.
• 지정해 놓은 모든 case에 표현식이 맞지 않는다면 default에 지정된 문이 실행된다.
• 해당 case 내의 문을 실행하고 switch문을 더 이상 실행하지 않기 위해, break를 넣어줘야 한다. case내에 break가 없다면 모든 case를 돌고 마지막 default까지 가게 되는데 이를 폴스루(fall through)라고 한다.
• 만약 if... else문으로 해결할 수 있다면 if... else문을 사용하는 것이 낫지만, 조건이 너무 많다면 가독성을 위해 switch문을 사용하는 것이 좋다.

반복문

• 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행하고, 이후에 다시 조건식을 평가하여 참인 경우 코드 블록을 다시 실행한다.
• 반복문 내에서 반복문을 실행할 수 있다.

for

for (변수 선언문 또는 할당문; 조건식; 증감식) {
	// 조건식이 참일 경우 실행될 문
}  

• 일반적으로 사용되는 for문의 형태이다.
• for문 내의 선언문, 조건식, 증감식은 모두 옵션이지만 모두 작성하지 않는다면 무한루프가 된다.

while

while(조건식) {
	// 조건식이 참이면 실행될 문
}

• 조건식의 평가 결과가 참이면 평가 결과가 거짓이 되기 전까지 코드 블록문을 실행한다.
• 조건식의 평가 결과가 불리언 값이 아니면, 암묵적으로 불리언값으로 타입 변환한다.
• 조건식의 평가 결과가 언제나 참이면 무한 루프에 빠지게 되므로, 반복문을 멈추고 싶은 지점에서 break문을 통해 반복문 실행을 멈출 수 있다.

do... while문

do {
  // 조건식이 참이면 실행될 문
} while(조건식);

• do 코드 블록 내부를 먼저 실행하고 while문의 조건식을 평가하므로, 무조건 한번은 실행하게 된다.

break문

• break문은 switch문과 while문에서 코드를 더 이상 실행하지 않고, 탈출하는 용도로 사용했다.
• 반복문 (for(for in, for of), while, do... while), switch문, 레이블문 에서만 사용할 수 있고, 이 외에도 사용하면 SyntaxError가 발생한다.
• 레이블문은 식별자가 붙은 문을 말하는데 중첩된 for문을 탈출할 때 외에는, 코드의 흐름을 복잡하게 만들고 가독성이 나쁘므로 사용하지 않는 것이 좋다.

outer: for(let i=0; i<10; i++) {
  for(let j=5; j<10; j++) {
    if(i > j) break outer;
  }
}

continue문

• 실행하고 있는 반목문의 코드 블록을 현재 시점에서 중단하고, 반복문의 증감식으로 이동하고 조건식에 따라 반복문을 계속 실행한다.
• 조건식이 2줄 이상이라면 if문을 사용하는 것보다 continue를 사용하는 것이 가독성이 좋다.

for(let i=0; i<10; i++) {
  if(i % 2 === 1) continue; // i가 홀수일 떄는 아래 코드를 실행하지 않는다.
  // code
}

타입 변환과 단축 평가

자바스크립트의 모든 값은 타입이 있고, 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 의도적으로 타입을 변환하는 것을 명시적 타입 변환(explict coercion), 타입 캐스팅(type casting)이라고 하고, 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 자동적으로 타입 변환되는 것을 암묵적 타입 변환(implicit coercion), 타입 강제 변환(type coercion)이라고 한다.

타입 변환

• 타입 변환은 기존의 값을 변경하는 것이 아니라 기존 값을 사용하여 다른 타입의 값을 새로 생성하는 것이다. (원시 값이라 변경이 불가능하다.)
• 암묵적 타입 변환은 표현식을 에러 없이 평가하기 위해 피연산자를 암묵적 타입 변환을 통해 새로운 타입의 값을 만들고 한 번 사용하고 버린다.
• 자신의 코드에서 값이 어떤 타입의 값으로 암묵적 타입 변환되는 줄 예측할 수 없다면, 오류를 생산할 가능성이 높다. 그렇다고 해서, 암묵적 타입 변환을 사용하지 않는 것이 최선은 아니다. 명시적 타입 변환보다 암묵적 타입 변환의 가독성이 좋을 때가 많기 떄문이다. 그렇기 때문에, 타입 변환의 동작 방식을 정확히 이해하고 있어야 한다.

암묵적 타입 변환

문자열 타입으로 변환

1 + '2' // "12"

• +연산자는 피연산자중 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다. 문자열 연결 연산자로 동작하면 모든 피연산자는 문자열이여야 하므로, 문자열이 아닌 피연산자를 문자열로 암묵적 타입 변환한다.

`1 + 2 = ${1 + 2}` // "1 + 2 = 3"

• 템플릿 리터럴의 표현식 삽입도 암묵적으로 타입을 문자열로 변환한다.

숫자 타입으로 변환

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN

• -, *, /연산자는 산술 연산자이다. 산술 연산자는 숫자 값을 만들어야 하므로 모든 피연산자는 숫자 타입이여야 한다. 숫자 타입이 아닌 경우, 암묵적으로 숫자 타입을 변환하지만 숫자 타입으로 변환이 불가능한 경우 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이 된다.

'1' > 0

• 비교 연산자는 결과로 불리언 값을 만들어야 한다. 피연산자의 크기를 비교하기 위해서 모든 피연산자의 타입은 숫자여야 한다. 자바스크립트 엔진은 표현식을 평가하기 위해 숫자 타입이 아닌 피연산자를 숫자 타입으로 변경한다.

+"" // 0
+"1" // 1
+true // 1
+undefined // NaN
+{} // NaN
+[] // 0

• 자바스크립트 엔진은 숫자 타입이 아닌 타입을 숫자 타입으로 암묵적 변환할 때, 내부적으로 + 단항 연산자를 사용한다.
• 숫자형으로 타입 변환을 위해 개발자가 의도적으로 사용 할 수도 있다.

불리언 타입으로 변환

• 제어문 또는 조건식의 값은 불리언 타입이여야 하는데, 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값과 Falsy값으로 구분한다.
• Falsy 값(false로 평가) : false, undefined, null, 0(-0), NaN, ""

명시적 타입 변환

• 개발자의 의도에 따라 명시적으로 타입을 변환하는 방법에는, 표준 빌트인 생성자 함수(String, Number, Boolean)를 new연산자 없이 호출하는 방법, 빌트인 메서드, 암묵적 타입 변환이 있다.

문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
2. Object.prototype.toString 메서드를 사용하는 방법
3. 문자열 연결 연산자를 이용하는 방법

// String생성자 함수
String(1); // "1"
String(true); // "true"

// toString 메서드
(1).toString() // "1"
(true).toString() // "true"

// 문자열 연결 연산자
1 + ""; // "1"
true + ""; // "true"

숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 가능)
3. + 단항 산술 연산자를 이용하는 방법
4. *, / 산술 연산자를 이용하는 방법

// Number 생성자 함수
Number('1') // 1
Number('12.34') // 12.34
Number(true) // 1

// parseInt, parseFloat
parseInt('1') // 1
parseFloat('12.34') // 12.34

// + 단항 산술 연산자
+"1" // 1
+"12.34" // 12.34
+true // 1

// * 산술 연산자
'1' / 1 // 1
'12.34' * 1 // 12.34
true * 1 // 1
false / 1 // 0

불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
2. !부정 논리 연산자를 두 번 사용하는 방법

// Boolean 생성자 함수
Boolean('a') // true
Boolean('') // false
Boolean('false') // true
Boolean(0) // false
Boolean({}) // true

// !부정 논리 연산자
!!'a' // true
!!"" // false
!!{} // true
!!Infinity // true

단축 평가

논리 연산자를 사용한 단축 평가(논리합(||), 논리곱(&&))

'A' && 'B' // 'B'
'A' || 'B' // 'A'

• 논리 연산자는 좌항에서 우항으로 평가한다.
• 논리곱 연산자는 피연산자가 모두 true로 평가될 때 true를 반환한다.
• 피연산자는 모든 피연산자를 평가해야 위 표현식을 평가할 수 있다. 논리곱 연산자는 논리 연산의 결과를 결정하는 피연산자를 만나면 그 피연산자를 그대로 반환한다.
• 논리합 연산자는 첫번째 연산자만 평가해도 논리 연산의 결과를 결정할 수 있으므로, 첫 번째 피연산자를 그대로 반환한다.
• 이처럼 논리 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라고 한다. 표현식을 평가하는 도중에 평가 결과가 확정된 경우, 나머지 평가 과정을 생략하는 것을 말한다.

let done = true;

// if
let result = false;
if (done) result = true;

// 논리 연산자
let result = done || false;

• 논리 연산자를 활용하여 if문을 대체할 수도 있다.

옵셔널 체이닝 연산자

var elem = null;

// 옴셔널 체이닝
var value = elem?.value; // undefined

// 논리 연산자
var value = elem && elem.value; // null

• 옵셔널 체이닝은 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환한다. (옵셔널 체이닝을 활용하지 않으면 에러가 난다.)
• 옵셔널 체이닝이 도입(ES11(ECMAScript2020))되기 전에는 논리 연산자를 사용하여 확인했다.

null 병합 연산자

var foo = null ?? 'foo'; // 'foo'
var foo = null || 'foo'; // 'foo'

var foo = false;
foo = null ?? 'foo' // false
foo = null || 'foo' // 'foo'

• null 병합 연산자는 변수에 기본값을 설정할 때 유용하다.
• null 병합 연산자는 좌항의 피연산자가 null또는 undefined인 경우에만 우항의 피연산자를 반환한다.
• 논리합(||)연산자는 모든 falsy값인 경우에 우항의 피연산자를 반환하므로, 좌항의 피연산자가 null또는 undefined일 경우에만 값을 반환하고 싶다면 null 병합 연산자를 사용해야 한다.