Object.keys(), values(), entries(), assign()

mangjell·2022년 4월 10일
0

Object.keys()

  • 사용법: Object.keys(obj)

  • 매개변수: obj: 열거할 수 있는 이름들을 반환 받을 객체

  • 반환 값: 전달된 객체의 열거할 수 있는 모든 속성 이름들을 나타내는 문자열 배열

  • 예시)

// 단순 배열
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// 배열형 객체
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// 키와 순서가 무작위인 배열형 객체
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo 는 열거할 수 없는 속성입니다.
const myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

Object.values()

  • 사용법: Object.values(obj)

  • 매개변수: obj: 배열로 변환할 열거 가능한 속성을 가지는 객체

  • 반환 값: 전달된 객체의 속성 값들을 포함하는 배열

  • 예시)

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// 유사 배열 (숫자를 속성으로 사용하는 객체)
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// 유사 배열의 경의 속성으로 사용한 숫자의 크기 순으로 정렬되어 반환됩니다.
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// getFoo는 열거 가능한 속성이 아니라서 배열에 포함되지 않습니다.
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']

// 객체가 아닌 경우에는 객체로 강제로 변환되어 적용됩니다.
console.log(Object.values('foo')); // ['f', 'o', 'o']

Object.entries()

  • 사용법: Object.keys(obj)

  • 매개변수: obj: 객체 자체의 열거 가능한 문자열 키를 가진 속성 [key, value] 쌍이 반환되는 객체.

  • 반환 값: 지정된 객체 자체의 열거 가능한 문자속성 [key, value] 쌍의 배열입니다.

  • 예시)

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo is property which isn't enumerable
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// non-object argument will be coerced to an object
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// returns an empty array for any primitive type, since primitives have no own properties
console.log(Object.entries(100)); // [ ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object.assign()

  • 사용법: Object.keys(target, ...sources)

  • 매개변수: target: 목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체입니다.

  • 매개변수: sources: 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들입니다.

  • 반환 값: 목표 객체

  • 예시)

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
profile
프론트엔드 개발자

0개의 댓글