Object.keys(), values, entries, assign

keys()

객체에서 키 값들만 모아서 배열로 만드는 함수. 배열로 바뀌었기 때문에 반복문을 이용하기 쉬워진다.

const classmate = {
  name: '선호',
  age: 8,
  school: '코캠초등학교'
};

const result = Object.keys(classmate);

for (let i = 0; i < result.length; i++) {
  console.log(result[i]);
}

// "name"
// "age"
// "school"

values()

객체에서 밸류 값들만 모아서 배열로 만드는 함수. 배열로 바뀌었기 때문에 반복문을 이용하기 쉬워진다.

const classmate = {
  name: '아라',
  age: 9,
  school: '코캠초등학교'
};

const result = Object.values(classmate);

for (let i = 0; i < result.length; i++) {
  console.log(result[i]);
}

// "철수"
// 9
// "꽃샘초등학교"

entries()

앞의 함수들은 키와 밸류를 따로 뽑아냈다면, 둘다 필요할 경우에 쓸 수 있는 함수. entries()는 객체를 [[key, value]] 와 같은 배열의 형태로 바꿔준다.

const obj = { age: 8, name: '원두' };
const result = Object.entries(obj);

console.log(result); // [["age", 8], ["name", "원두"]]

객체가 배열의 형태로 바뀌었기 때문에 반복문을 사용하여 각 데이터에 더 편하게 접근할 수 있다.

여기에 앞서 배운 구조분해할당도 적용해보자.

const obj = { age: 8, name: '후니' };
const result = Object.entries(obj);

for (let i = 0; i < result.length; i++) {
  let [key, val] = result[i]; // 구조분해할당
  console.log(key + '은(는) ' + val);
}

// "age은(는) 8"
// "name은(는) 후니"

assign()

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣는다. 그 후 대상 객체를 반환한다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

구문

Object.assign(target, ...sources)

매개변수

target
목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체.

반환 값

목표 값

설명

목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓴다. 출처 객체들의 속성 중에서도 키가 겹칠 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성 값보다 우선한다.

Object.assign() 메서드는 출처 객체의 '열거 가능한 자체 속성'만 목표 객체로 복사한다. 출처 객체에서 속성 값을 가져올 땐 [[Get]], 목표 객체에 속성 값을 지정할 땐 [[Set]]을 사용하므로 각각 접근자와 설정자를 호출한다. 그러므로 Object.assign()은 속성을 단순히 복사하거나 새로 정의하는 것이 아니라, 할당(assign)하는 것이다.
따라서 출처 객체가 접근자를 포함하는 경우, 프로토타입에 새로운 속성을 추가하는 용도로는 적합하지 않을 수도 있다.

Object.assign()은 String 키와 Symbol 키 속성 모두 복사한다.