map과 filter

map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다
[mdn 정의]

map 함수는 for문 이라고 보면 된다.

map()은 함수 이기 때문에 인자를 받는다. 그 인자 안에 함수를 넣어서 구현을 하면 되는데
아래에 있는 코드를 설명해 보자면 number 들이 모여서 numbers가 된 배열을 변수로 선언을 하고, 각각 넘버에다가 2를 곱해주고 싶다면 우선 numbers.map()선언하고 그 인자 안에다가 함수를 넣는다 numbers.map((number) => {return number * 2}) 함수 안에 내가 반복하고자 하는 것을 인자안에 넣고, 즉 numbers안에 있는 각각의 number를 인자에 넣고 실행할 함수인 number * 2 를 리턴해주면 된다!

const numbers = [1,2,3];
numbers.map((number) => {return number * 2})
// [2,4,6]

for문으로 변경을 하면

for(let i = 0; i < numbers.length; i++){
  return numbers[i] * 2
}

이러한 코드가 나온다.

다른 예제로 문자를 배열로 넣어서 해본다면

const names = ["마이클", "조던", "엘리스"];
names.map((name) => {return "반갑습니다 "+ name})
//["반갑습니다 마이클", "반갑습니다 조던", "반갑습니다 엘리스"]

map은 배열만 취급하기 때문에 index도 존재한다
즉,

const names = ["마이클", "조던", "엘리스"];
names.map((name, index) => {return `반갑습니다 ${index}번째에 있는 ${name}님`})[1]
// "반갑습니다 1번째에 있는 조던님"

이렇게 index가 존재하기 때문에 인덱스를 이용하여 기능을 사용할 수 있다.

filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
[mdn 정의]

filter 함수는 true 인 값만 가져온다라고 생각하면 된다.
map과 비슷하게 모든 요소를 반복하면서 콜백함수를 호출하는데 거기서 true인 값만 가져온다 라고 생각하면 된다.

예시 코드를 보면서 더 풀어보자면,

const a = [1,2,3,4,5]
a.filter((x) => {return x % 2 === 0})
// [2,4]

코드를 보면 a라는 배열 변수를 선언하고, 배열 안에 짝수만 찾길 원하면 filter함수를 적용하고 a안에서 짝수를 찾을 수 있게 함수를 선언하면 된다.
그러면 새로운 배열로 반환한다.