(30) Modern JavaScript - 배열 메소드 : Object 내장 메소드

다음과 같은 객체가 있을 때 객체의 값만 콘솔에 전부 출력하기 위해서는

각 객체의 프로퍼티 이름을 가지고 출력할 수 있을 것이다.

const data = {
  name: "섭이",
  email: "SeopE@naver.com",
  address:"서울시 강서구"
}

console.log(data['name']);
console.log(data['email']);
console.log(data['address']);

또한 객체에 프로퍼티가 더 늘어날 수 있기 때문에

위 코드를 forEach() 메소드를 활용해서 더욱 간략하게 작성할 수 있다.

const data = {
  name: "섭이",
  email: "SeopE@naver.com",
  address:"서울시 강서구"
}

const keys = ['name', 'email', 'address']

keys.forEach((key)=> {
  console.log(data[key]);
  
})

하지만 data 객체를 수정할 때마다 key 배열도 같이 수정해줘야 하는 불편한 점이 있는데

keys 배열에 있는 값은 언제나 data 객체의 형태에 따라 결정되는 값이므로

data 객체에서 모든 프로퍼티 이름을 추출해서 배열로 만들면 된다.

그래서 이럴 때 사용하는 것이 Object 내장 메소드들이 있는데

간단하게 세 가지만 알아보자

 

Object.keys()

Object.keys는 객체의 모든 키를 문자열 배열로 리턴하는 메소드이다.

위 코드를 다음과 같이 바꿔 쓸 수 있다.

const data = {
  name: "섭이",
  email: "SeopE@naver.com",
  address:"서울시 강서구"
}

const keys = Object.keys(data); // ['name', 'email', 'address']

keys.forEach((key) => {
  console.log(data[key]);
});

좀 더 축약해서 다음과 같이 쓸 수 있다.

const data = {
  name: "섭이",
  email: "SeopE@naver.com",
  address:"서울시 강서구"
}

// const keys = Object.keys(data); // ['name', 'email', 'address']
// keys.forEach((key) => {
//   console.log(data[key]);
// });

Object.keys(data).forEach((key)=>{
  console.log(key);
})

---

Object.value()

Object.keys는 객체의 모든 값을 배열로 리턴하는 메소드이다.

const data = {
  name: "섭이",
  email: "SeopE@naver.com",
  address:"서울시 강서구"
}

Object.values(data).forEach((value)=>{
  console.log(value);
  
})

 

---

Object.entries()

Object.enteries는 객체의 키와 값을 한꺼번에 배열로 리턴하는 메소드이다.

const data = {
  name: "섭이",
  email: "SeopE@naver.com",
  address:"서울시 강서구",
}

Object.entries(data).forEach(([key, value]) => {
    console.log(key,value);
  });

저 key 파라미터는 말그대로 객체의 키 값을 출력하며 예를들면

{a:1,b:true} 라고 했을 때 [['a;,1],['b',true]]와 같이 리턴된다.

출력 결과는 다음과 같다.