소년코딩의 자바스크립트 강좌 36. map, wrapper

map

map 함수는 배열의 각 요소르 깨내어 사용자 정의 함수를 적용시켜 새로운 값을 얻은후, 새로운 배열에 넣는다.

Array.prototype.map = function(callback) {
     /* this가 null인지, 배열인지 체크 */
     /* callback이 함수인지 체크 */
     
     var obj = this;
     var value, mapped_value;
     var A = new Array(obj.length);
 
     for (var i = 0; i < obj.length; i++) {
          value = obj[i];
          mapped_value = callback.call(null, value);
          A[i] = mapped_value;
     }
 
     return A;
};
 
var arr = [1, 2, 3];
var new_arr = arr.map(function(value) {
     return value * value;
});
 
console.log(new_arr);   // [1, 4, 9]

배열 각 요소의 제곱값을 새로운 요소로 하는 배열을 반환받는 코드다.

---

wrapper

wrapper 함수는 특정 함수를 자신의 함수로 덮어 쓰는 것이다.

여기서 원래 함수의 긴으을 잃어버리지 않은 상태로 자신의 로직을 수행 할 수 있어야 한다.

객체지향 언어에서는 다형성의 특성을 살리기위해 Override를 지원하는데 이와 유사하다.

function wrap(object, method, wrapper) {
     var fn = object[method];
 
     return object[method] = function() {
          // return wrapper.apply(this, [fn].concat(Array.prototype.slice.call(arguments)));
          return wrapper.apply(this, [fn.bind(this)].concat(Array.prototype.slice.call(arguments)));  
     };
}
 
Function.prototype.original = function(value) {
     this.value = value;
     console.log('value : ' + this.value);
}
 
 var myWrap = wrap(Function.prototype, 'original', function(orig_func, value) {
     this.value = 20;
     orig_func(value);
     console.log('wrapper value : ' + this.value);
});
 
var obj = new myWrap('Oppa');
/*
     value : Oppa
     wrapper value : Oppa
*/

함수를 덮어쓰기 위해 wrap함수를 호출하였다.

세 번째 인자로 넘긴 자신의 익명함수를 Function.prototype.original에 덮어 쓰려는 것이다.

여기서 자신의 익명 함수의 첫 번째 인자로 원래 함수의 참조를 받을 수 있다.

만약 참조를 [fn]으로 하였다면 this가 익명함수로 바인딩 되어 의도하지 않은 결과가 나오므로 [fn.bind(this{]를 적절하게 이용해야한다.

이 참조로 원래 함수를 실행하고 자신의 로직을 수행할 수 있다.

 

wrapper는 기본 제공되는 함수에서 원하는 로직을 추가하거나, 버그를 피해가고자 할때 사용한다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.