JavaScript : 객체 메서드 정리(Object method)

✅ Object.keys() 

객체가 가지고있는 키(Key)를 모아서 배열로 리턴한다.

const member = {
 name:'chul',
 age:19,
 number:24,
 school:'Sunhwa HighSchool'
    }

    const memberObj= Object.Keys(member);

    console.log(memberObj);
    // [ 'name', 'age', 'number', 'school' ]

 

✅ Object.values()

객체가 가지고있는 값(Value)들을 모아서 배열로 리턴한다

const member = {
	name:'chul',
    age:19,
    number:24,
    school:'Sunhwa HighSchool'
    }
    
    const memberObj= Object.values(member);

    console.log(memberObj);
    // [ 'chul', 19, 24, 'Sunhwa HighSchool' ]

 

✅ Object.entries()

객체가 가지고있는 키(Key)와 값(Value)이 한 쌍으로 이루어진 배열을 리턴한다.

각 배열에서 index[0]은 키(Key) index[1]은 값(value)을 의미한다.

const member = {
  name: 'chul',
  age: 19,
  number: 24,
  school: 'Sunhwa HighSchool'
}

const memArr = Object.entries(member)
console.log(Object.entries(member));
    /*
[
[ 'name', 'chul' ],
[ 'age', 19 ],
[ 'number', 24 ],
[ 'school', 'Sunhwa HighSchool' ]
]
*/

console.log(memArr[1]); // [ 'age', 19 ]
console.log(memArr[0][1]);  // chul
console.log(memArr[3]);  // [ 'school', 'Sunhwa HighSchool' ]

** 배열을 불러오고 싶다면 변수로 메서드를 담아주고 변수[index] 를 해주면된다 **

---

✅ 객체를 순회하는 방법

객체의 요소는 index(순서)가 없기때문에 객체의 값은 키를 통해서만 접근이 가능하다. 하지만 순회는 가능하다.

 

✅ for-in 을 이용한 순회방법

ES6부터 객체와 배열을 위해 추가된 반복문 이다.

for-in은 객체순환과 배열순환 모두 가능하다.

const member = {
  name: 'chul',
  age: 19,
  number: 24,
  school: 'Sunhwa HighSchool'
}

for(let key in member){
const value = member[key]

console.log(key)
console.log(value)
// name
// chul
// age
// 19
// number
// 24
// school
// Sunhwa HighSchool
}

 

✅ Object.keys() 를 통한 객체 순회방법

Object.keys() 가 리턴하는 값은 배열이기 때문에 length가 존재한다. 

그렇기 때문에 반복문을 사용할 수 있는 것이다.

const member = {
  name: 'chul',
  age: 19,
  number: 24,
  school: 'Sunhwa HighSchool'
}

const memArr = Object.keys(member) // [ 'name', 'age', 'number', 'school' ]

for(let i = 0; i < memArr.length; i++){
  const key = memArr[i] // 각각의 키(Key)
  const value = member[key] // 각각의 키(Key)에 해당하는 각각의 값(Value)
  console.log(value); 
    /*
          chul
          19
          24
          Sunhwa HighSchool
   */
}

🆘 ES6 에서 객체의 값(Value)을 배열로 반환하는 Object.values()와 키와 값을 동시에 배열로 반환하는 Object.entries() 가 추가되었다. 즉. 굳이 keys()를 이용해서 for문을 돌릴 수고를 할 필요가 없다는 이야기다.