[Javascript] 반복문-3탄 (map, forEach, reduce)

이번 글에서는 Array를 반복문으로 다룰때 사용하는 세가지 함수에 대해서 다룰 예정이다

1탄과 2탄은 다음 글들에 있다.

forEach와 map, reduce에는 아주 큰 차이점이 있는데

바로 return값의 존재여부이다.

 

forEach로 사용할 경우 return값이 존재하지 않으며 단순 시행만을 목적으로 두고 있습니다.

그러나 map과 reduce의 경우 데이터를 재포장하는 함수라고 생각하시면 될것 같습니다.

 

[Javascript] 반복문-1탄 (For, For..in)

[Javascript] 반복문-2탄 (For..of, while, do while)

// a에 1, 2, 3으로 이루어진 배열 선언
const a = [1, 2, 3];

const b = a.forEach((value, idx) => {
	console.log(value);
    console.log(idx);
}}

// 결과
// 첫번째 시행
// 1
// 0
// 두번째 시행
// 2
// 1
// 세번째 시행
// 3
// 2

// c는 1,2,3으로 이루어진 배열이 됨.
const c = a.map((value, idx) => {
	console.log(value);
    console.log(idx);
    return value
});

// 콘솔
// 첫번째 시행
// 1
// 0
// 두번째 시행
// 2
// 1
// 세번째 시행
// 3
// 2

// d는 1,2,3으로 이루어진 배열이 됨.
const d = a.reduce((prev, acc) => {
	return [...prev, acc]
}, [])

// e는 3으로 이루어진 배열이 됨.
const e = a.reduce((prev, acc) => {
	return [acc]
}, [])

 

이렇게가 될것이고 React에서는 주로 Rendering할때 Map을 사용하게 된다.

const a = [1,2,3]

export default function Home() {
	return (
    	<div>
        	{a.map((val, idx) => (
            	<div key={`${val}_${idx}`}>
                	{val}
                </div>
            )}
        </div>
    )
}

시행은 직접 해보시길 추천드립니다.

 

오늘은 간단하게 Javascript에서 사용하는 map, forEach, reduce에 대해 간단히 알아봤구요.

오늘도 긴글 봐주셔서 감사합니다.