[TIL][JS] 객체 순회하기

객체 순회하기

배열은 반복문을 사용하여 모든 요소에 접근이 가능했다. 이는 배열은 인덱스가 있고 length라는 프로퍼티가 있기 때문이다. 그러나 객체는 인덱스가 없는 순서가 상관없는 자료구조로 프로퍼티 네임을 가지고 프로퍼티 밸루에 접근이 가능하다. 따라서 반복문을 사용한 순회는 불가능하다.

1. Object.keys(구하고자하는 객체 대입) 를 이용하여 객체 순회하기

Object.keys() 메소드는 어떤 객체가 가지고 있는 key(properties' name)들의 목록을 배열의 형식으로 리턴하는 메소드이다. 객체의 내장 메소드가 아닌 객체 생성자인 Object가 직접 가지고 있는 메소드이다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

//Object.keys 메소드는 어떤 객체가 갖고 있는 키들의 목록을 배열로 리턴하는 메소드이다.

Object.keys(obj); 
//properties' name 출력됨. [ 'name', 'weight', 'price', 'isFresh' ]

//이는 배열의 형태이므로 이를 이용하여 반복문 사용가능함.
const keys = Object.keys(obj);

for(let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  console.log(value);
}

//for문의 실행결과 -> obj가 갖고 있던 properties' value 가 출력됨
//'melon'
//4350
//16500
//true

Object.keys() 메소드 외에 Object.values(), Object.entries() 메소드가 있다.

Object.values() : 객체의 값으로 이루어진 배열을 리턴

Object.entries() : 객체의 키와 값이 쌍으로 한 요소로 이루어진 배열 리턴 ( [[key: value], [key1: value1], ...])

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

const keys = Object.keys(obj);
keys; 
// [ 'name', 'weight', 'price', 'isFresh' ]

const values = Object.values(obj);
values; 
// [ 'melon', 4350, 16500, true ]

const entries = Object.entries(obj);
entries; 
/*
[
  [ 'name', 'melon' ],
  [ 'weight', 4350 ],
  [ 'price', 16500 ],
  [ 'isFresh', true ]
]
*/

2. for-in 이용하여 객체 순회하기

for-in 은 for문과 같은 반복문으로 for문의 조건문을 생략한 축약 버젼이다. 배열과 객체 순회시 유용하게 사용가능하다.

//for-in syntax

const arr = [1, 2, 3, 4];

for (let i in arr) {
  console.log(i);
  console.log(arr[i]);
}

/* i를 출력한 결과
'0'
'1'
'2'
'3'
*/

/* arr[i]를 출력한 결과
1
2
3
4
*/

이를 객체 순회하는 것에 이용하면 for-in이 받는 인덱스는 객체 순회시 인덱스 역할을 하는 프로퍼티 네임으로 대체된다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

//값에 접근 가능한 key(properties' name)이 인덱스 역할을 한다.
for (let key in obj) {
  const value = obj[key];
  
  console.log(key);
  console.log(value);
}