[js 기초] Object.values(), Object.keys(), Object.entries() (다른 메소드와 조합해서 활용해보기)

객체를 가지고 놀아보자.

객체의 key나 value  등등을 배열로 어찌저찌 담는데 목적이 있다.

 

 

1. Object.keys()

 Object.keys는 객체의 key를 순서대로 배열에 담아서 반환해준다.

var object = {
  Red : 5,
  Orange : 4,
  Green : 3,
  Blue : 2,
  Yellow : 1 
};

var objectKeys = Object.keys(object);

console.log("🚀 ~ file: codeup.html:158 ~ objectKeys:", objectKeys);

** 출력내용 **

 

 

 

2. Object.values()

그렇다면 Object.values()는 value만 배열에 담아주겠지?

var object = {
  Red : 5,
  Orange : 4,
  Green : 3,
  Blue : 2,
  Yellow : 1 
};

var objectValues = Object.values(object);

console.log("🚀 ~ file: codeup.html:167 ~ objectValues:", objectValues);

** 출력내용 **

 

3. Object.entries()

Object.entries() 는 객체의 key와 value 쌍을 배열안에 담아 반환해준다.   >> [key, value] <<  요런 형태로 말이다.

var object = {
  Red : 5,
  Orange : 4,
  Green : 3,
  Blue : 2,
  Yellow : 1 
};

var objectEntries = Object.entries(object);

console.log("🚀 ~ file: codeup.html:171 ~ objectFromEntries:", objectEntries);

 

** 출력내용 **

배열안에 '키, 밸류'로 이루어진 밸류가 각각 들어가있는 모습이다.

 

 

 

 

4. Object.fromEntries()

Object.entries() 의 반대 개념도 있다. Object.fromEntries() 는 키, 값으로 이루어진 쌍을 객체로 만들어주는 역할을 한다.

아까 위에서 Object.entries() 로 배열만들어놨으니까, 다시 Object.fromEntries()를 사용해서 객체로 되돌려보도록 하자. 

 

var object = {
  Red : 5,
  Orange : 4,
  Green : 3,
  Blue : 2,
  Yellow : 1 
};

var objectEntries = Object.entries(object);
var objectFromEntries = Object.fromEntries(objectEntries);

console.log("🚀 ~ file: codeup.html:171 ~ objectFromEntries:", objectFromEntries);

 

** 출력화면 **

 

짜잔~

 

 

내맘대로 활용해보기

아래의 객체에서 value 값이 3초과인 key 값만 찾아서 출력해보자.

var object = {

    Red : 5,

    Orange : 4,

    Green : 3,

    Blue : 2,

    Yellow : 1

};

const solution =_=> {
  var filter = Object.entries(object).filter((crr) => crr[1] > 3);
  console.log("🚀 ~ file: codeup.html:167 ~ solution ~ map:", filter);

  var obj = Object.fromEntries(filter);
  var result = Object.keys(obj);

  console.log("🚀 ~ file: codeup.html:165 ~ solution ~ result:", result);
}

solution();

코드가 드럽긴 하지만, 오늘 배운것을 몽땅 다 써보고 싶었다.

 

 

 

Red 와 Orange가 출력되었다. 

 

 

 

끗-