[TIL] 20230525 - map객체, map함수, this바인딩

오늘은 콜백함수를 공부하고 있었는데

map 함수를 배웠다.

 

엇? 근데 이전에 map 객체도 배웠는데!

이름이 같아? 해서 정리해봤다.

  자료구조 Map(Object) 와  .map() 함수(메서드)  

Map : key값으로 속성에 접근할 수 있다. (검색, 삭제, 제거, 여부확인 등의 기능 가능)
('key', 'value')

• 프로그래밍의 부족한 부분을 보완하기 위해서 Map, Set 같은 추가적인 자료구조(데이터 형태)가 등장
• Map의 메서드 : keys, values, entries
• Map의 key는 모든 값(함수, 객체 또는 원시값 포함)이 될 수 있습니다.

const contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
contacts.has('Jessie') // true
contacts.get('Hilary') // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete('Raymond') // false
contacts.delete('Jessie') // true
console.log(contacts.size) // 1

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

 

map(func) : 배열을 변형할 수 있는 메서드

• map(func) – 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦

배열의 하나하나를 순회하면서 가공해서 기존의 배열을 건드리지 않고 새로운 배열을 return(생성)하는것

var newArr = [10, 20, 30].map(function (currentValue, index) {
	console.log(currentValue, index);
	return currentValue + 5; // 리턴이 없으면 undefined : 맵함수는 무조껀 무언가 할당하긴 해야된다. [배열크기만큼]
});
console.log(newArr);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 15, 25, 35 ]

그런데!

var newArr = [10, 20, 30].map(function (index, currentValue) { // 변수명이 달라져도 js는 (커런트 밸류,인덱스)로 인식함
	console.log(index, currentValue);
	return currentValue + 5; //이름은 currentValue이지만 js가 보는 값은 index(자리값)
});
console.log(newArr);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 5, 6, 7 ]

(index, currentValue)  => 변수명이 달라져도 js는 (커런트 밸류,인덱스)로 인식함

 

map, filter, reduce도 마찬가지로 명세서에 나와있는대로 써야한다.

• map syntax

// Arrow function
map((element)=>{ /*....*/ })
map((element, index)=>{ /*....*/ })
map((element, index, array)=>{ /*....*/ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback Function
map(function (element){/*...*/})
map(function (element, index){/*...*/})
map(function (element, index, array){/*...*/})
map(function (element, index, array){/*...*/}, thisArg)

  this binding  

this는 함수로서의 호출은 전역객체를 참조, 메서드로서의 호출은 호출의 주체를 참조 하는데

예외사항이 있다!!!!

콜백 함수도 함수이기 때문에 this가 전역객체를 참조하지만,

제어권을 넘겨받을 코드에서 call/apply(즉시실행) 메서드의 첫번째 인자에서 콜백함수 내부에서 사용될 this를 명시적으로 binding 하기 때문에 this에 다른 값이 담길 수 있다.

 

예제 코드 

Array.prototype.map123 = function(callback, thisArg){ // func를 map123에 가져다 넣는다. 마치맵 함수 처럼 호출이 가능하다. // 첫번재인자 콜백함수, 두번째 인자 this

    // map 함수에서 return할 결과 배열
    let mappedArr = [];

    for (var i = 0; i < this.length; i++) { // 여기서 this는  [1, 2, 3]
        // call의 첫 번째 인자는 thisArg가 존재하는 경우는 그 객체, 없으면 전역객체
        // call의 두 번째 인자는 this가 배열일 것(호출의 주체가 배열)이므로,
        // i번째 요소를 넣어서 인자로 전달
      var mappedValue = callback.call(thisArg || global, this[i]);
      mappedArr[i] = mappedValue;
    }
    return mappedArr;
};

// 새로운 배열 생성
let newArr = [1, 2, 3].map123((item) => {
    return item * 2;
});
console.log(newArr);

// 콜백함수 내부에서 this를 명시적으로 바인딩하기 때문에 이런게 가능하구나!!!!!!!

 

 

오늘은 여기까지.... ㅎㅎㅎ

머리가 복잡복잡 :) 

차근차근 정리하고 이해해서 씹어먹쟈!!!!!!!!!!