.map() 및 .filter() 검토

소개

저는 현재 코딩 부트캠프 4주 차에 있습니다. 우리는 React를 배우기 시작했고 이번 주 이전에 Javascript에 대해 배웠던 모든 것을 잊어버린 것 같은 느낌이 들었습니다. 다시 살펴보고 싶은 두 가지 개념은 .map()과 .filter()입니다. 이러한 기능이 어떻게 사용되는지 자세히 설명하고 이것이 저와 같은 새로운 개발자에게 도움이 되거나 필요한 사람들에게 복습 역할을 해주기를 바랍니다!

.map()이란 무엇입니까?

map()은 원래 배열의 모든 요소에 대해 함수를 호출하여 완전히 새로운 배열을 만드는 데 사용되는 메서드입니다. map()은 원래 배열과 길이가 같은 새 배열을 반환합니다. 원래 배열은 변경되지 않습니다.

.map() 함수를 사용하는 방법

const even = [2, 4, 6];
const odd = even.map(num => num + 1);

// the const odd will return [3, 5, 7]
// the const even will return [2, 4, 6]

첫 번째 줄에 "even"이라는 배열을 선언하고 있습니다. map()은 새 배열을 생성하므로 새 배열을 포함할 "odd"라는 새 const를 할당합니다.

map() 내부에서 무슨 일이 일어나고 있습니까? num => num + 1은 "짝수"배열의 각 숫자를 살펴보고 1을 더하는 데 사용되는 콜백 함수입니다.

복습으로 함수를 다음과 같이 다시 작성할 수 있습니다.

const even = [2, 4, 6];

function num(n){return n + 1}
const odd = even.map(num);

// the const odd will return [3, 5, 7]
// the const even will return [2, 4, 6]

forEach 대신 맵을 사용해야 하는 경우

.map()은 반환된 새 배열과 원래 배열이 변경되지 않은 상태로 유지되어야 할 때 유용합니다. forEach는 각 요소에 콜백 함수를 적용하여 원래 배열의 값을 수정하기 때문에 아무 것도 반환하지 않습니다.

.filter()는 무엇입니까?

filter()는 함수에 전달된 조건에 따라 요소가 포함된 새 배열을 반환하는 메서드입니다. map()은 배열의 각 요소를 반환하지만 filter()는 일부만 반환합니다.

.filter() 함수를 사용하는 방법

const numbers = [1, 2, 3, 4, 5, 6];
const odd = numbers.filter(num => num % 2 === 1);

// the const numbers will return [1, 2, 3, 4, 5, 6]
// the const odd will return [1, 3, 5]

위의 예에서 새 배열 "odd"는 숫자를 2로 나눌 때 나머지가 1인 조건과 일치하는 요소만 반환합니다.

.map()과 .filter() 비교

//.filter() example
const numbers = [1, 2, 3, 4, 5, 6];
const odd = numbers.filter(num => num % 2 === 1);

// the const numbers will return [1, 2, 3, 4, 5, 6]
// the const odd will return [1, 3, 5]

//.map() example
const numbers = [1, 2, 3, 4, 5, 6];
const odd = numbers.map(num => num % 2 === 1);

// the const numbers will return [1, 2, 3, 4, 5, 6]
// the const odd will return [true, false, true, false, true, false]

출처

Header Image
JavaScript Tutorial