모던 자바스크립트 Deep Dive - 4

✅ 아래 내용들에 대해서 알아보자

- 블록문/조건문
- 반복문/break문
- 타입변환

 

블록문

 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, JS는 블록문을 하나의 실행 단위로 취급한다.

• 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수 정의할 때 사용
• 블록의 끝에는 세미콜론을 붙이지 않는다.

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

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

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

 

 

조건문

 조건문은 주어진 조건식에 따라 코드 블록의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.

 

if.. else 문

 if 조건식이 불리언 값이 아닌 값으로 평가되면 JS 엔진에 의해 암묵적으로 불리언 값으로 강제 변환되어 실행할 코드 블록을 결정한다.

-> 암묵적 타입 변환

{
    const num=2;
    if(num >0){
        console.log("양수")
    }
    else{
        console.log("음수")
    }
}

 

 

Switch/case 문

아래 코드를 보면 switch/case 문에는 default를 제외혹 break;를 넣어야 한다. 그렇지 않으면 값을 할당 후 s/c문을 탈출하지 않고 default까지 가게 되므로 값을 재할당하게 된다. 이러한 현상을 폴스로(fall through)라고 한다.

 

{
    const year=2000;
    const month=2;
    let days=0;

    switch (month) {
        case 1:case 3:case 5:case 7:case 8:case 10:case 12:
            days=31;
            break;

        case 4: case 6:case 9:case 11:
            days=30;
            break;

        case 2:
            days=((year%4 ===0 && year % 100 !==0) || (year%400 ===0)) ? 29:28;
            break;

        default:
            console.log('Invalid Month');
    }

    console.log('days = ' + days);
}

 

 

for 문 

예시코드

//선형 증가 반복
for(let i=0; i<2; i++){
    console.log(i);
}

//선형 감소 반복
for (let i=2; i>0; i--){
    console.log(i)
}

//무한 루프
for(;;){
    console.log("loop")
}

{
    for (let i = 1; i <= 2; i++) {
        for (let j = 1; j <= 2; j++) {
            if (i + j === 2) console.log(`[${i}, ${j}]`);
        }
    }
}

 

 

While 문

{
    let cond = 0;
    while (cond++ < 3) {
        console.log(cond)
    }

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

}

 

 

break 문

 break문은 레이블 문, 반복문, switch문의 코드 블록을 탈출한다. 

레이블문은 식별자가 붙은 문을 말하며, 프로그램의 실행 순서를 제어하는데 사용한다(switch 문의 case문과 default문도 레이블문이다.)

레이블 문을 탈출하려면 break문에 레이블 식별자를 지정해야 한다.

foo: console.log('foo');

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

 

 

타입변환

JS에서는 모든 값은 타입이 있다. 개발자 의도에 따라 타입을 변환할 수 있다. 의도적으로 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다. 반대로 개발자의 의도와 상관없이 JS엔진에 의해 타입이 자동 변환되는 것을 암묵적 타입변환이라 한다.

 

 

 

명시적 타입 변환

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

/**
 * 명시적 타입 변환
 */

//3개 차이점이 뭘까?
let str1="11";  //일반적으로 사용
let str2=String(1)  //연산 후 명시적으로 타입을 체크할때
let str3=new String("11"); //?

str3.hi = 'hello';
str3.bye= 'bye';



str2.hi = 'hello';

console.log(str3.hi === 'hello')
console.log(str2.hi === 'hello')
console.log('++++++++++++')

console.log(typeof str2)
console.log(typeof str3)


if(str1 == str2)
    console.log("같다")

if(str1 === str3)
    console.log("같다2")

//숫자 타입 -> 문자열 타입
console.log(typeof String(1), String(1));   //string 1
console.log(typeof String(NaN), String(NaN));   //string NaN
console.log(typeof String(Infinity), String(Infinity)); //string Infinity
console.log(typeof (1).toString(),(1).toString());  //string 1

//불리언 타입 -> 문자열 타입
console.log(typeof String(true), String(true)); //string true
console.log(typeof String(false), String(false));   //string false


const calc1='1 + 2 * 3';
const calc2=String('1 + 2 * 3')

console.log(typeof calc1,calc1)
console.log(typeof calc2,calc2)


/**
 * 불리언 타입으로 변환
 *  1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
 *  2. !부정 논리 연산자를 두 번 사용하는 방법
 */
//문자열 -> 불리언 타입
console.log(typeof Boolean('x'),Boolean('x'));  //boolean true
console.log(typeof Boolean(''),Boolean(''));    //boolean false
console.log(typeof Boolean('false'),Boolean('false'));  //boolean true

//숫자 -> 불리언
console.log(typeof Boolean(0),Boolean(0));

//null -> 불리언
console.log(typeof Boolean(null), null);
console.log(typeof Boolean(undefined), undefined);

//객체 -> 불리언
console.log(typeof Boolean({}), {});
console.log(typeof Boolean([]), []);

 

 

암묵적 타입 변환

 아래 암묵적 타입 변환 예시를 같이보자.

/**
 * 암묵적 타입 변환 예제
 */

//숫자타입
console.log(typeof 0+'',0+'') //Number 0
console.log(typeof -0+'',-0+'') //Number 0
console.log(typeof 1+'',1+'')   //Number 1
console.log(typeof -1+'',-1+'') //Number -1
console.log(typeof NaN+'',NaN+'')   //Number Nan
console.log(typeof Infinity + '',Infinity + '') //Number Infinity

//불리언 타입
console.log(typeof true+'',true+'') //true
console.log(typeof false+'',false+'') //false

//null 타입
console.log(typeof null+'',null+'')   //null

//undefined 타입
console.log(typeof undefined+'', undefined+'') //undefined

//심벌 타입
console.log(typeof (Symbol()+'')) //TypeError : cannot convert a Symbol value to string

 

불리언 타입 변환

 JS엔진은 조건식 평가를 불리언 타입으로 암묵적으로 변환시킨다. 불리언 타입이 아닌 값을 Truthy/Falsy 값으로 구분한다.

아래 예제코드를 보자.

 

/**
 * 불리언 타입으로 변환
 * JS엔진은 조건식의 평가를 불리언 타입으로 암묵적으로 변환시킨다.
 * 이때 JS 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.
 */
if('') console.log(1);       
if(true) console.log('2')
if(0) console.log('3')
if('str') console.log('4')
if(null) console.log('5')

->2, 4 찍힘

/**
 * Falsy로 평가되는 값들
 */
if(!false) console.log(false + ' is Falsy value');
if(!undefined) console.log(undefined + ' is Falsy value');
if(!null) console.log(null + ' is Falsy value');
if(!0) console.log(0 + ' is Falsy value');
if(!NaN) console.log(NaN + ' is Falsy value');
if(!'') console.log('' + ' is Falsy value');

function isFalsy(v){
    return !v;
}

function isTruthy(v){
    return !!v;
}

//true
console.log(isFalsy(false));
console.log(isFalsy(undefined));
console.log(isFalsy(NaN));

//false
console.log(isFalsy(true));
console.log(isFalsy({}));
console.log(isFalsy([]));

 

단축 평가(쇼트서킷)

 단축평가(쇼트서킷)는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 대부분 프로그래밍 언어는 쇼트서킷을 통해 논리 연산을 수행한다.

 

//논리곱에서는 첫번쨰 'Cat'을 Truthy로 보기때문에 두번쨰 값인 'Dog'가 출력
console.log('Cat' && 'Dog');

//논리합에서는 첫번쨰 'Cat'을 Truthy로 보기때문에 쇼트서킷으로 'Cat'을 출력
console.log('Cat' || 'Dog');

 

함수 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당되게 된다. 이때 쇼트서킷을 활용해서 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

 

 

function getStringLength(str){
    str = str || '';
    return str.length;
}

console.log(getStringLength());     //0
console.log(getStringLength('hi')); //2

 

옵셔널 체이닝 연산자

ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var e=null;

var va=e?.value;
console.log(va) //undefined

 

null 병합 연산자

null 병합 연산자?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 좌항의 피연산자가 false로 평가되는 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다. 그리고 변수에 기본값을 설정할 때 유용하다.

var foo=null ?? 'default string';
console.log(foo); //default String