[JavaScript] 객체에 대해

한빛미디어 '프런트엔드 레벨을 높이는 자바스크립트 퀴즈북' 2장 '객체' 를 읽고 정리합니다.

이 책 베타리더로 참여했었는데 발행본 받고나서 처음부터 다시 읽고 있습니다.

 

 

• Object.assign은 얕은 복사 메서드이다. 스프레드처럼 depth가 1인 필드만 복사되고 나머지는 기존 참조를 유지함. 
• Object.defineProperty로 객체의 속성 정의, 수정을 key 단위로 세밀하게 할 수 있음.

const user = {};

Object.defineProperty(user, 'name', {
  value: '철수',
  writable: false,      // 수정 불가
  enumerable: true,     // for...in, Object.keys() 에서 속성이 보일지 말지 결정
  configurable: false   // 삭제 불가
});

Object.defineProperty(user, 'age', {
  get() {
    return 30;
  },
  enumerable: true
});

• Object.freeze는 속성값의 추가나 변경을 불가능하게 하지만 속성값이 객체타입이라면 해당 (하위)객체의 속성은 변경 가능하다.
• 객체 리터럴이나 new Object()을 통해 객체를 생성하면 키가 겹칠 수 있음. 아래 코드로 방지 가능.

// Object.create(생성할 객체가 상속받을 프로토타입); 이용

Object.create(null);  // 아무런 상속도 받지 않은 순수 객체 생성 가능

• 객체의 속성에 접근하는 방법은 점 표기법, 대괄호 표기법이 있음.
    const obj = {name: "doringri"} 라는 객체라면 obj["name"] 으로 해야함.
• 객체를 그냥 스프레드로 풀려고 하면 에러발생. 스프레드는 이터러블 객체만 가능하기 때문.

// 겉을 {}로 감싸면 가능 (ECMAScript 2018부터)
{...{name: "car", color: "white"}, ...{size: "small"}}

• 스프레드 문법 사용하기

const dog = {
    name: "해피",
    activity: {
       morning: "산책",
       lunch: "낮잠"
   },
   mealPriority: ["알러지프리", "체중조절", "기호성"]
}

const {name: petName, activity: {morning, lunch}, mealPriority} = dog;    // 분해할당
const [mealPriority[0], mealPriority[1]] = [mealPriority[1], mealPriority[0]];   // 순서변경

console.log(`강아지이름: ${petName}, 활동: ${morning, lunch}`);
console.log(mealPriority.join(","));    // 체중조절,알러지프리,기호성

• const {name = "언해피"} = dog; 이런 식으로 사용하면 name이라는 속성이 객체에 없을 때 기본값을 부여할 수 있다.
• Set, Map 같은 키 기반 컬렉션은 이터러블 객체이며, 요소가 추가된 순서를 보장한다. has, delete 같은 편리한 메서드들도 제공한다.

const words = new Map();
words.set("a", 123);

for (const [key, value] of words) {
    console.log(key, value);
}

• WeakMap의 키는 무조건 객체여야 하며, 그 객체에 대한 다른 참조가 사라지면 GC에 의해 자동 정리된다.

const images = document.querySelectorAll("img");
const valid = new WeakMap();

images.forEach(image => {
    valid.set(image, isValidImage(image));
});

• 제너레이터는 함수 실행을 멈췄다가 다시 이어서 할 수 있게 하는 함수이며, 이터러블 객체를 쉽게 만들 수 있다.

function* counter() {
  yield 1; // 값 반환
  yield 2;
  yield 3;
}
const gen = counter();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }