자바스크립트 화살표 함수 (람다식)

자바스크립트의 람다식?

람다식이라, 어디에서 들어봤는가? 아마 자바 공부를 하던 사람이라면 어쩌다 한번은 들어봤을 것이다. 자바에서의 람다식은 주로 쓰레드(한번에 여러 작업을 처리)작업을 할 때 필요한 Runnable 객체(실행코드, JS에서는 익명함수)를 편리하게 생성하기 위해 쓰인다.

그런데 이런 기능이 JS에도 있다는 것, 들어봤는가? 목적이 거의 비슷하고, 문법도 비슷하다. 하지만 자바스크립트에서의 이런 기능은 자바의 "람다식" 과는 명칭이 별개로 붙어 있다. (그리고 무엇보다 매일매일 function(){}을 적느라 고생할 필요가 없다는 것이다!)

바로 '화살표 함수'다. 풀네임으로는 화살표 함수 표현, arrow function expression 정도 되겠다.

주로 쓰이는 방식은 위와 같다. 먼저 왼쪽에는 익명함수의 작동에 필요한 변수들을 넣어준다. 그리고 그 옆에 화살표 함수라는 이름대로, "=>" 라는 화살표시를 넣어 준다. 그런 다음에는 블록 문을 열어 function 작성하듯이 실행할 내용을 넣어주면 된다.

또, 여기에선 특수한 경우로 매개변수가 하나일땐 양쪽의 괄호를 쓰지 않아도 되고, 실행내용이 한줄일때도 중괄호를 쓸 필요가 없다. 그리고 심지어 그 한줄이 리턴값이라면, return 쓸필요도 없이 그냥 쓰면 그게 리턴되는걸로 인식하고 작동한다. 정말 편리하지 않은가?

그럼, 이에 대해 간단한 예제를 하나 보자.

var function1=function(text){
   return text.repeat(12);
}
 
var function2=(text=>text.repeat(12));

위 예제는 일반적 function과 자바스크립트 화살표 함수를 확실하게 비교했다. 기존의 익명함수에선 function이라는 키워드, 여러개의 괄호들, return 키워드 등이 많았지만 화살표 함수에서는 거의 생략되어 아주 짧아진 것을 확인할 수 있다.

하지만 이런 화살표 함수에도 "단점"은 존재하는데..

기존의 function을 대체할수 없는 부분이 있다는 것이다.

화살표 함수를 쓰면 안되는 경우

자바스크립트의 함수는 여러 용도로 쓰인다. ECMA6스크립트를 쓰지 않을 때에는 자바의 "클래스" 개념도 function을 이용해서 표현한다. 하지만 이 기능은 화살표함수에선 사용할 수 없다.

화살표함수는 function과는 다르게 오직 코드를 담는 것과 실행하는 것에 초점이 맞춰져 있다. 따라서 prototype도 없고 사실 생성 자체도 불가능하다. ( not a constructor, 생성자가 아니라고 뜬다 )

또 두번째로는 this가 필요한 경우이다. 위에서 function을 class로 사용할때의 예를 들었는데, 사용하지 못하는 이유중 하나로 this를 사용할 수 없다는 것도 있다. 화살표 함수에서의 this는 그냥 자기가 속한 곳일 뿐이다. 콘솔에서 입력한것처럼. 당연히 bind, call, apply는 효력을 발휘하지 못한다.

이런 경우만 빼면 간결한 코드를 위해서라면 쓸만한 가치가 있다. 유용한 기능이니 잘 사용하자.