map 작동원리

        a = [10, 11, 12, 13, 14, 15];
        let answer=a.map(function (v, i) {
            return v*v;
        }, [1, 2]);
        console.log(answer);

먼저 map 코드는 이렇게 작성해봤다.

map은 요소들을 하나하나 탐색하면서 그 요소들을 이용해서

새로운 배열을 생성하는 것이다.

 

 

        function map(predicate, thisArg){
          let list=[];
          for(let i=0; i<a.length; i++;){
                list.push(predicate(a[i], i));
            }
            return list;
        }

정확하게 이렇다는건 아니지만,

이런식으로 map이 작동하는 원리를 작성해 놓은 코드이다.

 

빈 배열을 만들고,

for문이 돌면서 원본 배열을 하나하나 탐색을 한다.

그러면서 똑같이 predicate 콜백함수를 받아서 원본배열의 값과 인덱스를 넘겨준다.

그 생성된 새로운 배열을 리턴해주는 것.

이게 map의 원리이다.

(실제 map의 내부는 아니고 뇌피셜로 이해하면 좋다.)

 

 

이런 원리로, 출력값은

v*v를 하니까 10*10, 11*11...

이런식의 값들이 새로운 배열로 출력이 된다.

 

 

이런 출력값을 볼 수 있다.

 

 

        a = [10, 11, 12, 13, 14, 15];
        let answer=a.map(function (v, i) {
            if(v%2==0) return v; 
        }, [1, 2]);
        console.log(answer);

v*v대신 if문을 사용해서

짝수만 출력하는 값을 만들었을때

실제로 consol창을 보면

이런식으로 출력이 된다.

(undefined 😵)

 

map은 원본배열을 탐색하면서

새로운 배열을 생성하는데,

새로운 배열은 항상 원본배열과 길이가 동일하기때문이다.