프론트엔드✏️/코드캠프

Object.keys(), values, entries, assign

당근먹는하니 2022. 6. 5. 13:38
728x90
반응형

  Objct.keys() 

 Object.keys() 메소드는 객체 안의 key를 배열에 묶어서 반환한다. 

 

// 사용법
const lovely = {
	dog : 'greenbean',
    cat : 'yellow', 
    me : false
};

Object.keys(lovely); // ["dog", "cat", "me"]

 

// 순서
const myobj = {
	17 : 'greenbean',
    2 : 'yellow',
    7 : false
};

Object.keys(myobj); // ["2", "7", "17"]

 

 

  Object.values()

 Object.values() 메소드는 객체 안의 value를 배열에 묶어서 반환한다. 

// 사용법
const lovely = {
	dog : 'greenbean',
    cat : 'yellow', 'white',
    me : false
};

Object.values(lovely); // ["greenbean", "yellow", false ]

 

// 순서
const myobj = {
	17 : 'greenbean',
    2 : 'yellow',
    7 : false
};

Object.keys(myobj); // ["yellow", false, "greenbean"]

 

  Object.entries()

 Object.entries() 메소드는 for...in와 같은 순서로 객체 안의 [key, value]쌍의 배열을 반환한다.

 

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// "a: somestring"
// "b: 42"


console.log(Object.entries(object1)); 

// Array [Array ["a", "somestring"], Array ["b", 42]]

 

 

  Object.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 }

출처 객체에서 속성 값을 가져올 땐 [[Get]], 목표 객체에 속성 값을 지정할 땐 [[Set]]을 사용한다. (각각 접근자와 설정자를 호출함) 

즉 이 메소드는 속성을 단순히 복사하거나 새로 정의하는 것이 아니라 할당하는 것이다. 

 

 

출처 : MDN

728x90
반응형