원본 본문으로 이동하기

자바스크립트 람다? 화살표함수와 일반 function 과 차이점!

박용서 - 참고 : 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 - 자바스크립트