Javascript 논리연산자 (||) 와 Nullish Coalescing (??) 차이

Javascript 논리연산자(||) 와 Nullish Coalescing (??) 차이

 

null, undefined 인 값을 초기화 할때 논리연산자와 Nullish Coalescing을 자주 활용합니다.

이 둘을 활용하면 코드를 간결하게 작성할 수 있죠.

 

그럼 예시코드를 보겠습니다.

 

const test = function(name){
    let msg = "";
    if(name === null || typeof name === "undefined"){
        msg = "아무개님 안녕하세요!";
    }else{
        msg = name +"님 안녕하세요!";
    }
    console.log(msg);
}

 

name 파라메터를 받아 콘솔로 인사말을 출력하는 test 함수가 있습니다.

이제 이 함수 내 if문 조건을 논리연산자를 활용해 변경해보겠습니다.

 

const test = function(name){
    name = name || "아무개";
    console.log(name+"님 안녕하세요");
}

 

코드가 간결해 졌죠? 

null이나 undefined 를 name에 전달한 결과도 같습니다.

 

test(); /*아무개님 안녕하세요!*/
test(undefined); /*아무개님 안녕하세요!*/
test(null); /*아무개님 안녕하세요!*/

 

하지만 논리연산자는 0이나 "", false 일 경우에도 null, undefined 일 때와 같은 결과를 출력합니다.

 

test(); /*아무개님 안녕하세요!*/
test(undefined);
test(null); /*아무개님 안녕하세요!*/
test(0); /*아무개님 안녕하세요!*/
test(""); /*아무개님 안녕하세요!*/
test(false); /*아무개님 안녕하세요!*/

 

이게 논리 연산자와 nullish coalescing 의 차이인데요. 

위의 test 함수를 nullish coalescing 으로 변경해보겠습니다. || -> ??

 

const test = function(name){
    name = name ?? "아무개";
    console.log(name+"님 안녕하세요");
}

 

실행을 해보도록 하죠.

 

test(); /*아무개님 안녕하세요!*/
test(undefined); /*아무개님 안녕하세요!*/
test(null); /*아무개님 안녕하세요!*/
test(0); /*0님 안녕하세요!*/
test(""); /*님 안녕하세요!*/
test(false); /*false님 안녕하세요!*/

 

논리 연산자를 사용했을 때와 다른 결과가 출력되었습니다.

위의 차이점을 알아두시고 논리연산자와 Nullish Coalescing을 적절히 활용하여 

간결한 코드를 작성해보세요!