map, filter, reduce는 배열 객체에 쓰이는 메소드입니다. 알아두면 매우 유용한 메소드이니 함께 알아봅시다.

1.map

map은 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열로 반환합니다.

const twice = ["사나", "모모", "나연"];

const twiceHi = twice.map((v, i, a) => {
	return `안녕하세요 ${a}의 ${i + 1}번째 멤버 ${v}입니다!`
})

console.log(twiceHi)
//'안녕하세요 사나,모모,나연의 1번째 멤버 사나입니다!',
//'안녕하세요 사나,모모,나연의 2번째 멤버 모모입니다!',
//'안녕하세요 사나,모모,나연의 3번째 멤버 나연입니다!'

여기서 매개변수의 역할도 알 수 있습니다.

1. 첫번째 매개변수는 배열의 현재요소
2. 두번째 매개변수는 배열의 현재요소의 인덱스
3. 세번째 매개변수는 원본 배열의 요소를 보여줍니다.

2.filter

filter는 배열 각 요소에 대하여 주어진 함수의 테스트결과를 모아 새로운 배열로 반환합니다.

const twice = ["사나(일)", "모모(일)", "나연(한)"];

const twiceJapen = twice.filter((v, i, a) => {
  	if(v.includes('일')){
    	return `안녕하세요 ${a}의 일본인 멤버 ${v}입니다!`
    }
})

console.log(twiceJapen)
//[ '사나(일)', '모모(일)' ]

여기서 매개변수의 역할도 알 수 있습니다.

1. 첫번째 매개변수는 배열의 현재요소
2. 두번째 매개변수는 배열의 현재요소의 인덱스
3. 세번째 매개변수는 원본 배열의 요소를 보여줍니다.

😄하지만 map처럼 제가 새로운 문구로 변화하려고 해도 안됩니다. filter는 배열은 '변화'시킬 순 없습니다.

3.reduce

reduce는 배열의 각 요소에 대하여 함수를 실행하고 계산된 하나의 누적된 결과를 반환합니다.

const twice = ["사나 ", "모모 ", "나연"];

const twiceReduce = twice.reduce((acc, cur, i) => {
      console.log(acc, cur, i)
      return acc + cur
},'안녕하세요! ')

console.log(twiceReduce + "입니다!")
//안녕하세요! 사나  0
//안녕하세요! 사나 모모 1
//안녕하세요! 사나 모모 나연 2
//안녕하세요! 사나 모모 나연입니다!

여기서 매개변수의 역할도 알 수 있습니다.

1. 첫번째 매개변수는 배열의 누적된 배열의 요소
2. 두번째 매개변수는 배열의 현재요소
3. 세번째 매개변수는 현재요소의 인덱스를 보여줍니다.

하지만reduce는 조금 복잡합니다.

첫번째 루프일때 console을 보시면 안녕하세요! 사나 0이 나옵니다.
사나 0 은 현재요소와 인덱스라는것을 알 수 있지만
첫번째 매개변수인 acc는 안녕하세요!를 보여주고있습니다.

reduce는 배열의 요소를 누적한 값을 반환하기때문에 첫번째 배열요소와 두번째 배열요소를 더한다고 생각하지만 정확히는 누적된 배열 요소(첫번째 매개변수)'와 '현재값(두번째 매개변수)'을 더하는 것입니다.

그러므로 첫번째 루프일때는 누적된 요소가 아무것도 없기때문에 reduce의 두번째 매개변수로 초기값('안녕하세요! ')을 넣어주는겁니다. 물론 두번째 매개변수에 아무것도 안 넣어줘도 이상없이 작동합니다.

reduce의 대표적인 2번째 예시입니다.

const arr = [1, 2, 3];

const arrSum = arr.reduce((acc, cur, i) => {
      console.log(acc, cur, i)
    	return acc + cur
},10)

console.log(arrSum)
//10 1 0
//11 2 1
//13 3 2
//16

acc = 누적된 값,
cur = 현재 값,
i = 인덱스

• 1번째 루프

  acc = (초기값으로 10을 넣었기때문에) 10; cur =1, i = 0

• 2번째 루프

  acc = 11; cur =2, i = 1

• 3번째 루프

  acc = 13; cur =3, i = 2

이렇게 보니 이해가 쉽습니다.

map, filter, reduce는 데이터를 보다 효율적으로 다룰 수 있기때문에 반드시 익혀두시는게 좋습니다.🤠