자바스크립트 콜백함수 관리 아이디어

Vue를 공부하다가 갑자기 생각나서 글 싸지른다.

자스에서는 가변인자 값은 가져올 수 있는데, 인자명은 못가져온다.
일단 자스에서 개체 까는 API인 ReflectProxy가 있는데,
대체적으로 개체 속성과 생성 관리를 담당할 뿐이다. 물론 유용하긴 하지만.
함수 내에서도 인자를 까는 메소드도 없고, API도 없다.
함수 내 arguments 개체 또한 인자값을 가져올 뿐이고.
최신인 ES2017에서도 이를 대응할 API는 없다…

물론 불가능한 건 아니다. 한가지 확실한 점은, 네이티브 함수(예: Object, Array 등)만 아니면
Function.prototype.toString() 메소드를 실행 시 함수 전체가 까발려진다.
거기서 함수명과 인자, 함수 내용이 모두 나오게 된다. 그 어떤 브라우저든 간에.

그래서 이를 이용해 인자 이름을 가져올 수 있는 방법이 있다.
출처: How to get function parameter names/values dynamically?

var STRIP_COMMENTS = var STRIP_COMMENTS = /(\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s*=[^,\)]*(('(?:\\'|[^'\r\n])*')|("(?:\\"|[^"\r\n])*"))|(\s*=[^,\)]*))/mg;
var ARGUMENT_NAMES = /([^\s,]+)/g;
function getParamNames(func) {
  var fnStr = func.toString().replace(STRIP_COMMENTS, '');
  var result = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
  if(result === null)
     result = [];
  return result;
}

그러하다. 함수 내용을 파싱해서 코멘트 제거하고 인자명만 쏙 가져올 수 있다.

getParamNames(getParamNames) // returns ['func']
getParamNames(function (a,b,c,d){}) // returns ['a','b','c','d']
getParamNames(function (a,/*b,c,*/d){}) // returns ['a','d']
getParamNames(function (){}) // returns []
getParamNames(function (a=4*(5/3), b) {}) // returns ['a']

완벽하게 대응이 되는 것 같진 않아보여도 대부분 케이스에 대응이 가능하다.
굳이 대응 안되는 케이스가 있다면… 아무래도 화살함수(Arrow Function)가 되겠는데,
(a=>b).toString() 호출하면 크롬의 경우 "a=>b" 이렇게 나온다…
가장 쉬운 대응 방법은 babel로 강제 변환해서 써버리는 것이다… asyncawait 나오면 묵념…

추가로 명명된 가변인자(function(...args))도 대응할 수 없다. 근데 일반 가변인자처럼 대응이 더 어렵다. 패스.

어쨌든, 이제 내가 말하고자 하는 아이디어 예제를 내겠다.
document sandbox 예제다. 함수인자 까는 함수는 위에 것을 그대로 활용한다.

function sandbox(func){
    var anames = getParamNames(func);
    anames = anames.map(function(method){
        return function(){ return document[method].apply(document, arguments); };
    });
    return func.apply(window, anames);
}

sandbox(function(createElement, getElementById, createTextNode){
    var a, b;
    a = createElement('p');
    a.innerHTML = "hello world!";
    document.body.appendChild(a);
    b = getElementById('out');
    b.appendChild(createTextNode('YAY~!'));
});

참고로 document 객체의 모든 요소는 참조를 허용하지 않기 때문에, 어쩔 수 없이 함수로 감싸 꼼수를 썼다.
실행 결과는 jsfiddle 에서 볼 수 있다.
만약 Array.prototype.map 메소드가 실행되지 않는 구닥다리 브라우저의 경우는… jQuery.map() 으로 알아서 수정해서 테스트 해보라.

뭐 내가 말하려는 게 대충 이런 식이다. 이런 샌드박스형 콜백을 활용하면 더 유연한 콜백 대응이 가능할 거라 믿기 때문이다.
근데 왜 ECMA에서는 인자명에 관심을 가지지 않는걸까? 의문을 가지며 이것으로 마치도록 하겠다.

끗.

composite / 2017년 9월 7일 / Piss Development / 0 Comments