map(), forEach문

모찌모찌·2023년 12월 4일

자바스크립트 공부

목록 보기
20/27

자바스크립트 map() 함수와 forEach() 함수는 모두 배열의 요소를 순회하는 함수입니다. (콜백함수)
하지만, map() 함수는 각 요소를 주어진 함수로 매핑하여 새로운 배열을 반환하는 반면, forEach() 함수는 각 요소를 단순히 순회하는 함수입니다.

콜백 함수의 첫 번째 파라미터에는 배열의 요소가, 두 번째 파라미터에는 index가 전달

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});

• map()

: 배열의 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열로 리턴.

const numArr1 = [1, 3, 5, 7, 9];
const arr1Result = numArr1.map(x => x * 5);

console.log(arr1Result); //[5, 15, 25, 35, 45]

• map(Number)

const strNumArr = ["2", "4", "6", "8", "10"];
const numArr = strNumArr.map(Number);

console.log(numArr); //[2, 4, 6, 8, 10];

• forEach문

: 반환 값(return값)이 없으므로 각 요소를 처리하거나 어떤 작업을 수행하는 용도로 주로 활용

배열명.forEach(요소명 => {
	실행문(요소명)
});

콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 합니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));


1)선택적 매개변수

numbers.forEach((number, index) => {
    console.log(`Index: ${index}, Value: ${number}`);
});

numbers.forEach((number, index, array) => {
    console.log(array);
});
  • 인덱스(Index)
  • 배열
    배열 매개변수는 필요에 따라 다양하게 활용할 수 있는 선택적 매개변수로, 원본 배열 그 자체입니다. 단순히 호출하기만 하면 배열의 요소 수만큼 배열이 출력되는 것을 볼 수 있습니다.

😎

단순히 배열의 반복작업이 필요할때는 forEach문
반복작업을 통해서 새로운 배열이 필요할때는 map()사용.

profile
꼬꼬마 개발자 지망생

0개의 댓글