객체(Object)에서 forEach()로 데이터를 꺼내보자

객체(Object)에서 forEach()로 데이터를 꺼내보자

 

 

지난 포스팅에서는 배열(Array)에서 forEach() 배열 메서드를 이용해서 데이터를 꺼내는 과정이 있었더랬습니다.

 

selectbox를 JS로 컨트롤 해보기 2 - 서버 Data 받아서 처리하기

selectbox를 JS로 컨트롤 해보기 2 - 서버 Data 받아서 처리하기

 

이번 포스팅에서는 찰떡궁합 예제로서, 객체(Object)에서 forEach()를 통해 데이터를 추출하여 활용하는 방법에 대해서 살펴보고 정리해두기로 합니다.

 

 

 

forEach()란 무엇?

 

프로그래밍 언어를 배우면서 '반복문'이라는 것을 접하게 될 때, 보통은 for 구문과 while 구문을 통해 반복문을 익히게 됩니다. 이 둘은 어떤 함수에 속해 있는 기능이 아니라 해당 프로그래밍 언어가 가지고 있는 순수한 명령어들이죠.

 

반면에 forEach()는 배열 객체 Array가 가지고 있는 내장함수, 즉 메서드라는 점이 다릅니다.

쉽게 보면 함수처럼 사용하는 반복문인 것입니다.

 

배열(Array)이라는 것이 어차피 '순서(order index)'가 존재하는 데이터 컬렉션이기 때문에, for 반복문을 사용할 때도 배열 전체를 순환하면서 값을 가져오는 것이 '기계적'이고 '정형적'인 형태가 됩니다. 그래서 좀 더 간편하게 사용할 수 있도록 forEach()라는 메서드를 만들어 둔 것 뿐입니다.

 

 

 

forEach() 메서드 사용방법

 

먼저 forEach 메서드를 이용해서 배열을 순회하는 방법을 간단히 살펴보겠습니다. 아래 예제 코드에서는 forEach 메서드를 이용해서 배열의 각 요소를 순회하면서 각 요소에 1을 더한 값을 새로운 배열에 담는 예제입니다.

const array = [1, 2, 3, 4, 5];
const newArray = [];

array.forEach(function(elm) {  // elm은 아무렇게나 작명 가능
  newArray.push(elm + 1);
});

console.log(newArray); // [2, 3, 4, 5, 6]

newArray를 콘솔에 찍어보면, 2~6까지 담고 있는 새로운 배열이 찍힙니다.

 

.push() 메서드는 배열에 뒤로 요소를 추가해주는 메서드라고 했었죠?

 

forEach 메서드를 호출할 때, 콜백 함수를 인자로 전달합니다. 왜 이렇게 쓰냐구요? 자바스크립트 만든 사람이 그렇게 쓰라고 정했습니다.

 

그리고 콜백 함수는 단어가 어색해서 그렇지, 함수 이름없이 그냥 호출되면 실행되는 함수를 의미합니다. 배열의 각 요소를 순회하면서 호출되며, 각 요소를 인자로 전달받습니다. 이 콜백 함수 {중괄호} 안에는 처리할 로직을 작성하면 끝!

 

 

 

배열 객체 메서드인 forEach()로 객체(Object)도 순회를 한다?

 

배열 객체와 오브젝트 객체는 서로 특성이 다른 객체인데, 배열 객체 메서드인 forEach()가 순회를 할 수 있는 것일까요?

있습니다. 단, 객체는 배열과 달리 순서가 없으므로 forEach 메서드를 직접 호출할 수는 없습니다. 

 

따라서 먼저 Object.keys 메서드를 이용해서 객체의 키 값을 배열로 추출한 후, 이 배열에 대해 forEach 메서드를 호출하여 객체의 각 속성을 순회할 수 있습니다. 아래 코드는 이러한 방법을 이용하여 객체의 각 속성을 출력하는 예제입니다.

const person = {
  name: 'Kincoding',
  age: 100,
  city: 'Seoul'
};

Object.keys(person).forEach(function(key) {
  console.log(key + ': ' + person[key]);
});

// 출력 결과:
// name: Kincoding
// age: 100
// city: Seoul

기가 막힌 방법이군요!

위 예제에서는 먼저 Object.keys 메서드를 이용해서 person 객체의 키 값을 배열로 추출합니다. 이렇게 추출된 배열에 대해 forEach 메서드를 호출하면서, 각 키에 대한 값을 person[key] 형태로 접근하여 출력합니다. 기가 막힌 방법입니다. 참으로 스마트하게 명령어들을 사용하고 있습니다.

 

 

 

forEach()를 이용하여, 객체 업데이트 하기

 

한편, 객체를 forEach 메서드를 이용하여 순회할 때, 각 속성의 값을 활용하여 새로운 값을 계산할 수도 있습니다. 예를 들어, person 객체에 저장된 나이 값을 10살씩 증가시키는 방법은 다음과 같습니다.

const person = {
  name: 'Kincoding',
  age: 30,
  city: 'Seoul'
};

Object.keys(person).forEach(function(key) {
  if (key === 'age') {
    person[key] += 10;
  }
});

console.log(person); // { name: 'Kincoding', age: 40, city: 'Seoul' }

오브젝트 객체 매서드인 keys()와 배열객체 forEach()의 훌륭한 캐미!

 

 forEach 메서드를 이용하여 person 객체의 각 속성을 순회하다가, 속성의 키 값이 'age'인 경우, 해당 속성의 값을 10 증가시키는 예제입니다.

참말로, 오브젝트 객체 매서드인 keys()와 배열객체 forEach()의 훌륭한 캐미가 아닐 수 없습니다. 이런 묘~한 조합의 사용방법을 목격하고 배우게 되면서 감탄을 금하지 않을 수 없습니다. 전 이런 게 너무나 신기합니다.

 

forEach()에는 break가 없다!

한편, forEach 메서드에서는 break 문을 사용할 수 없기 때문에 반복문을 종료하기 위해서는 return 문을 사용해야 합니다. 만약 특정 조건을 만족할 경우 forEach 메서드를 빠져나오려면, 콜백 함수 내에서 return 문을 사용하여 forEach 메서드를 빠져나올 수 있습니다.

 

예를 들어, person 객체에서 나이가 50 이상인 경우에만 각 속성을 출력하는 예제는 다음과 같습니다.

const person = {
  name: 'Kincoding',
  age: 50,
  city: 'Seoul'
};

Object.keys(person).forEach(function(key) {
  if (person.age < 50) {
    return;
  }
  console.log(key + ': ' + person[key]);
});

// 출력 결과:
// name: Kincoding
// age: 50
// city: Seoul

forEach()는 break 구문을 사용할 수 없으니, 조건식을 주고 해당하는 경우를 만나면 return에 의해서 탈출

 

forEach()는 break 구문을 사용할 수 없으니, 조건식을 주고 해당하는 경우를 만나면 return에 의해서 탈출하게 됩니다.

 

위 예제에서는 forEach 메서드를 이용하여 person 객체의 각 속성을 순회하지만, 나이가 50 미만인 경우에는 각 속성을 출력하지 않도록 return 문을 사용합니다.(※ return으로 인해 마치 break처럼 아래 쪽 출력 라인이 실행되지 않는 것에 주목해주세요.)

 

 

 

마치며

 

배열 객체 메서드인 forEach 메서드를 이용하여 오브젝트 객체의 데이터를 꺼내고 활용하는 방법에 대해 알아보았습니다.

forEach는 배열에서만 동작하는 배열 전용 메서드인 줄 알았었는데, 오늘 또 이렇게 한 수 배우고 정리를 해봅니다.

 

일반적으로 서버와는 JSON과 같은 규약으로 통신을 한 후 객체로 변환하게 되는데요, 객체의 각 속성을 순회하면서 데이터를 꺼내고 수정하는 작업은 자바스크립트에서 매우 일반적으로 사용되고 빈번한 작업입니다.

 

이와 같은 작업을 능숙하고 손쉽게 활용하기 위해서는 forEach 메서드를 이용하는 방법을 잘 이해해두면 좋을 것입니다.

 

오늘도 즐거운 코딩하세요~!

 

즐거운 코딩생활, 즐코딩

KINcoding

 

 

 

https://app.kincoding.com/zombie/ 

ZOMBTI 이상형 좀비 찾기