[JS] 단축 평가 - 옵셔널 체이닝 및 null 병합 연산자

단축 평가란

const obj = {
    name: "Park" // key = name, value = "Park"
}

객체는 코드와 같이 키와 값으로 구성되어 있다. 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null이나 undefined이면

타입 에러가 발생한다. 이때 단축평가를 사용하면 에러가 발생하지 않는다.

let obj = null;
let result = obj.value; // TypeError

let obj2 = null
let result2 = obj2 && obj2.value; // null

 

단축 평가는 코드와 같이 논리연산자로 나타낼 수 있다.

 

true && 1 // -> 1이 반환된다.

true || 1 // -> true가 반환된다.

&& 연산자는 첫 번째 피연산자가 true이고 두 번째 연산자까지 true여야 true이므로 뒷 부분을 반환한다.

반면 || 연산자는 첫 번째 피연산자가 true이면 두 번째 피 연산자는 보지 않아도 true를 반환할 수 있으므로 true를 반환한다.

 

그러나 좌항 피연산자 0과 ''등 false를 리턴하는 값들에 대해 예기치 않은 동작이 발생할 수 있다.

그래서 나온 게 옵셔널 체이닝 연산자, null 병합 연산자이다.

 

옵셔널 체이닝 연산자(?.)

let obj = null;
let result = obj?.value; // undefined

 

해당 코드와 같이 연산자 ?. 는 좌항의 피연산자가 null, undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

객체를 가르키기를 기대하는 변수가 null, undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.

또한 좌항 피연산자가 0또는 ''인 경우에도 유용하게 쓸 수 있다.(실제 값인데 참조하지 못하는 경우)

 

 

null 병합 연산자 (??)

let str = null ?? "Park"; // "Park"

null 병합 연산자는 변수에 기본값을 설정할 때 유용하다. 또한, 항상 false를 리턴하는 값에 대해서도 처리할 수 있다.

 

ex)

const result = '' || 'Park';  // "Park"

const result2 = '' ?? 'Park';  // ''

 

옵셔널 체이닝 연산자와 null 병합 연산자를 통해 항상 false를 반환하는 값들에 대해(빈 문자열, 0 등) 개발자의 생각대로 처리할 수 있으며 예기치 않은 동작을 방지할 수 있다.