[JS]반복문 for/for in,forEach,map,filter,reduce-자바스크립트 /javascript

💡목표

• 자바스크립트에는 반복문을 사용하기 위한 방법이 여러가지가 있다.
• 사용방법을 예시 코드를 보며 이해해보자.
• 각 특징을 이해하고, 어느 상황에 사용하는지에 대해서 알아보자.

 

🎈일반 for loop

일반적인 반복문 방법으로 단순하고 속도가 가장 빠르다.

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

🎈for in

object의 key의 이름을 알 수 있으며, object같이 index로 되어 있지 않아 일반 반복문을 사용할 수 없을때 key의 이름을 이용하여 사용한다.

let obj = {
	name: "이름",
	age: 10,
	address: "서울"
};
for (let key in obj) {
	console.log(`key: ${key}, value:${obj[key]}`);
}

🎈forEach

배열의 API이며, 일반 for loop와 다르게 중간에 멈출 수가 없다. 반환값은 undefined 이다.

const arr = [1, 2, 3];
arr.forEach((value, index, array) => {
	console.log(`index : ${index}, value: ${value}`);
});

🎈filter

배열의 내용을 필터링 해서 새로운 배열을 만들때 사용된다. return한 값이 true이면 해당 element를 유지하고, false이면 element를 버린다.

const arr = [1, 2, 3];
const newArr = arr.filter((value, index, array) => {
	if (value != 2) return true;
	else return false;
});
console.log(newArr);

🎈reduce

reduce는 줄이다라는 뜻으로 배열을 최종적으로 단일 값으로 만들어 주는 함수이다. 최종적으로 하나의 정수, 문자열, 배열 또는 객체로 만들 수 있다. reduce의 return하는 값으로 최종적으로 하나의 값으로 만들어 주는데, 다른 함수들과 달리 reduce에는 loop마다 콜백함수에는 acc라는 누적값을 반환해준다.

초기값을 설정하지 않으면 배열의 첫번째 원소이며, loop가 두번째 원소부터 시작된다.

 

const arr = [1, 2, 3];

// 하나의 정수를 만들때
const newValue = arr.reduce((acc, cur, index, array) => {
	return acc + cur;
}, 0);	//초기값을 0으로 설정, 설정하지 않으면 배열의 첫번째 원소이다.
console.log(newValue);

//하나의 새로운 배열을 만들때
const newArr = arr.reduce((acc, cur, index, array) => {
	acc.push(cur * 10);		//기존 배열에 10을 곱한 새로운 값을 넣어준다.
	return acc;				//누적해서 만들어지는 acc를 반환해준다.
}, []);	//초기값을 빈 배열로 한다. "[]"
console.log(newArr);

🎈map

기본적인 loop는 forEach와 같으며, 각 loop에서 return한 값으로 새로운 배열을 만들어 반환해준다.

const arr = [1, 2, 3];
const newArr = arr.map((value, index, array) => {
	return value * 10;
});
console.log(newArr);

map을 사용하는 좋은 예제는 아래 Promise.all 과 같이 배열 연산의 동기화 하는 방법에 사용하는 경우가 있다.

[Javascript] 배열 연산 동기화(Promise All)