Javascript 객체의 순회(Object.keys, values, entries)

목차

1. 객체의 데이터 조작

2. Object.key(obj)

3. Object.values(obj)

4. Object.entries(obj)

5. Object.fromEntries(array)

---

1. 객체의 데이터 조작

 

 

배열에는 관련된 메서드가 많았고, 모두 반복하는 형태였다.

 

배열에는 인덱스가 있어서 이것이 수월했지만, 객체에는 키가 일정한 형식을 띄고있지 않아 어려워보인다.

 

객체의 키와 값을 가지고 변형을 주기가 어려우니, 이를 잠시 변형하여 조작할 수 있는 메서드가 있다.

 

• Object.keys( obj )
• Object.values( obj )
• Object.entries( obj )

 

위의 메서드는 모두 결과물(return)로 배열을 반환해준다.

 

배열로 반환받았으니, 배열 메서드를 적용하여 데이터를 조작할 수 있게된다.

 

이에대해 한번 가볍게 알아보자.

 

 

---

2. Object.keys(obj)

 

매개변수에 객체를 넣어 실행하면, 객체의 키만 담은 배열을 반환해준다. 

 

문법(Syntax)

Object.keys( 객체 )

반환 데이터 형태 : 배열(Array)

 

예시(Sample)

let user = {
    name:"char1ey",
    age:29,
}

console.log(Object.keys(user))
// [ 'name', 'age' ]

 

 

---

3. Object.values(obj)

 

매개변수에 객체를 넣어 실행하면, 객체의 값만 담은 배열을 반환해준다. 

 

문법(Syntax)

Object.values( 객체 )

반환 데이터 형태 : 배열(Array)

 

예시(Sample)

let user = {
    name:"char1ey",
    age:29,
}

console.log(Object.values(user))
// [ 'char1ey', 29 ]

 

 

---

4. Object.entries(obj)

 

매개변수에 객체를 넣어 실행하면, 객체의 [키, 값] 쌍을 담은 배열을 반환해준다. 

 

배열안에 배열이 들어있는 셈이다.

이 형태에 한해서 적용할 수 있는 좋은 메서드가 있으니, 잠시후에 보도록 하자.

 

문법(Syntax)

Object.entries( 객체 )

반환 데이터 형태 : 이중배열(Array)

 

예시(Sample)

let user = {
    name:"char1ey",
    age:29,
}

console.log(Object.entries(user))
// [ [ 'name', 'char1ey' ], [ 'age', 29 ] ]

 

 

---

5. Object.fromEntries(array)

 

위의 세 메서드는 객체를 배열로 반환해주는 형태였다.

 

하지만, 이 메서드는 Object.Entries(obj)에서 반환받은 형태의 이중배열을 다시 객체로 되돌릴 수 있다.

 

배열 메서드 map, reduce 등을 통해 형태를 이중배열로 만들어 준다면, 배열을 객체로 만들수 있다는 소리다.

 

문법(Syntax)

Object.fromEntries( 배열 )

반환 데이터 형태 : 객체(Object)

 

예시(Sample)

let user = {
    name:"char1ey",
    age:29,
}

const char1ey = Object.entries(user)

console.log(char1ey)
// [ [ 'name', 'char1ey' ], [ 'age', 29 ] ]

console.log(Object.fromEntries(char1ey))
// { name: 'char1ey', age: 29 }

 

이중 배열을 키와 값의 형태로 담아놓으면, 객체로 바꿀 수 있다는 점이 상당히 유용해 보인다.

 

객체를 조작해보고 싶다면 위의 메서드들을 이용해서

 

잠시 배열로 담은뒤에 적용후에 객체로 되돌리는 것을 항상 염두해 두자.

 

---

참고자료
https://ko.javascript.info/keys-values-entries