배열 고차 함수 이해

Array Higher-Order 함수가 작동하는 방식을 이해하면 JavaScript에서 복잡한 루핑 작업을 매우 원활하게 수행할 수 있습니다.

이 기사에서 논의할 고차 함수는 forEach() , map() , filter() 및 reduce() 입니다.

이 기사의 끝에서 각 기능이 나타내는 것과 문제 해결에 적용하는 방법을 이해하게 됩니다.

Array.forEach()

배열에서 .forEach() 메서드를 실행하면 해당 배열에 있는 각 요소에 대한 콜백 함수가 실행됩니다.

콜백 함수는 수행할 작업을 지정하는 블록입니다.

아래 스니펫에서 .forEach() 메서드는 friend 배열의 모든 friends 요소를 반복하고 각 문자열을 ${friend} 템플릿 리터럴을 사용하여 동적으로 콘솔에 기록합니다.

    const friends = ['Chief', 'Somto', 'Elma', 'Zee'];
    friends.forEach(friend => {
      console.log (`I love working with ${friend}`);
    });

    // I love working with Chief
    // I love working with Somto
    // I love working with Elma
    // I love working with Zee

배열.맵()

.map() 메서드는 새 배열을 생성한다는 점을 제외하면 .forEach() 메서드와 유사합니다.


.map() 메서드를 사용하면 기존 배열의 각 요소를 조작하여 새 배열을 만들 수 있습니다. 위의 그림에서 원래 배열은 [2,3,4] 를 포함하고 매핑을 통해 새 배열은 원래 배열의 제곱을 포함합니다. [4,9,16] .

const ingredients = ['Jam', 'oat', 'lemon', 'lettuce', 'oil', 'fish'];

const newMeal = ingredients.map(ingredient => {
  return ingredient[0];
});

console.log(newMeal); // ['J', 'o', 'l', 'l', 'o', 'f']
console.log(newMeal.join(' ')); //Jollof

위 스니펫에는 각 재료의 첫 번째 문자를 반환하여 ingredients 배열을 생성하도록 매핑된 newMeal 배열이 있습니다. .join(' ')를 newMeal 배열에 연결하면 배열 문자열이 하나의 단일 문자열이 됩니다.

배열.필터()

.filter() 메서드는 새 배열을 반환하기 때문에 .map() 메서드와 유사한 특성을 공유합니다. 그러나 이름에서 알 수 있듯이 제공된 조건에 따라 배열의 요소를 필터링합니다.

필터링 문자열

const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'string'; 
});

console.log(newStack); //['desk', 'chair', 'sofa']

숫자 필터링

const stack = ['desk', 17, 'chair', 5, 'sofa'];
const newStack = stack.filter(item => {
    return typeof(item) === 'number'; 
});
console.log(newStack); //[17, 5]

배열.감소()

.reduce() 메서드는 배열을 반복하고 단일 값을 반환합니다. 이 값은 숫자, 문자열, 배열 등 모든 데이터 구조가 될 수 있습니다.
reduce 메서드에 전달된 콜백 함수는 accumulator 및 currentValue를 매개 변수로 받아들이고 단일 값을 반환합니다.

아래 코드 스니펫에서 reduce 메소드를 사용하여 socialMedia 속성 값을 얻기 위해 name 배열의 객체를 반복할 수 있습니다.

참고: 개체 배열에서 reduce 메서드를 사용할 때 두 번째 매개 변수(스니펫의 빈 배열과 같은)를 추가해야 합니다.

const socialMedia = [
  {name: 'Instagram', url:'jessontel.com'},
  {name: 'twitter', url:'abc.com'}
];

const mediaName = socialMedia.reduce((accumulator,currentValue) => {
  accumulator.push(currentValue.name);
  return accumulator
}, []);

console.log(mediaName); //[ 'Instagram', 'twitter' ]

또 다른 빠른reduce 예

const expenseList = [1000, 50, 250, 999];
const expenseSum = expenseList.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
, 0}
);
console.log(expenseSum); // 2,299

위의 축소 메서드 예제에서 expenseList 배열은 expenseSum 값 2,999로 축소됩니다.

배열의 첫 번째 요소는 기본 누산기 값이고 두 번째 요소는 현재 값입니다.

결론

Iterator는 JavaScript뿐만 아니라 일반적인 프로그래밍에서도 매우 유용한 메서드입니다. 각각은 특정 문제를 해결하고 어레이 조작을 쉽게 만듭니다.

읽어 주셔서 감사합니다! 👋🏽

이 기사가 유용하다고 생각되면 다른 사람들이 혜택을 볼 수 있도록 알려주고 공유하십시오.
나와 연결하려면 에서 나를 팔로우하세요.