map과 filter의 기본

현업에서 map, filter가 정말 많이 쓰인데요!

함께 공부하는 동기가 해준 말이다.
그 동안 메서드에 대해 잘 몰랐고, 익숙해지지 않았다.
하필 내가 가장 어려워하는 메서드가 현업에서는 많이 쓰인다느 사실을 알게 됐을 땐,
솔직히 막막하기도 했다.

그렇다면 오늘은 해당 메서드의 개념만큼은 확실하게 끝내고 가야겠다.

map

Mdn에 map을 검색해보니 기본적인 사용법을 볼 수 있었다.

정의는 다음과 같다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 이때, 원본 배열은 변경되지 않습니다.

• <모던 자바스크립트>

아래는 map을 활용한 간단한 예시다.
각 요소를 들고와서 인자로 받은 함수를 차례로 실행시켜 새로운 배열을 반환하고 있다.

let num = [1, 4, 9];
let example1 = num.map(x => Math.sqrt(x))
console.log(num)
console.log(example1)

VM544:1 (3) [1, 4, 9]
VM544:2 (3) [1, 2, 3]

forEach와 모든 배열을 순회하면서 콜백 함수를 반복한다는 공통점이 있지만
map은 새로운 배열을 만들어 반화하는 차이가 있다.

map 메서드의 인자를 뜯어보면,
요소값,인덱스,this를 전달받는다.
예를 들어

[1,2,3].map((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스 ${index}, this: ${JSON.stringify(arr)}`)
});

이런식으로 인자를 전달할 수 있다.

활용

배열 뿐만 아니라, 객체에도 접근 가능하다.

let students = [
  {id:1, name:"james"},
  {id:2, name:"tim"},
  {id:3, name:"john"},
  {id:4, name:"brian"}
];
let names = students.map(student =>student.name);
console.log(names); 

객체에 접근하는 방법에 따라 다른 결과값을 접할 수 있다.

다차원 배열의 접근

map을 활용해 다차원 배열에 있는 모든 요소에 2를 더해보자!

let numbers = [[1,2,3],[4,5,6],[7,8,9]];

맵을 통해 각 배열을 뜯고, 해당 배열에 다시 한번 더 접근할 수 있게 됐다!

filter

다음은 filter다.

map과 비슷하게 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다

filter는 map과 비슷하게 모든 요소를 순회하지만
true인 것을 판별해 새로운 배열을 형성한다.

let num = [1,2,3,4,5];
let odds = num.filter(x => x % 2);

console.log(odds) // [1, 3, 5] (1)은 true로 평가된다. 0은 false

filter메서드가 생성한 새로운 배열의 길이는 언제나 filter를 호출한 배열의 길이값과 같거나 작다!
걸러지기 때문에,,!