Symbol, 참조에 의한 객체 복사, Optional Chaining

8956 단어 JavaScriptJavaScript

Symbol

Unique Identifier를 사용하고 싶을 때

// 기본형
let id = Symbol();

// 'id'라는 설명이 붙은 심볼
let id = Symbol('id');

hidden property

숨김 프로퍼티는 외부 코드에서 접근이 불가능하고 값 덮어쓰기도 불가능

참조에 의한 객체복사

let user = { name: 'John' };

let admin = user; // 참조값을 복사

객체는 메모리 내 저장되고 변수 user엔 객체를 참조할 수 있는 값이 저장
👉 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다
👉 객체에 접근하거나 객체를 조작할 땐 여러 변수를 사용한다

let user = { name: 'Jinju' };

let admin = user;

admin.name = 'Someone'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Someone'

객체 복사

자바스크립트는 객체 복제 내장 메서드를 지원하지 않고 참조에 의한 복사로 해결 가능한 일이 대다수이지만 정말 복제가 필요한 상황이라면

👉 새로운 객체를 만들고 다음 기존 객체의 프로퍼티들을 순회해 원시 수준까지 프로퍼티를 복사

Optional Chaining '?.'

  • 구식 브라우저는 폴리필이 필요
  • ?.앞의 평가대상이 undefinednull이면 평가를 멈추고 undefined를 반환
  • 옵셔널 체이닝을 남용하지 않는다
let user = {}; // 주소 정보가 없는 사용자

// 옵셔널체이닝이 추가되기 전엔 && 연산자를 사용했음 
alert(user && user.address && user.address.street); // undefined, 에러발생X

// 옵셔널체이닝 사용
alert(user?.address?.stress)l // undeined, 에러발생 X

short-circuit (단락 평가)

?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다

syntax construct (문법 구조체)

?.는 연산자가 아니라 함수나 대괄호와 함께 동작하는 문법 구조체이다.

// 존재 여부가 확실치 않은 함수를 호출할 때
// 한 객체엔 메서드 admin이 있지만 다른 객체에는 없는 상황 

let user1 = {
	admin() {
    	alert('관리자 계정입니다');
    }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다
user2.admin?.();
  • user1에는 admin이 정의되어 있기 때문에 메서드가 제대로 호출
  • user2에는 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러없이 평가가 멈춤
  • .대신 대괄호 []를 사용해 객체 프로퍼티에 접근하는 경우에는 ?.[] 사용 가능
  • 위 예시와 마찬가지로 ?.[]를 사용하면 객체 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있음
let user1 = {
	firstName: 'Pearl'
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정
let key = 'firstName';

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

alert(user1?.[key]?.something?.not?.existing); // undefined

?.delete와 조합해 사용가능하다

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

Optional Chaining 요약

  • obj?prop-obj가 존재 ? obj.prop을 반환 : undefined를 반환
  • obj?[prop]-obj가 존재 ? obj[prop]반환 : undefined를 반환
  • obj?.method()-obj가 존재 ? obj.method() 호출 : undefined를 반환

좋은 웹페이지 즐겨찾기