배열을 반복하는 방법은 여러가지가 있지만 먼저 map 과 forEach 에 대해서 알아보겠습니다.
map 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다. 즉 원래 배열은 변경되지않고, 새로운 배열이 반환됩니다!
const numbers = [1, 2, 3, 4]
const doubled = numbers.map(num => num * 2);
console.log(doubled) // [2, 4, 6, 8]
배열의 각 요소에 대해 주어진 함수를 호출하지만, 반환 값은 없습니다. 즉 원래 배열을 변경하거나, side effect 를 발생 시키는데 사용됩니다.
const numbers = [1, 2, 3, 4]
numbers.forEach(num =>{
	console.log(num * 2) // 2 4 6 8 각각 출력
}
map 은 새로운 배열을 반환하는것에 반해, forEach는 반환값이 없습니다. 그래서 map
은 기존 배열을 참고해서 새로운 배열이 필요할 때 주로 사용이 되고, forEach 는 배열의 요소를 반복하며 특정 작업을 수행해야 할때 사용이 된답니다.
filter 메서드는 javascript 에서 배열의 각 요소를 테스트하여 조건을 만족하는 요소만으로 구성된 새로운 배열을 생성하는데 사용됩니다.
filter 메서드는 콜백함수를 인자로 받습니다. 이 콜백함수는 배열의 각 요소에 대해 호출되며, 해당 요소를 포함할지 여부를 결정하는 boolean값을 반환해야 합니다. 반환된 값이 true인 경우 해당 요소는 새로운 배열에 포함됩니다.
filter 메서드는 기존 배열을 변경하지 않고, 콜백함수의 조건을 만족하는 요소들로만 구성된 새로운 배열을 반환합니다.
const fruits = ['apple', 'orange', 'mango', 'cherry']
// 'a' 가 포함된 과일만 필터링
const filtedFruits = fruits.filter(fruit => fruit.include('a'));
console.log(filtedFruites) // ['apple', 'orange', 'mango']
이와같이 filter 메서드는 배열의 요소를 조건에 따라 삭제하여 새로운 배열을 만들 수 있습니다. 말 그대로 필터링 하는 것이죠!