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

Park Bumsoo·2022년 4월 9일
0

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

  • Object.keys() – 객체의 키만 담은 배열을 반환한다.
  • Object.values() – 객체의 값만 담은 배열을 반환한다.
  • Object.entries() – [키, 값] 쌍을 담은 배열을 반환한다.
  • Object.assign() – 객체를 병합하여 배열로 반환한다.

Objsct. 메서드의 기본은 객체를 배열로 반환 한다는 것이다.
기능은 위의 설명한 대로이며 예시를 봐보자

Object.keys()

let product = {
  name: "P.name",
  detail: "P.detail",
  price: 3000,
};

Object.keys(product) // [ 'name', 'detail', 'price' ]

위와 같은 객체가 있다고 할때 Object.keys(product)를 사용해 보았다.
반환값으로는 [ 'name', 'detail', 'price' ]이 출력되었으며,
객체의 키 값들이 배열에 담긴거를 확인 할 수 있다.

Object.values()

let product = {
  name: "P.name",
  detail: "P.detail",
  price: 3000,
};

Object.values(product) // [ 'P.name', 'P.detail', 3000 ]

Object.values()의 경우엔 반환된 배열을 보면 객체의 값들이 배열에 담겨 반환된것을
볼 수 있다.

Object.entries()

let product = {
  name: "P.name",
  detail: "P.detail",
  price: 3000,
};


Object.entries(product) //[
  [ 'name', 'P.name' ],
  [ 'detail', 'P.detail' ],
  [ 'price', 3000 ]
]

Object.entries()의 경우에는
키와 값이 모두 반환되었지만 연관된 값들은 전부 한 배열로 묶여져 나온것을 볼 수 있다.

Object.assign()

let product = {
  name: "P.name",
  detail: "P.detail",
  price: 3000,
};

let company = {
  conpany: "apple" 
}

let newProduct = Object.assign(product, company)
console.log(newProduct)

Object.assign()의 경우엔 새로운 객체를 만들어 준다
위 예시에선 newProduct라는 새로운 객체를 만들어 주었다.

{
  name: 'P.name',
  detail: 'P.detail',
  price: 3000,
  conpany: 'apple'
}

반환값은 위처럼 두개의 객체가 합쳐진 상태가 된다.

profile
프론트엔드 주니어 개발자(React, Next.js)

0개의 댓글