[JS] map함수 구현

callback 함수를 이해하기 위해 Array.map함수를 구현해보았다.

순서

map은 자바스크립트 내장함수라서 .map으로 접근이 가능하지만
직접 구현한 함수는 arr와 callback함수를 인자로 받는다.

const myMap = (array, callback) 

배열을 return해줄 것이기 때문에 빈 배열을 선언하고,

const myMap = (array, callback) => {
        let result = [];}

map 함수는 map의 콜백함수가 배열을 돌면서 value값과 index값을 인자로 받기 때문에 for문을 통해서 배열의 길이 만큼 돌고 callback함수의 인자를 value값, index값으로 지정해 준 후,
선언해 둔 result에 callback으로 return한 값을 push해준다.

const myMap = (array, callback) => {
        let result = [];
        for (let i = 0; i < array.length; i++) {
          result.push(callback(array[i], i));
        }
      
      };

push 해준 후 for문 실행이 끝났을 시에 마지막으로 result 배열을 return 해준다.

👩‍💻 완성!!

const myMap = (array, callback) => {
        let result = [];
        for (let i = 0; i < array.length; i++) {
          result.push(callback(array[i], i));
        }
        return result;
      };

실제 사용

let array1 = [1, 2, 3];
myMap(array1, (value, key) => value + key));
//결과값 [1,3,5] 

(value, key) => { return value + key }

key와 value를 더해주는 callback함수를 만들어 주었다.

👻 후기

map은 callback함수를 항상 사용하여서 구현하는데 map 내부에서는 어떻게 동작되는지 궁금했었다. 또한 평소에 callback함수에 대한 이해도가 부족했다고 생각했기 때문에 이번 기회에 callback 함수를 더 공부할 수 있게 된 것 같다.

코드를 구현하면서 배열에 callback함수를 push한다는 것이 생소하였는데 생소한 코드를 자주 접하면서 다양한 코드에 익숙해져야 된다는 생각이 들었다.

또한 코드를 짤 때 의식적으로 다양한 걸 시도해보지 않으면 다른 코드를 아무리 본 들, 코드가 항상 내 습관대로 쓰는 제자리 코드가 된다는 걸 느꼈다.
항상 시간에 쫒겨 구현에만 급급한 코드가 아니라 효율성과 편리성을 고려한 코드를 지향해야겠다.