자바스크립트 nullish 병합 연산자에 대해 아십니까?

nullish 병합 연산자(nullish  coalescing operator)는 ?? 연산자를 사용해서 값을 선택하게 해주는 문법이에요

?? 이거는 처음들어 보시져?

 

||, && 연산자에 대해서 우선 살펴볼게요

0 || 1 이거는 true고 0 || 0 은 false 잖아요

그리고 1 && 1 이거는 true 고 1 && 0 은 false 고요

그럼 조건문 사용할 때 위 연산이 true/false를 반환하는가 라고 생각할수 있어요

근데 그렇지 않아요

|| 연산자는 앞에서부터 true에 해당되는 값이 발견되면 그 값을 반환하는거에요

자바스크립트에서 값을 bool 값으로 변환해주는 방식에 따라서 말이져

&& 연산자는 반대로 false 해당되는 값이 발견되면 그 값을 반환하고요

 

그래서 위에 설명드린 걸 다시 써보면 반환되는 값은 아래처럼 되요

조건의 마지막까지 오게되면 그냥 마지막 값을 넘겨줘요

 - 0 || 5 = 5,

 - 0 || 0 = 0

 - 10 && 5 =  5

 - 10 && 0  = 0;

그래서 조건문은 반환된 값을 토대로 true/ false로 변환 시키는거에요

 

그럼 ??는 멀까요?

|| 랑 거의 유사해요 근데 true/ false를 판단하는 기준이 달라요

자바스크립트 자동형변환 기본 구조에 따르는게 아니에요

값이 선언되어져 있기만 하면 그 값이 0이건 빈스트링이던 상관없이 true 처리해요

예를 들어 볼게요

let a = 0;
console.log(a || 3 || 0);	// 결과는 3이에요
console.log(a ?? 3 ?? 0);	// 결과는 0이에요
console.log(0 ?? 3 ?? 0);	// a 대신 0을 넣어도 결과는 0이에요
console.log(null ?? 3 ?? 0);	// a 대신 null을 넣으면 결과는 3이에요

이거 어떨때 쓰면 유용할까요?

삼항연산자 대체할때 좋아요

여러개중에 값을 선택할때 swich/ if 문 이런거 안써도 되요

아래 보시면 Person 생성자에서 두개의 인자를 받고 이름을 지어줄건데 

닉네임이 있으면 닉네임, 없는데 네임은 있으면 네임, 네임도 없으면 기본값으로 하라는거에요

이거 swich/ if 문 써야되는데 코드 한줄로 끝나요

그리고 age는 그냥 전달받은게 있기만하면 그걸로 사용하고 아니면 0으로 할게라고 하는 코드에요

const DEFAULT_NAME = 'anonymous';

class Person {
	name = '';
    age = 0;
	constructor(nickName, name, age) {
    	// 왼쪽부터 체크해서 값이 true에 해당되면 그 값을 사용하겠다
    	this.name = nickName || name || DEFAULT_NAME;
        // 왼쪽부터 체크해서 값이 있기만하면 그 값을 사용하겠다
        this.age = age ?? 0;
    }
}