Map, reduce 및 filter는 모두 JavaScript의 배열 메서드입니다. 각각은 배열을 반복하고 변환 또는 계산을 수행합니다. 각각은 함수의 결과에 따라 새 배열을 반환합니다.
이 기사에서는 map, filter, reduce를 사용하는 이유와 방법에 대해 알아봅니다.

지도

map() 메서드는 기존 배열에서 새 배열을 만드는 데 사용되며 첫 번째 배열의 각 요소에 함수를 적용합니다.

통사론:

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

따라서 원래 arr.map 함수는 콜백 함수를 인수로 사용하며 해당 콜백 함수에는 세 개의 인수가 전달될 수 있습니다.
ㅏ. 현재 가치
비. 현재 값의 인덱스 [선택 사항]
씨. 배열 [선택 사항]

Map()의 구현

콜백 함수는 배열 arr의 모든 값에 대해 반복하고 배열을 수정하고 새 배열에 값을 저장합니다.
지도 기능을 사용하면 새 배열을 초기화할 필요가 없습니다.

배열이 있고 모든 값이 이전 값의 두 배인 다른 배열을 원한다고 가정해 보겠습니다.

const arr=[1,2,3,4,5];

function double(x)
{
  return x*2;  
}
const output=arr.map(double);
console.log(arr);

화살표 함수를 사용하여 동일한 코드 작성

const output=arr.map((x)=>{
  return x*2;  
});
console.log(arr);

필터

filter() 메서드는 배열의 각 요소를 가져와 이에 대한 조건문을 적용합니다. 이 조건이 true를 반환하면 요소가 출력 배열로 푸시됩니다. 조건이 false를 반환하면 요소가 출력 배열로 푸시되지 않습니다.
따라서 원래 Array.filter 함수는 콜백 함수를 인수로 사용하며 해당 콜백 함수에는 세 개의 인수가 전달될 수 있습니다.
ㅏ. 현재 가치
비. 현재 값의 인덱스 [선택 사항]
씨. 배열 [선택 사항]

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

배열에서 홀수를 필터링하고 싶다고 가정해 보겠습니다.

const arr=[1,2,3,4,5]

function isOdd(x)
{
   return x%2; 
}
const output=arr.filter(isOdd);

console.log(output);

우리가 취할 수 있는 또 다른 예는 배열에서 4보다 큰 숫자를 찾는 것입니다.

const arr=[1,2,3,4,5]
const output=arr.filter((x)=>{ 
return x>4
});
console.log(output);

줄이다

콜백 인수는 배열의 모든 항목에 대해 한 번 호출되는 함수입니다. 이 함수는 네 개의 인수를 사용하지만 종종 처음 두 개만 사용됩니다.

accumulator - 이전 반복의 반환된 값
currentValue - 배열의 현재 항목
index - 현재 항목의 인덱스 [선택 사항]
array - reduce가 호출된 원래 배열 [선택 사항]

initialValue 인수는 선택 사항입니다. 제공된 경우 콜백 함수에 대한 첫 번째 호출에서 초기 누산기 값으로 사용됩니다.

통사론

arr.reduce(callback[, initialValue])

모든 배열 요소의 합계를 찾는 예를 들어 보겠습니다.

const arr=[1,2,3,4,5];

const output=arr.reduce(function(accumulator,currentIdx){
    acc+=curr;
    return acc;
});
console.log(output);

이러한 배열 방법에 대한 몇 가지 중요한 질문을 시도하여 개념을 명확히 합시다.

Q1. 객체 사용자의 배열이 주어지면 fullname을 출력합니다.

const users=[
  {firstName:"john",lastName:"Biden",age:26},
  {firstName:"jimmy",lastName:"cob",age:75},
  {firstName:"sam",lastName:"lewis",age:50},
  {firstName:"Ronald",lastName:"Mathew",age:26},  
];
//List of fullname
const output=users.map((x)=>{
    return x.firstName+" "+x.lastName;
})
console.log(output);

Q2. 사용자 개체 배열이 주어지면 특정 연령의 사용자와 빈도를 인쇄합니다.

const users=[
  {firstName:"john",lastName:"Biden",age:26},
  {firstName:"jimmy",lastName:"cob",age:75},
  {firstName:"sam",lastName:"lewis",age:50},
  {firstName:"Ronald",lastName:"Mathew",age:26},  
];

앞으로 진행하기 전에 🤔 여기서 사용할 수 있는 배열 방법을 생각해보세요!
Analogy->목록을 모든 연령을 나타내는 하나의 개체로 줄이고 각 값의 개수로 다른 값을 찾고 싶기 때문에 여기서 'reduce'를 사용할 수 있습니다.

const users=[
  {firstName:"john",lastName:"Biden",age:26},
  {firstName:"jimmy",lastName:"cob",age:75},
  {firstName:"sam",lastName:"lewis",age:50},
  {firstName:"Ronald",lastName:"Mathew",age:26},  
];
//using reduce array method
const output=users.reduce(function(acc,curr){
    if(acc[curr.age])
    //if present in array object
    {
        acc[curr.age]++;            
    }else{
    //if not present in array object
      acc[curr.age]=1;      
    }
    return acc;
},{})
console.log(output);

Q3.마크가 60보다 크고 rollNumber가 15보다 큰 개체를 인쇄합니다.

let student =[
 {name:"Smith",rollNumber:31,marks:80},
 {name:"Jenny",rollNumber:15,marks:69},
 {name:"John",rollNumber:16,marks:35},
 {name:"Tiger",rollNumber:7,marks:55}
];
const details= student.filter((x)=>x.marks>60 && x.rollNumber>15);
console.log(details); 

Q4.전체 학생의 총점을 출력하시오.

let student =[
 {name:"Smith",rollNumber:31,marks:80},
 {name:"Jenny",rollNumber:15,marks:69},
 {name:"John",rollNumber:16,marks:35},
 {name:"Tiger",rollNumber:7,marks:55}
];
const details = student.reduce((acc,curr)=>{
    return acc+=curr.marks;
},0);
console.log(details);

배열 메서드를 연결하는 것은 map(), filter(), reduce()의 전문 분야 중 하나입니다.

Q5.연령이 30세 이상인 배열의 모든 firstName 목록

const users=[
  {firstName:"john",lastName:"Biden",age:26},
  {firstName:"jimmy",lastName:"Cob",age:75},
  {firstName:"Sam",lastName:"Lewis",age:50},
  {firstName:"Ronald",lastName:"Mathew",age:26},  
];
//Chaining
const output=users.filter((x)=>x.age<30).map((x)=>x.firstName);
console.log(output);

Q6.60점 이상 받은 학생의 이름을 쓰시오.

let student =[
 {name:"Smith",rollNumber:31,marks:80},
 {name:"Jenny",rollNumber:15,marks:69},
 {name:"John",rollNumber:16,marks:35},
 {name:"Tiger",rollNumber:7,marks:55}
];
const ans=student.filter((x)=> {
return x.marks>60}).map((x)=>{return x.name});
console.log(ans);

Q7.60점 미만 학생에게 20점을 더한 후 60점 이상인 학생의 총점을 기입하십시오.

let student =[
 {name:"Smith",rollNumber:31,marks:80},
 {name:"Jenny",rollNumber:15,marks:69},
 {name:"John",rollNumber:16,marks:35},
 {name:"Tiger",rollNumber:7,marks:55}
];

const totalMarks=student.map((stu)=>{
    if(stu.marks<60){
        stu.marks+=20;
    }
    return stu;
}).filter((stu)=>stu.marks>60).reduce((acc,curr)=>acc+curr.marks,0);
console.log(totalMarks);

이 블로그가 여러분에게 도움이 되었으면 합니다. 인터뷰에 답하고 더 깊은 이해를 얻기 위해 몇 가지 중요한 질문을 다루는 적절한 예와 함께 각 어레이 방법을 설명하기 위해 최선을 다했습니다.
댓글란에 질문을 남겨주시면 최선을 다해 답변해드리겠습니다.
도움이 되셨다면 ❤️ 좋아요를 누르고 더 많은 블로그를 보려면 저를 팔로우하세요.