ES6 이후에 새롭게 정의된 Object 편의 정적 메서드들

새롭게 추가된 Object 객체의 정적 메서드가 중요한 이유

• 현재 자바스크립트 표준을 정하는 ECMA 위원회의 의중이 가장 많이 반영된 메서드들이다.
• ECMA 위원회는 과거에 자바스크립트가 저지른 실수를 바로잡으려 한다.
  • 그러나 하위 호환성을 완벽하게 유지해야 한다는 숙제가 있다.
  • 그래서 ECMA 위원회는 기존의 것을 없애기보다 Object 쪽에 새로운 메서드들을 추가하며 그들의 현재 의중을 반영하고 있다.

Object.assign()

Object.assign(target, ...source);

• target 객체에 source 객체의 속성을 덮어씌운다.
• 마지막에 온 source 객체의 속성이 가장 나중에 덮어씌워지므로 승리한다.
• Object.assign() 은 엔진 내부에 있는 C 함수로 퍼포먼스가 매우 빠르다.
• 단, descriptor 를 통해 enumerable 하지 않게 지정된 속성은 복사하지 않는다.

예제 1: 기본 사용

const defaultOption = {
  짜장면: "부먹",
  탕수육: "부먹",
};

const obj = Object.assign({}, defaultOption, { 탕수육: "찍먹" });

console.log(obj); // {짜장면: '부먹', 탕수육: '찍먹'}

• 마지막 객체에 온 탕수육 속성이 승리했다.
• 매우 간단해보이지만, 예전엔 이러한 도우미 함수가 존재하지 않았기에 직접 구현해야 했다.
  • 생각보다 코드가 길어지며 번거로웠다.

예제 2: 심볼 속성 복사해보기

const mySymbol = Symbol();
const obj1 = {
  [mySymbol]: "SYMBOL!!!",
};

const obj2 = Object.assign({}, obj1);

console.log(obj2[mySymbol]); // "SYMBOL!!!"

• 심볼이 키인 속성도 잘 복사한다.

Object.is()

• 연산 결과는 === 과 거의 같으나 아래의 비교만 다르다.
  • Object.is(NaN, NaN); 은 true
    • NaN === NaN; 은 false
  • Object.is(+0, -0) 은 false
    • +0 === -0 은 true

알아두면 좋은 것

얼핏 보면 "=== 가 있는데 왜 Object.is() 를 써야 할까?" 라는 질문을 하기 쉽다. Object.is() 의 존재 의의는 아래와 같다.

• === 과 Object.is() 가 NaN 과 +0, -0 에 대한 동치 비교가 다른 이유는 위원회의 새로운 결정이 반영되었기 때문이다.
• === 는 연산자인 반면, Object.is() 는 정적 메서드이다.
  • === 연산자는 중위 표현식을 사용하는 반면, Object.is() 는 전위 표현식을 사용할 수 있다.

a + b * c + d 라는 연산이 있다고 하면, 전위 표현식으로 표현했을 때, +(+a(*bc))d 와 같이 풀린다.
전위 표현식의 장점은 + 나 * 같은 '연산자를 함수로 보고' '괄호속에 있는 것을 인자' 로 볼 수 있다는 것이다.
이러한 규칙에 의한 함수 합성을 반복하려면 중위 표현식으로는 무리가 있다. 전위나 후위로 고쳐야 하는데, 그 부분에서 Object.is() 가 탁월한 것이다.

위원회는 새로운 결정사항들을 Object.xxx() 메서드에 밀어넣고 있으므로 새롭게 생성하는 소스코드에는 Object.xxx() 정적 메서드를 적극 활용하는 것이 위원회의 방침에 따르는 것이다.

Object.values()

• 오브젝트 값의 배열을 제공한다.

const obj = {
  이름: "김똘똘",
  나이: 30,
  직업: "무직",
};

console.log(Object.values(obj)); // ['김똘똘', 30, '무직']

Object.entries()

• 오브젝트 키와 값 배열을 배열로 제공한다.

const obj = {
  이름: "김똘똘",
  나이: 30,
  직업: "무직",
};

console.log(Object.entries(obj)); // [['이름', '김똘똘'], ['나이', 30], ['직업', '무직']]

• Object.entries() 는 별 것 아닌것같이 보여도 for-of 와 디스트럭처링을 함께 이용할 때 강력하다.

활용 1: 오브젝트 키 밸류 형식으로 순회하기

const obj = {
  이름: "김똘똘",
  나이: 30,
  직업: "무직",
};

for ([key, value] of Object.entries(obj)) {
  console.log(`제 ${key}(은)는 ${value}입니다.`);
}

/*
제 이름(은)는 김똘똘입니다.
제 나이(은)는 30입니다.
제 직업(은)는 무직입니다.
*/

• 오브젝트를 키, 밸류 형식으로 순회할 수 있다.

활용 2: 배열을 인덱스 밸류 형식으로 순회하기

const arr = ["첫째", "둘째", "셋째"];

for ([index, value] of Object.entries(arr)) {
  console.log(`${index}, ${value}`);
}

/*
0, 첫째
1, 둘째
2, 셋째
*/

• let i=0 과 같이 인덱스 변수를 따로 안만들어도 인덱스 번호와 함께 배열을 순회할 수 있다.

Object.fromEntries()

• 이름에서 알 수 있듯, Object.entries() 의 반대이다.
• 배열로 구성된 [키, 값] 배열을 다시 오브젝트로 돌려준다.

const entry = [
  ["이름", "김똘똘"],
  ["나이", "30"],
  ["직업", "무직"],
];

console.log(Object.fromEntries(entry)); // {이름: '김똘똘', 나이: '30', 직업: '무직'}

Object.getOwnPropertySymbols()

• 프로퍼티의 키로 쓰인 심볼을 배열 형태로 반환한다.

const obj = {
  [Symbol()]: "심볼",
};

console.log(obj); // {Symbol(): '심볼'}
Object.getOwnPropertySymbols(obj); // [Symbol()]

Object.getOwnPropertyDescriptors()

const obj = {
  a: 10,
  b: "이십",
};

Object.defineProperty(obj, "nonEnum", {
  value: 42,
  writable: true,
  configurable: true,
});

const objDescriptors = Object.getOwnPropertyDescriptors(obj);
console.log(objDescriptors);

/*
a: {value: 10, writable: true, enumerable: true, configurable: true}
b: {value: '이십', writable: true, enumerable: true, configurable: true}
nonEnum: {value: 42, writable: true, enumerable: false, configurable: true}
*/

const obj2 = Object.defineProperties({}, objDescriptors);
console.log(obj2); // {a: 10, b: '이십', nonEnum: 42}