[JavaScript] New Javascript 16장 - 옵셔널 체이닝과 Null 병합

✅ 1. 옵셔널 체이닝 (Optional Chaining, ?.)

옵셔널 체이닝(Optional Chaining)은 객체의 중첩된 속성 또는 매세드에 접근할 시, 중간에 있는 값이 null이나 undefined일 경우 에러를 발생시키지 않고 undefined를 반환하게 해주는 방법으로 기본 구조는 다음과 같습니다

객체?.속성

• 옵셔널 체이닝의 특징: 옵셔는 체이닝은 ?. 앞의 대상이 null이거나 undefined이면, 그 즉시 평가를 멈추고 undefined를 반환해 준다.
• 사용하는 이유: 데이터가 필수적이지 않을 경우 에러(Cannot read property ...of undefined)로 인하여 프로그램이 종료되는 것을 방지하기 위함 

const user = { name: "Chaeyoung", age: 20 };
// user.cat는 undefined이므로 에러 대신 undefined 반환
console.log(user.cat?.name); // undefined
// console.log(user.cat.name); // TypeError: Cannot read property 'name' of undefined

---

✅ 2. Null 병합 연산자 (Nullish Coalescing Operator. ??)

Null 병합 연산자(Nullish Coalescing Operator)은 왼쪽 피연산자가 null이거나 undefined이면, 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 값을 반환하는 논리연산자입니다.

왼쪽의 값 ?? 오른쪽의 값

• 특징:  | | (OR) 연산자와 비슷하나, 0," ", false 같은 "falsy(거짓같은 값)"한 값들을 유효한 값으로 취급하고 오직 nul이나 undefined일 때만 오른쪽의 값을 사용한다.
• 사용하는 이유: 변수의 기본값을 설정하거나, 0 또는 빈 문자열을 의도적으로 처리해야 할 경우에 유리함

// Null 병합 연산자
const count = 0;
const text = null;

console.log(count ?? 20); // 출력: 0 (0은 null이 아니므로 20이 아닌 0이 출력);
console.log(text ?? "기본 텍스트"); // 출력: "기본 텍스트" (text는 null이므로 오른쪽 값이 출력);

---

✅ 3. 정리 (옵셔널 체이닝 or Null 병합)

특징	옵셔널 체이닝(?.)	Null 병합 (??)
목적	안전한 속성에 접근	기본값을 설정할 때
대상	객체의 속성/메서드	변수, 값
null 또는 undefined 시	undefined 반환	우항 값 반환
Falsy값 취급	0, " "는 통과	0, " "도 통과(nullish만 처리)

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript