[JavaScript] 객체(Object) 순회하기

자바스크립트에서 객체를 순회하는 방법에 대해서 알아보겠습니다.

 

배열

자바스크립트에서는 흔히 사용하는 배열도 객체 타입입니다. 배열은 다음과 같은 방법으로 손쉽게 순회할 수 있습니다.

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

// 선언형 프로그래밍
for (let a; a < list.length; a++) {
  // 순회 로직
}

for (let a of list) {
  // a는 리스트 내 값입니다.
}

// 함수형 프로그래밍
list.forEach((li) => {
  // 순회 로직
})

 

배열을 순회하는 방법은 쉽습니다. for 문을 활용해 순회, 혹은 배열의 내장 메서드인 forEach 함수를 활용합니다. 프론트엔드 개발을 하다보면 종종 팀의 컨벤션이나 프로젝트에 작성된 코딩 스타일이 함수형 프로그래밍인 경우가 있습니다. 이럴땐 forEach 메서드를 활용해 팀에 컨벤션에 맞춰서 작업할 수 있습니다.

 

key, value 형식의 Object

흔히 이야기 하는 객체(Object)를 순회하는 방법을 알아봅시다. 객체는 key, value로 이루어져 있습니다. List는 프로퍼티인 length를 활용해 손쉽게 순회할 수 있었지만 객체는 어떻게 순회할 수 있을까요? 바로 for - in 문과 Object 클래스의 keys, entries, values 메서드를 활용하는 방법 입니다.

const obj = {
  a: 'a',
  b: 'b',
  c: 'c'
}

// for - in 문을 활용한다면 객체의 key를 반환 받을 수 있습니다.
for (let key in obj) {
  console.log(obj[key]);
}

// Object 클래스의 keys 메서드를 활용하면 해당 객체의 key를 리스트로 반환 받을 수 있습니다.
Object.keys(obj).forEach((key) => {
  console.log(obj[key]);
});

// Object 클래스의 entries 메서드를 활용하면 key, value가 담겨있는 Dictionary를 리턴받을 수 있습니다.
Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

// Object 클래스의 values 메서드를 활용하면 객체 프로퍼티의 값들이 담긴 배열을 리턴받을 수 있습니다.
Object.values(obj).forEach((value) => {
  console.log(value);
});

 

이 부분도 팀의 컨벤션에 맞춰서 여러가지 방법을 사용할 수 있습니다. 선언적으로 프로그래밍을 한다면 for 문을 활용, 만약 함수형 프로그래밍이 컨벤션이라면 Object 클래스의 메서드를 활용할 수 있습니다.

 

위 방법은 실무에서도 자주 마주치는 상황입니다. key-value 의 객체를 순회해야할 순간들이 꽤나 많습니다. 이런 경우 Object 클래스를 활용해 수월하게 코딩해보는 것도 좋을 것 같습니다.