객체 내 key 또는 value로 배열 만들기

const fruit = {
  fruit1: "apple",
  fruit2: "banana",
  fruit3: "kiwi",
  fruit4: "grape"
}

위와 같은 일반적인 객체나 유사배열 객체는 배열에서만 사용할 수 있는 forEach, map 등의 함수를 사용할 수 없다.

(유사배열객체는 []로 둘러싸여있지만 배열은 아니므로 배열의 함수를 이용할 수 없다. Array.isArray(obj)로 확인할 수 있다.)

 

이를 해결할 여러가지 방법들이 있지만 ES8에서 등장한 문법은 이를 아주 간단하게 해결해준다.

Object.keys

객체의 key들만 모아 배열을 반환한다.

console.log(Object.keys(fruit));
// result: [ 'fruit1', 'fruit2', 'fruit3', 'fruit4' ]

Object.values

객체의 value들만 모아 배열을 반환한다.

console.log(Object.values(fruit));
// result: [ 'apple', 'banana', 'kiwi', 'grape' ]

Object.entries

객체의 key와 value를 한 쌍의 배열로 만들어 그것들을 담은 배열을 반환한다.

console.log(Object.entries(fruit));
// result
//[
//  [ 'fruit1', 'apple' ],
//  [ 'fruit2', 'banana' ],
//  [ 'fruit3', 'kiwi' ],
//  [ 'fruit4', 'grape' ]
//]

배열함수 사용해보기

const fruit = {
  fruit1: "apple",
  fruit2: "banana",
  fruit3: "kiwi",
  fruit4: "grape",
};

const hateGrape = Object.values(fruit).filter((fruit) => fruit !== "grape");
console.log(hateGrape);

// result: [ 'apple', 'banana', 'kiwi' ]