✔️옵셔널 체이닝과 널 병합 연산자

이전 포스팅에서는 단축 평가(short-circuit evaluation)에 대해서 살펴보았습니다.

단축 평가를 이용하여 논리 연산의 결과를 결정 짓는 피연산자를 그대로 반환하는 특징을 이용해

if 문을 대체하거나 혹은 객체가 null 혹은 undefined인 경우에 발생할 수 있는 널 참조 에러를 막기도 하였습니다.

📌옵셔널 체이닝(?.)

옵셔널 체이닝 연산자는 ES11(ECMAScript2020)에서 도입되었습니다.

옵셔널 체이닝 연산자를 통해 참조하려는 객체가 null인지 혹은 undefined인지 확인할 수 있습니다.

만약 참조하려는 객체가 null 또는 undefined라면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있습니다.

1. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

let elem = null;

let value = elem?.value;
console.log(value); // undefined

?.은 delete와 조합해서 사용할 수도 있습니다.

delete user?.name; // user가 존재하면 user.name을 삭제합니다.

🚨할당 연산자 왼쪽에서는 쓸 수 없습니다. 객체가 존재하지 않는 경우 undefined를 반환하기 때문입니다.

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.

👉?.(), ?.[]

옵셔널 체이닝은 함수, 대괄호와 함께 동작하는 특별한 문법 구조체입니다.

존재 여부가 확실치 않은 함수를 호출할 때 ?.()를 쓸 수 있습니다.

let user1 = {
  admin() {
    console.log("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

user1과 user2객체가 존재합니다.

user1에는 admin 메서드가 존재합니다. 따라서 ?.()를 사용해서 admin 존재 여부를 확인했고 메서드가 제대로 호출되었습니다.

하지만 user2에는 admin 메서드가 존재하지 않습니다. 하지만 ?.()를 사용해서 에러 없이 평가가 멈추었습니다.

?.[]도 사용할 수 있습니다.

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

📌널 병합 연산자(??)

널 병합 연산자 또한 ES11(ECMAScript2020)에서 도입되었습니다.

널 병합 연산자는 좌항의 피연산자가 null 또는 undefined라면 우항의 연산자를 반환하고, 그렇지 않은 경우에는 좌항의 피연산자를 반환합니다.

즉, 다음과 같이 동작합니다.

x = (a !== null && a !== undefined) ? a : b;

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

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
console.log(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛