[모던 JS] CH8 제어문, CH9 타입 변환과 단축 평가

CH8. 제어문

8.1 블록문

: 0개 이상의 문을 중괄호로 묶은 것

: 자바스크립트는 블록문을 하나의 실행 단위로 취급

: 문의 끝에는 세미콜론을 붙이는 것이 일반적이나, 블록문은 자체 종결성을 갖기 때문에 세미콜론을 붙이지 않음

// 블록문
{
    var foo = 10;
}

// 제어문
var x = 1;
if (x < 10) {
    x++;
}

// 함수 선언문
function sum(a, b){
    return a + b;
}

8.2 조건문

8.2.1 if...else문

: if문의 조건식은 불리언 값으로 평가되어야 함

: 만약 불리언 값이 아닌 경우 강제변환되어 실행됨

var num = 2;
var kind;

if (num > 0) {
    kind = '양수';
} else if (num < 0){
    kind = '음수'
} else {
    kind = '영'
}

console.log(kind);

 

: 만약 코드 블록 내의 문이 하나뿐이라면 중괄호 생략 가능

var num = 2;
var kind;

if (num > 0) kind = '양수';
else if (num < 0) kind = '음수';
else kind = '영';

console.log(kind);

 

: 대부분의 if...else 문은 삼항 조건 연산자로 바꿔 쓸 수 있음

// x가 짝수이면 res변수에 문자열 '짝수'를 할당하고,
// 홀수이면 문자열 '홀수'를 할당한다.

var x = 2;

var res = x % 2 ? '홀수': '짝수';
console.log(res);


// '양수', '음수', '영'의 세 가지인 경우
var num = 2;

var kind = num ? (num > 0 ? '양수' : '음수') : '영');
console.log(kind);

 

: 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당을 할 수 있음

: 하지만 if...else 문은 값처럼 사용할 수 없기 때문에 변수에 할당할 수 없음

: 조건에 따라 실행해야 할 내용이 복잡한 경우 if...else문을 사용하는 편이 가독성이 좋음

8.2.2 switch문

: switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default문으로 이동함

: default문은 선택사항으로, 사용할 수도 있고 사용하지 않을 수도 있음

: switch문의 표현식은 문자열이나 숫자 값인 경우가 많음

: case를 타고 난 뒤에 break문을 사용해서 탈출해줘야 함

: default문에는 break 문을 생략하는 것이 일반적임

switch (표현식) {
    case 표현식1:
        switch 문의 표현식과 표현식1이 일치하면 실행될 문;
        break;
    case 표현식2:
        switch 문의 표현식과 표현식2가 일치하면 실행될 문;
        break;
    default:
        switch 문의 표현식과 일치하는 case문이 없을 때 실행될 문;
}

8.3 반복문

8.3.1 for문

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

- for 문의 변수 선언문, 조건식, 증감식은 모두 옵션

- 단, 어떤 식도 선언하지 않으면 무한루프

8.3.2 while문

: 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행

var count = 0;

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

 

- 조건식의 결과가 언제나 참이면 무한루프

while(true) {...}

 

- 무한루프에서 탈출하기 위해서는 if문으로 탈출 조건을 만들고 break 문으로 코드 블록을 탈출

8.3.3 do...while문

- 코드 블록을 먼저 실행하고 조건식을 평가함

var count = 0;

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

8.4 break 문

? 레이블 문

: 식별자가 붙은 문

- 중첩된 for 문을 외부로 탈출할 때 유용하지만, 그 밖의 경우는 권장하지 않음

foo: console.log('foo');

foo: {
    console.log(1);
    break foo;
    console.log(2);
}

console.log('Done!');

8.5 continue문

- 실행 흐름을 이동시킴

- break문처럼 반복문을 탈출하지는 않음

CH9. 타입 변환과 단축 평가

9.1 타입 변환이란?

! 개발자가 의도적으로 값의 타입을 변환하는 것

: 명시적 타입 변환, 타입 캐스팅

 

! 개발자의 의도와 상관없이 암묵적으로 타입이 자동 변환되는 것

: 암묵적 타입 변환, 타입 강제 변환

9.2 암묵적 타입 변환

9.2.1 문자열 타입으로 변환

1 + '2' // "12"

9.2.2 숫자 타입으로 변환

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

 

- 비교 연산자의 역할은 불리언 값을 만드는 것

'1' > 0 // true

 

- + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행함

- 객체와 빈 배열이 아닌 배열, undefined는 반환되지 않아 NaN이 됨

// 문자열 타입
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN

// 불리언 타입
+true // 1
+false // 0

// null 타입
+null / 0

9.2.3 불리언 타입으로 변환

- 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환함

- 불리언 타입이 아닌 값을 참으로 평가되는 값 또는 거짓으로 평가되는 값으로 구분함

: 거짓으로 평가되는 값  - false, undefined, null, 0, -0, NaN, ''

if('') console.log('1');
if(true) console.log('2');

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출하는 방법

// 숫자 타입 => 문자열 타입
String(1);
String(NaN);
String(Infinity);

// 불리언 타입 => 문자열 타입
String(true);
String(false);

2. Object.prototype.toString 메서드를 사용하는 방법

// 숫자 타입 => 문자열 타입
(1).toString();
(NaN).toString();
(Infinity).toString();

// 불리언 타입 => 문자열 타입
(true).toString();
(false).toString();

3. 문자열 연결 연산자를 이용하는 방법

// 숫자 타입 => 문자열 타입
1 + '';
NaN + '';
Infinity + '';

// 불리언 타입 => 문자열 타입
true + '';
false + '';

9.3.2 숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법

2. parseInt, parseFloat 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능)

3. + 단항 산술 연산자를 이용하는 방법

4. * 산술 연산자를 이용하는 방법

9.3.3 불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

2. ! 부정 논리 연산자를 두 번 사용하는 방법

9.4 단축 평가

9.4.1 논리 연산자를 사용한 단축 평가

! && 논리곱 연산자

- 두 개의 피연산자가 모두 true로 평가될 때 true를 반환

- 좌항에서 우항으로 평가가 진행됨

 

! || 논리합 연산자

- 두 개의 피연산자 중 하나만 true

9.4.2 옵셔널 체이닝 연산자

9.4.3 null 병합 연산자