숫자로 읽을 수 있는 문자열이 담긴 배열이 있습니다.
문자열을 숫자로 변환해 배열에 담을 수 있게 solution 함수를 완성해주세요.
HINT : Number('1')
function solution(element, index, array) { return Number(element); } const arr = ["1", "2", "3"]; const result = arr.map(solution); console.log(result); // [1, 2, 3]
3대장이라고 불릴 만큼 많이 쓴다고 하는 map이다.
일단 전반적인 정보는 이 블로그에서 얻었다.
그리고 여기 엄청 좋다 고급 정보(?)들이 보기 쉽게 정리되어있어서
나같은 뉴비 개발자들은 보면 좋을거다! 인파_님 블로그, filter와 map의 차이
filter와 map은 구조가 동일하다, 단지 콜백명령어의 차이가 있을 뿐이다.
filter 콜백의 역할은 값이 true라면 그 값을 새롭게 만들어진 배열에 할당한다. 인데
map의 콜백은 명령의 값을 고스란히 배열에 넣어버리는 차이가 존재한다.
말로만 하면 모르겠다! 눈으로 보자!
완벽하게 동일한 코드에 메소드만 바꿔본 것이다.
필터의 경우에는 홀수를 출력해주고 있고
맵의 경우에는 계산 결과를 출력해주는 것을 볼 수 있다.
그렇다면 만약에 나누는 것이 아니라 곱한다면 어떤 답이 나올까?
map()은 해당하는 수의 *2를 해준 모습을 볼 수 있다.
하지만 filter()는 수를 그대로 출력해줬는데, 그 이유는 true일 경우에 콜백을 하는데, 0이 아닌 모든 수는 true로 분류하기에 그 값을 고스란히 돌려받은 것이다.
그리고 개인적으로 생각하는 제일 큰 차이는 바로 이것이다.
undefined는 그것 자체로도 값을 가지고 있다, 하지만 true가 아니다.
그래서 filter()의 경우에는 아무것도 표시가 되지 않는다.
그와 다르게 map()은 undefined가 표시가 되는데, 표시가 되는 것이 중요한게 아니라
새로 배열을 생성했음에도 불구하고 numbers의 인덱스 갯수와 동일한 공간을 차지하고 있는 것을 확인할 수 있다.
즉 배열을 새로 생성을 하더라도, 배열의 갯수가 작아질 경우에는 map()의 사용을 자제하는 것이 좋을 것이라고 생각한다.
map()은 지금까지 써본 적도 없이 없다보니 뭔가 다른 블로그에서 글을 봐도 이해가 되지 않는 것 같아서 여기까지만 적어보려고 한다.
나중에 많이 사용한다면 그때 추가해보겠다.
