08장 제어문
개요
제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.
제어문을 이해하는 것은 코딩 스킬에 많은 영향을 준다.
8.1 블록문
블록문은 0개 이상의 문을 중괄호로 묶은 것이다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 주로 제어문이나 함수를 정의할 때 사용된다.
블록문은 항상 자체 종결성을 갖기 때문에 ;을 붙이지 않는다.
8.2 조건문
조건문은 주어진 조건식의 평가 결과에 따라 코드 블록이 실행된다.
조건식은 불리언 값으로 평가될 수 있는 표현식이다.
자바스크립트는 if ... else 문과 switch 문 두 가지 조건문을 제공한다.
if ... else
- true : if 문의 코드 블록이 실행
- false : else 문의 코드 블록이 실행
조건식을 추가해 추가 조건에 따라 실행되는 코드 블록을 실행하려면 else if 문을 사용한다.
📍 대부분의 if ... else 문은 삼항 연산자로 바꿔 쓸 수 있다.
if(조건식) {
코드 블록 // 조건식 → true
} else if(다른 조건식) {
코드 블록
} else {
코드 블록 // 조건식 → false
}switch
switch 문은 주어진 표현식을 평가해, 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
표현식과 일치하는 case 문이 없다면 default 문으로 이동한다. default 문은 선택사항이다.
📍 switch 문의 표현식은 불리언 값 보다는 문자나 숫자 값
표현식에 해당하는 case 문에서는 break 키워드를 이용해 코드 블록을 탈출 해야한다.
var 표현식 = "표현식"
switch(표현식) {
case '표현식': // if (표현식 === '표현식')
...
[break]
case '표현식2': // if (표현식 === '표현식2')
...
[break]
default:
...
[break]
}8.3 반복문
반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 조건이 거짓이 될 때까지 반복한다.
for 문
for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 수행한다.
for(변수, 조건식, 증감식) {
조건식이 참일 경우 실행되는 문;
}
for (var i = 0; i < 3; i ++) {
console.log(i); // 0 1 2
}8.4 break 문
break 문은 코드 블록을 탈출한다. 정확히는 레이블 문, 반복문, switch 문의 코드 블록을 탈출한다. 언제든지 빠져나올 수 있다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // i가 5가 되면 코드 블록을 빠져나온다.
}
console.log(i); // 0 1 2 3 4
}8.4 continue 문
continue 문은 코드 블록 실행의 현 시점을 중단하고 다음 반복을 실행한다.
break 문처럼 반복문을 탈출하지 않는다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue; // i가 5일 경우 그 다음 이터레이션으로 넘어간다.
}
console.log(i); // 0 1 2 3 4 6 7 8 9
}09장 타입 변환과 단축 평가
9.1 타입 변환이란?
자바스크립트의 모든 값은 타입이 있다. 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 의도적으로 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.
이와 반대로 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 한다.
원시 값(immutable value)을 직접 변경하는 것이 아닌 기존 원시값을 이용해 새로운 원시 값을 생성하는 것이다.
명시적 타입 변환은 개발자의 의도가 명백히 드러나지만, 암묵적 타입 변환은 드러나지 않는다.
때로는 암묵적 타입 변환이 가독성이 더 좋을 수 있다.
(10).toString() 보다 10 + "" 이 더 간결하고 이해하기 쉽다.
9.2 암묵적 타입 변환
불리언 타입으로 변환
자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적으로 변환한다.
이때 불리언 타입이 아닌 값을 Truthy 또는 Falsy 값으로 구분한다.
Falsy로 평가되는 값
- false
- undefined
- null
- 0, -0
- NaN
- "" 빈문자열
Falsy한 값 이외는 모두 Truthy 값이다.
9.3 명시적 타입 변환
명시적으로 타입을 변경하는 방법은 다양하다.
- 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법
- 빌트인 메서드를 사용하는 방법
- 암묵적 타입 변환을 이용하는 방법
문자열 타입으로 변환
- String 생성자 함수를 new 없이 호출
- Object.prototype.toString 메서드 사용
- 문자열 연결 연산자 + 이용
숫자 타입으로 변환
- Number 생성자 함수를 new 없이 호출
- parseInt, parseFloat 함수를 사용 (문자열만 숫자타입으로 변환)
- + 단항 산술 연산자 이용
- * 산술 연산자 이용
불리언 타입으로 변환
- Boolean 생성자 함수를 new 없이 호출
- ! 부정 논리 연산자를 두 번 사용하는 방법
9.4 단축 평가
&& 논리곱, || 논리합
&& 연산자는 두 개의 피연산자가 모두 true일 경우 true를 반환한다.
true일 경우 결과를 결정한 마지막 피연산자를 그대로 반환한다.
|| 연산자는 피연산자가 하나라도 true일 경우 true를 반환한다.
true일 경우 결과를 결정한 첫 번째 피연산자를 그대로 반환한다.
📍 논리 연산의 결과를 결정하는 피연사자를 타입 변환하지 않고 그대로 반환 하는 것이 단축 평가이다.
옵셔널 체이닝
ES11(ECMAScript2020) 에 추가된 옵셔널 체이닝 연산자 ?.는 좌항의 피연사자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조한다.
// 옵셔널 체이닝을 사용하지 않았을 경우
var opt = null;
var value = opt.value;
console.log(value); // TypeError: Cannot read properties of null (reading 'value')
// 옵셔널 체이닝을 사용한 경우
var opt = null;
var value = opt?.value;
console.log(value); // undefined📍 옵셔널 체이닝은 좌항이 Falsy 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
null 병합 연산자
ES11(ECMAScript2020) 에 추가된 null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
📍 default 값을 설정할 때 유용하다.
var foo = null ?? "Default Value";
console.log(foo); // "Default Value"📍 null 병합 연산자는 좌항이 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.
✔ 배운점
break 문과 continue 문을 사용하면서 이 둘의 차이점을 깊게 생각해 본 적이 없었는데, 이번에 공부하면서 둘의 차이점을 알게 되었다. 적절한 상황에 맞게 사용해야겠다.
옵셔널 체이닝과 null 병합 연산자를 활용하면 좀 더 효율적인 코드를 짤 수 있을 것 같다.
