스프레드 연산자와 옵셔널 체이닝

이재영·2023년 3월 29일
0

HTML CSS JS

목록 보기
12/22
post-thumbnail

스프레드 연산자

스프레드 연산자는 원본 유지하고 새로운 객체를 만든다.
let obj = {name : 'soon', content :"내용"};

let obj2 = obj;
obj2.name = "kim";
//객체는 주소를 참조하는 래퍼런스타입
console.log(obj); // kim , 내용이 출력된다.
//원래 soon 인데 obj2.name으로 덮어씌웠기 때문에 kim이 출력된다.
console.log(obj2); // kim , 내용이 출력된다.
console.log(obj == obj2);  //true 출력

//...스프레드 연산자 구문
let obj3 = {...obj};
obj3.name = "kim2";
console.log(obj); //kim , 내용이 출력된다.
console.log(obj3); // kim2, 내용이 출력된다.
console.log(obj == obj3);  //false 출력

옵셔널 체이닝

ES11에서 도입되었고 객체의 값을 호출할 때 안전성을 유지하면서 호출 가능하다.
객체의 키 앞에 ? 구문을 추가해서 작성
let obj4 = {name : "soon", content : "내용"};

console.log(obj4?.name); // soon 출력된다.
console.log(obj4?.age);  // undefined 출력된다.

let obj5 = {
    name : "soon",
    content : {
        age : 1,
    }
}
console.log(obj5?.content.key); // undefined 출력된다.

obj4?.name
name의 키값이 있는지 확인, 없으면 undefined 던진다.
오류가 나지 않게 방지해준다.
오류가 나지 않는 이유는 객체의 키값을 확인하고
type에러가 나지않게 방지해주기 때문이다.

profile
한걸음씩

0개의 댓글