[Java Script] ?. 와 ?? 연산자 알아보기

| ?. (Optional Chaining)

?. 는 자바스크립트 object자료형에서 자료를 꺼내고 싶을 때

마침표를 찍어서 꺼내듯이 ?.도 비슷한 기능을 합니다.

let data = {
  name: "Lee",
  age: 25
}

console.log(data.name); // "Lee" 출력
console.log(data?.name); // "Lee" 출력

하지만 완전히 같은 기능을 하는 건 아니고,

?. 는 왼쪽에 있는 데이터가 null이거나 undefined인 경우 undefined를 남겨줍니다.

 

보통 중첩돼 있는 object자료에서 에러 없이 데이터를 꺼낼 때 사용합니다.

보통 데이터가 많이 중첩돼 있으면 중첩돼 있는 데이터를 잘못 꺼내는 경우가 생기는데

이럴 때 undefined를 남겨줘서 에러가 발생하지 않도록 합니다.

let data = {
    name: "Lee",
    age: { age1: 25 }
}

console.log(data.age2.age1); // 에러
console.log(data.age2?.age1); // undefined 출력, 에러X

 

| ?? (Nullish coalescing operator)

?? 는 왼쪽요소의 값이 null이나 undefined일 경우 오른쪽에 있는 요소를 보여주는 연산자입니다.

let data;
let data2 = "안녕1";

console.log(data ?? '안녕'); // '안녕' 출력
console.log(data2 ?? '안녕'); // '안녕1' 출력