[자바스크립트] 옵셔널 체이닝

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

- ES11에 도입되었으며 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조!

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

let ob = null;

let cob = ob?.name;

// 좌항의 연산자가 null 이기 때문에 undefined를 반환
console.log(cob) 

ob = {age:12};

cob = ob?.name;

// 좌항의 연산자가 undefined 또는 null이 아니지만 객체 안에 name 프토퍼티가 없기 때문에 undefined 반환
console.log(cob) //  undefined

cob=ob?.age;
console.log(cob) //  12

✅ 논리 연산자 &&와 옵셔널 체이닝 연산자의 차이점

- 논리 연산자 &&는 좌항 피연산자가 Falsy한 값이면 좌항 피연산자를 그대로 반환

- 옵셔널 체이닝 연산자 ?.는 Falsy한 값이라도 null, undefined가 아니면 우항의 프로퍼티를 참조

let ob = null;

let aob = ob && ob.name;
let oob = ob?.name;

// && 연산자는 좌항 피연산자가 Falsy한 값이기 때문에 좌항 연산자를 그대로 반환했고 ?.는 좌항의 연산자가 null이라 undefined를 반환
console.log(aob); // null
console.log(oob); // undefined

ob='';

aob = ob && ob.name;
oob = ob?.name;

// && 연산자는 좌항 피연산자가 Falsy한 값이기 때문에 좌항 연산자를 그대로 반환했고(빈 문자열) ?.는 좌항 연산자가 null 또는 undefined가 아니지만 name의 프로퍼티가 정의되지 않았기 때문에 undefined를 반환
console.log(aob); // 
console.log(oob); // undefined

ob=0;

aob = ob && ob.name;
oob = ob?.name;

console.log(aob); // 0
console.log(oob); // undefined

---

참조 - 객체를 예로 들었을 때 변수에 객체 값을 저장하면 변수에 할당된 값은 객체 값이 아니라 객체의 주소 값이 저장되고 그 주소 값을 통해 실제 객체에 접근

var person = {
    name : 'Lee'
};

//참조 값을 복사(얕은 복사)
var copy = person;
copy === pserson // true

copy.name = 'Kim';
person.adress = 'Seoul';

copy // {name: 'Kim', adress: 'Seoul'}
person //{name: 'Kim', adress: 'Seoul'}
// ->copy와 person은 동일한 객체를 가리킨다.

// && 논리 연산자
true && true // true
true && false // false
false && false // false
false && true // false