[JavaScript/Array] 배열(Array)에서 forEach, filter, map 특징과 사용법

forEach, filter, map

1. forEach

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행
[return value는 없음]

배열의 각 요소에 대해 실행.

중간에 break 문을 사용할 수 없음.

종료를 위해선 throw(예외)를 발생시켜야 함.

구문

arr.forEach(callback(element[, index[, array]])[, thisArg])

element : 처리할 현재 요소.

index : 처리할 현재 요소의 인덱스 (= 현재 element의 index값).

array : forEach를 호출한 배열.

thisArg : callback을 실행할때 this로 사용되는 값.

예제

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

const result1 = array.forEach((element)=>{
    console.log(`result1 결과 : ${element}`);
})

const result2 = array.forEach((element, index, array)=>{
    console.log(`result2 결과 : element = ${element}, index = ${index}, array = ${array}`);
})



// ------------------------ 결과 ------------------------
// result1 결과 : 1
// result1 결과 : 2
// result1 결과 : 3
// result1 결과 : 4
// result1 결과 : 5
// result2 결과 : element = 1, index = 0, array = 1,2,3,4,5
// result2 결과 : element = 2, index = 1, array = 1,2,3,4,5
// result2 결과 : element = 3, index = 2, array = 1,2,3,4,5
// result2 결과 : element = 4, index = 3, array = 1,2,3,4,5
// result2 결과 : element = 5, index = 4, array = 1,2,3,4,5

---

2. filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
[return value는 새 배열]

테스트를 통과한(조건을 만족한) 요소들로 새로운 배열을 반환.

통과하지 못하면 빈 배열을 반환.

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

element : 처리할 현재 요소.

index : 처리할 현재 요소의 인덱스 (= 현재 element의 index값).

array : filter()를 호출한 배열.

thisArg : callback을 실행할때 this로 사용되는 값.

예제

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

const result1 = array.filter((element)=>{
    return element > 3;
})
console.log(`result1 결과 : ${result1}`);

const result2 = array.filter((element, index, array)=>{
    console.log(`result2 결과 : element = ${element}, index = ${index}, array = ${array}`);
    //예시를 위해 console.log 사용함
})

// ------------------------ 결과 ------------------------
// result1 결과 : 4,5
// result2 결과 : element = 1, index = 0, array = 1,2,3,4,5
// result2 결과 : element = 2, index = 1, array = 1,2,3,4,5
// result2 결과 : element = 3, index = 2, array = 1,2,3,4,5
// result2 결과 : element = 4, index = 3, array = 1,2,3,4,5
// result2 결과 : element = 5, index = 4, array = 1,2,3,4,5

---

3. map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
[return value는 새 배열]

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열 반환.

값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스는 호출되지 않음.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

element : 처리할 현재 요소.

index : 처리할 현재 요소의 인덱스 (= 현재 element의 index값).

array : map()을 호출한 배열.

thisArg : callback을 실행할때 this로 사용되는 값.

예제

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

const result1 = array.map((element)=>{
    console.log(`result1 결과 : ${element * 2}`);
})

const result2 = array.map((element, index, array)=>{
    console.log(`result2 결과 : element = ${element * 2} ,index = ${index}, array = ${array}`);
})

// ------------------------ 결과 ------------------------
// result1 결과 : 2
// result1 결과 : 4
// result1 결과 : 6
// result1 결과 : 8
// result1 결과 : 10
// result2 결과 : element = 2 ,index = 0, array = 1,2,3,4,5
// result2 결과 : element = 4 ,index = 1, array = 1,2,3,4,5
// result2 결과 : element = 6 ,index = 2, array = 1,2,3,4,5
// result2 결과 : element = 8 ,index = 3, array = 1,2,3,4,5
// result2 결과 : element = 10 ,index = 4, array = 1,2,3,4,5