반응형
1. ForEach 함수
forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하며, 반환값은 없습니다.
이 메서드는 배열의 각 요소에 대해 특정 작업을 수행하고자 할 때 사용됩니다.
즉, forEach는 배열을 순회하는 것 외에는 아무런 결과를 반환하지 않는다는 것입니다.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));
// 1
// 2
// 3
// 4
// 5
2. Map 함수
map 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 모아 새로운 배열로 반환합니다.
이 메서드는 원본 배열을 변경하지 않습니다. 대신 새로운 배열을 반환하기 때문에, 변환된 값을 바탕으로 새로운 배열을 생성할 때 주로 사용됩니다. 그렇기 때문에 가상DOM을 활용하는 React 환경에서 가장 많이 사용되는 함수 중 하나 입니다.
리액트로 개발을 한다면, 필수로 알아둬야 하는 함수입니다.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
3. Filter 함수
filter 메서드는 배열의 각 요소를 테스트하는 함수를 받아, 그 조건에 부합하는 요소만을 모아 새로운 배열로 반환합니다.
map과 마찬가지로 원본 배열은 변경되지 않습니다. 필터링 조건에 맞는 요소만을 추출할 때 사용됩니다.
역시 원본 배열을 변경하지 않고, 새로운 배열을 리턴하기 때문에 리액트에서 많이 사용되는 함수입니다.
특히 배열 데이터 수정이나, 검색조건을 개발할때 무조건 사용하게 될껍니다.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
반응형
'Javscript' 카테고리의 다른 글
javascript로 개발할때 자주 사용하는 유효성 체크 5가지 (0) | 2025.02.23 |
---|---|
Obejct 를 다루는 함수들 (0) | 2023.09.13 |
문자열을 다루는 slice, split, substring (0) | 2023.09.09 |