JavaScript `forEach` 메서드로 객체의 key와 value 순회하기

JavaScript에서 배열을 순회하는 가장 직관적인 방법 중 하나는 forEach 메서드를 사용하는 것입니다. 그러나 forEach는 기본적으로 배열에서 사용되므로 객체의 key와 value를 순회하려면 약간의 추가 작업이 필요합니다. 이 글에서는 JavaScript의 forEach 메서드를 사용하여 객체의 key와 value를 순회하는 방법을 자세히 설명하고, 이를 효과적으로 사용하는 방법에 대해 다루겠습니다.

1. JavaScript forEach 메서드 개요

forEach 메서드는 배열의 각 요소에 대해 한 번씩 주어진 함수를 호출하는 메서드입니다. 배열의 요소를 순회하면서 각 요소에 대해 특정 작업을 수행할 때 유용합니다.

기본 문법

array.forEach(function(currentValue, index, array) {
  // 실행할 코드
});

• currentValue: 현재 처리 중인 배열 요소.
• index (선택적): 현재 처리 중인 요소의 인덱스.
• array (선택적): forEach가 호출된 배열.

예제

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

이 예제는 배열 fruits의 각 요소를 출력합니다.

2. 객체의 key와 value 순회하기

JavaScript 객체는 키-값 쌍으로 구성되며, 배열과는 다르게 forEach 메서드를 직접 사용할 수 없습니다. 하지만, 객체의 키와 값을 배열로 변환하여 forEach 메서드를 사용할 수 있습니다.

Object.keys()와 Object.values() 사용

Object.keys()

Object.keys() 메서드는 객체의 키를 배열로 반환합니다. 이를 통해 객체의 키를 순회할 수 있습니다.

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.keys(user).forEach(function(key) {
  console.log(key); // 키 출력
});

Object.values()

Object.values() 메서드는 객체의 값을 배열로 반환합니다. 이를 통해 객체의 값을 순회할 수 있습니다.

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.values(user).forEach(function(value) {
  console.log(value); // 값 출력
});

Object.entries() 사용

Object.entries() 메서드는 객체의 키-값 쌍을 배열로 반환합니다. 이를 사용하면 키와 값을 동시에 순회할 수 있습니다.

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.entries(user).forEach(function([key, value]) {
  console.log(`${key}: ${value}`); // 키와 값 출력
});

3. 객체의 키와 값을 순회하는 다양한 예제

예제 1: 객체의 키와 값을 출력하기

const car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2020
};

Object.entries(car).forEach(function([key, value]) {
  console.log(`${key}: ${value}`);
});

// 출력:
// brand: Toyota
// model: Camry
// year: 2020

예제 2: 객체의 값 수정하기

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.keys(user).forEach(function(key) {
  if (typeof user[key] === 'number') {
    user[key] *= 2; // 숫자 값을 두 배로 증가
  }
});

console.log(user);

// 출력:
// { name: 'John', age: 60, city: 'New York' }

예제 3: 객체의 키를 조건에 따라 삭제하기

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Object.keys(user).forEach(function(key) {
  if (key === 'city') {
    delete user[key]; // 특정 키 삭제
  }
});

console.log(user);

// 출력:
// { name: 'John', age: 30 }

4. forEach와 다른 반복문 비교

4.1 for...in 루프

for...in 루프는 객체의 열거 가능한 속성을 순회하는 데 사용됩니다. forEach와 달리, for...in은 객체에 직접 사용할 수 있습니다.

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`${key}: ${user[key]}`);
  }
}

// 출력:
// name: John
// age: 30
// city: New York

4.2 for...of 루프와 Object.entries()

for...of 루프는 배열과 같은 반복 가능한 객체를 순회하는 데 사용됩니다. Object.entries()와 함께 사용하면 객체의 키와 값을 순회할 수 있습니다.

const user = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

// 출력:
// name: John
// age: 30
// city: New York

맺음말

JavaScript에서 forEach 메서드는 배열을 순회하는 데 매우 유용하지만, 객체를 순회할 때는 Object.keys(), Object.values(), Object.entries()와 함께 사용하여 키와 값을 배열로 변환해야 합니다. 이를 통해 객체의 각 키와 값을 간편하게 순회하고 다양한 작업을 수행할 수 있습니다. 이 글에서 소개한 예제들을 통해 forEach 메서드를 효과적으로 활용하여 객체를 순회하는 방법을 이해하고, 실제 코드에 적용해보세요.