자바스크립트 배열에서는 내장 메소드를 사용하여 복잡한 반복 작업을 편리하게 처리할 수 있습니다. 이번 포스팅에서는 대표적인 메소드인 forEach
, filter
, map
의 특징과 사용 방법에 대해 알아보도록 하겠습니다.
forEach
: 배열 요소를 하나씩 돌며 작업을 수행하며 리턴 값은 없음filter
: 조건에 맞는 요소만 필터링하여 새로운 배열로 리턴map
: 배열 요소를 하나씩 돌며 작업을 수행하고 새로운 배열로 리턴
forEach
forEach
는 각 배열 요소를 하나씩 돌며 작업을 수행할 때 사용합니다. 별도의 리턴 값은 없습니다. 다음과 같이 각 배열 요소를 console.log()
로 찍어볼 수 있습니다.
const fruits = ["banana", "apple", "orange"];
function showFruits(fruit){
console.log(fruit) // "banana", "apple", "orange"
}
fruits.forEach(showFruits)
이름에서 알 수 있는 것처럼 각 요소에 대해(for each) 작업을 수행하는 배열 메소드입니다.
filter
filter
는 배열 요소를 특정 조건에 맞게 필터링하고 새로운 배열을 리턴하는 메소드입니다. 아래의 코드는 banana
를 제외하고 다른 과일들을 담은 배열을 리턴하는 코드입니다.
const fruits = ["banana", "apple", "orange"];
function excludeFruit(fruit){
return fruit !== "banana" // ["apple", "orange"]
}
fruits.filter(excludeFruit);
이는 다음과 같이 화살표 함수로도 작성할 수 있습니다. 결과는 위와 동일합니다.
const fruits = ["banana", "apple", "orange"];
fruits.filter((fruit) => fruit !== "banana"); // ["apple", "orange"]
map
map
은 배열 요소에 특정 작업을 진행하고 해당 결괏값을 새로운 배열로 리턴하는 데 사용합니다. map
메소드는 각 요소를 함수의 연산과 매핑해줍니다.
const numbers = [1, 2, 3, 4];
const doubleNumbers = numbers.map(number => number * 2);
console.log(doubleNumbers); // [2, 4, 6, 8]
'개발 > JavaScript' 카테고리의 다른 글
[JavaScript] 비구조적 할당 사용 방법과 이유 (0) | 2023.01.13 |
---|---|
자바스크립트 배열 요소 랜덤 선택하기 (0) | 2023.01.05 |
자바스크립트 디데이 계산하기 (0) | 2023.01.04 |