반응형

 

 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]

 

반응형

+ Recent posts