본문 바로가기

■ 프로그래밍/JavaScript

Object (3) - 접근법

예전 글(2020/03/25 - Object (1) - 접근, 할당)에서 Object 접근 방법에 대해 쓴 적이 있다. 

해당 글에서는 객체의 키 이름으로 직접적인 접근을 했다. 

 

하지만 만약 어떠한 이유로 객체의 모든 key나 value에 한번씩 접근해야 한다면 어떻게 해야 할까?

객체 값 모두를 하나하나 찍어보기엔 시간이 너무 오래 걸린다. 

정말 다행히 객체는 배열처럼 반복할 수 있다. 

 

우선 객체의 key와 value에 어떻게 접근하는지 살펴보자. 

const obj = {
  name: 'kmj',
  age: 17,
  gender: 'female',
  likeMovies: true
}

console.log(Object.keys(obj)); // output: ["name", "age", "gender", "likeMovies"]
console.log(Object.values(obj)); // output: ["kmj", 17, "female", true]
console.log(Object.entries(obj)); 
//output: [ 
//  ["name", "kmj"], 
//  ["age", 17], 
//  ["gender", "female"], 
//  ["liekMovies", true] 
// ]

 

return 값은 모두 배열로 이루어져 있으며, keys는 객체의 key값을, values는 객체의 value값을, 그리고 entries는 key와 value값 모두 가져온다. 

 

객체 반복을 하기에 앞서, 먼저 간략하게 for...in문을 살펴보자. 

var example = ['a', 'b', 'c'];

for (let i in example) {
  console.log(i); // output: 0 1 2
}

여기서 i는 example의 index와 같다.

우리가 흔히 보는 for (var i =0; i <example.length; i++)와 같은 것이다. 

 

그럼 이제 for...in문을 활용한 객체 반복법을 알아보자. 

for (let key in obj) {
  console.log(key) // output: "name" "age" "gender" "likeMonives"
}

 

obj의 length만큼 돌면서 key값을 알려준다. 

 

객체의 value값을 순환하고 싶다면 아래와 같이 작성하면 된다. 

for (let key in obj) {
  const value = obj[key]
  console.log(value); // output: "kmj" 17 "female" true
}

 

'■ 프로그래밍 > JavaScript' 카테고리의 다른 글

같은 배열 요소 찾기 (forEach)  (0) 2020.05.18
배열에서 중복 제거하기(Set)  (0) 2020.05.11
재귀(Recursion)  (0) 2020.04.25
Temporal Dead Zone  (0) 2020.04.16
Object (2) - 중첩객체 접근  (0) 2020.03.26