[JavaScript] for in / for of / forEach

coolriver·2023년 8월 9일

JavaScript 정리

JavaScript

목록 보기

10/10

for in / for of / forEach

JavaScript의 반복문인 for...in문, for...of문, forEach에 대해 정리해 보려고 한다. 각각 쓰이는 곳도 다르고 조금씩 기능도 달라서 쓸 때마다 많이 헷갈리는 것 같다.

for in문

for in문은 객체에 쓰이는 반복문으로, 객체의 모든 열거할 수 있는 프로퍼티(property)를 반복합니다. 루프마다 프로퍼티의 이름을 변수에 대입하여 순차적으로 접근합니다.

- for in문 예시

const icecream = {
	name: '메로나',
    color: 'yellow-green',
    price: 1000
};
for (let key in icecream) {
	console.log(`${key}: ${icecream[key]}`);
}
// 출력:
name: 메로나
color: yellow-green
price: 1000

for (let 변수 in 객체명) 형식을 통해 객체를 순회할 수 있다. 객체를 순회하면서 속성을(property) 키-값 쌍 형태로 열거한다.

for in문 예제

객체 속성 합산하기

// 주어진 객체의 숫자 속성들의 합을 계산하는 프로그램을 작성하세요. 
// for in 문을 사용하여 속성을 순회하고 숫자 속성의 값을 합산합니다.
const numbers = {
  a: 10,
  b: 20,
  c: 30,
  d: "not a number",
  e: 40
};

풀이

let sum = 0;
for(const key in numbers){
  if(typeof numbers[key] === "number") sum += numbers[key];
};
console.log(sum); // 출력: 100

주어진 객체 numbers를 for in문을 통해 순회하며 numbers[key] 값의 타입이 number인지 확인한다. 그리고 number인 경우 미리 선언한 sum에 합산하여 값을 뽑아 냈다.

for of문

for in문이 객체에 쓰였다면, for of문은 반복이 가능한 객체에 쓰입니다. 반복이 가능한 객체에는 array, map, set, string, arguments 객체 등을 포함합니다.

- for of문 예시

배열(array)

const arr = [1, 2, 3, 4, 5];
for (const el of arr){
	console.log(el);
}
// 출력:
1
2
3
4
5

우선 array에서의 사용 예시다. 배열 arr을 for of문을 통해 값을 하나씩 변수 el에 대입하여 순회한다. 값을 하나씩 돌면서 arr의 원소가 하나씩 console.log를 통해 출력된다.

문자열(string)
for (const str of '나는짱짱123') {
  console.log(str);
}
// 출력:
나
는
짱
짱
1
2
3
문자열 또한 반복이 가능한 객체이기 때문에 for of문을 통해 한 글자씩 순회가 가능하다.

- for of문 예제

배열 요소 합산하기

// 주어진 숫자 배열의 모든 요소의 합을 계산하는 프로그램을 작성하세요. 
//"for of" 문을 사용하여 배열의 각 요소를 순회하고 요소들의 값을 합산합니다.
const numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (const el of numbers){
	sum += parseInt(el);
}
console.log(sum);
// 출력: 150

배열 numbers를 for of문을 통해 원소 하나씩 el에 대입한다. numbers 안의 원소들은 현재 문자열의 형태이므로 parseInt를 통해 숫자로 변환 후 변수 sum에 합산하여 출력할 수 있다.

forEach 메서드

arr.forEach(콜백함수(현재 값(복사),현재 인덱스,해당 배열(원본)));

요소를 순회하며 특정 작업을 실행합니다. 특정 작업으로 실행할 콜백함수(callback function)와 인자로 전달시킬 배열(array)과 인덱스(index) 값을 전달합니다. 예외를 정해 두어 종료 지점을 정해야 하며, 값을 반환하지 않습니다.

*콜백함수의 인자로는 각각 하나일 땐 현재 값 / 두 개 일 때는 값과 인덱스 / 세 개일 때는 해당 배열까지를 뜻합니다.

- forEach 예시

const str = ['나', '는', '짱', '짱', '1', '2', '3'];
// 각 문자열이 들어있는 배열 str 생성

str.forEach(function(v){ // forEach로 배열 str 순회
  console.log(v); // 순회하며 실행할 함수 실행문
});
// 출력:
나
는
짱
짱
1
2
3

forEach 메서드를 실행하면 요소 하나하나를 순회하면서 forEach 안의 콜백함수를 실행한다. 그래서 콜백함수 안의 console.log(v) 이 부분이 요소 하나하나를 출력하는 결과가 나오게 된다.

- forEach 화살표 함수 예시

const str = ['나', '는', '짱', '짱', '1', '2', '3'];

str.forEach(str => {
  console.log(str);
});

화살표 함수를 이용하여 function(str) 부분을 str => 이렇게 간단하게 축약이 가능하다.

- forEach index 활용

const str = ['나', '는', '짱', '짱', '1', '2', '3'];

str.forEach((v, index) => { // 배열 str, index를 전달
  console.log(`${index}:${v}`); // 요소를 순회하며 각 요소의 index와 요소 값을 출력
});
// 출력:
0:나
1:는
2:짱
3:짱
4:1
5:2
6:3

forEach는 index 값도 받을 수 있기 때문에 그걸 이용하여 index 값을 출력하거나 index 값을 활용하는 함수를 쓸 수 있다.

- forEach 예제

배열 `color`에서 5글자 이상인 단어와 인덱스를 함께 출력하기

const color = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
color.forEach((v, index) => {
              if(v.length >= 5) {
  console.log(`${index} : ${v}`);
}});
// 출력:
1 : orange
2 : yellow
3 : green
5 : purple

우선 단어와 인덱스 모두를 출력해야 하기 때문에 인자로 value를 뜻하는 v와 index를 넣는다. 그리고 if문에 현재 순회하고 있는 요소의 글자가 5글자 이상인 경우 라는 조건식을 추가한다. 만약 조건식이 true일 경우 현재 index 값과 v 값을 같이 출력한다.
그렇게 해서 색상들 중 5글자 이상인 orange, yellow, green, purple만 출력이 된다.

정리

for in문 -> 객체 순회
for of문 -> 배열 순회
forEach -> 배열 순회(메서드)

이렇게 생각하면 편할 것 같다.

for in문은 아직 객체에 익숙하지 않아서 더 낯설게 느껴지는 느낌이고, for of문 또한 일반 for문만 활용하다 보니 거의 안 써 본 것 같다. 객체 순회에는 for in문을, 배열 순회에는 for of문 혹은 forEach 메서드를 많이 활용해 봐야겠다.

특히 forEach 같은 경우 메서드 체이닝이 가능하기 때문에 여러모로 유용하게 쓰일 것 같다!

coolriver

코생아