[백업][가리사니] 자바스크립트 람다？ 화살표함수와 일반 function 과 차이점!
javascript
이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.
참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
자바스크립트에 arrow-function (이하 화살표함수)가 있습니다. 예를들어 아래와 같이 사용할 수 있습니다.
// 일단 람다처럼 쓸수있다는것을 보여주기 위해 이렇게 넣는걸 써봤습니다.
// 일반함수
testobj.testCallback(function(){ console.log('hello'); });
// 화살표함수
testobj.testCallback(() => { console.log('hello'); });
사실 이걸 처음 봤을땐.. 단순람다인가? 뭐야….. 자바처럼 클래스 종속적이여서 코드량을 줄여주거나 하는 장점이 크지도 않고 왜 만든거지? 라는 생각이 들었습니다.
하. 지. 만
이 둘은 엄밀히 말하면 좀 다릅니다.
var test =
{
src : 'https://gs.saro.me',
out : function()
{
// 일반함수
(function()
{
console.log('일반함수');
// 문제발생 일반함수의 this는 이 함수 그 자체를 가리킨다.
console.log(this.src);
})();
// 일반함수 + 바인드
(function()
{
console.log('일반함수 + 바인드');
// 실행은 되지만 bind는 여러번 사용할 수 없다.
console.log(this.src);
}).bind(this)();
// 화살표함수
(() =>
{
console.log('화살표함수');
// 화살표 함수는 이 상위객체 즉 out의 this를 가리킨다.
console.log(this.src);
// apply 카피 가아닌 call 참고 라는걸 보여주기위해
this.text = '가리사니 개발자공간';
})();
}
};
var functionCaller = function(func)
{
func();
};
console.log('- 그대로 실행');
test.out();
console.log('- 인자로 넘겨줌');
console.log('화살표 함수 또한 동적으로 만들어짐으로 제대로 실행될리없다.')
functionCaller(test.out);
console.log('- 바인드하여 인자로 넘겨줌');
functionCaller(test.out.bind(test));
// 과연 복사가 아닌 bind와 동일한 "참조" 일까?
console.log(this.text);
// 그렇다 참조이다.! 즉 Function.bind와 같다.
즉 화살표 함수의 this는 자신이 선언된 위치의 this를 마치 call(현재는 보통 function.bind 라고함) 된 것과 같이 그대로 this로 가지고 있는 특성이 있습니다.
가장 중요한점!!!
무척 편리하긴 하지만 앞으로 몇 년간 한국에선 쓸 수 없을 것이다. IE는 아에 지원이 안되고, 에지에 가서야 지원되며 이 글이 작성된 시점에서 사파리 정식판에서도 지원되지 않는다..
- http://caniuse.com/#search=arrow%20function