화살표 함수의 활용

자바스크립트에서는 함수 표현식을 좀더 쉽게 사용할 수 있는 방법이 있다. 바로 화살표 함수(Arrow Function)이다. 화살표 함수라는 이름은 문법의 생김새에서 본따 만들어졌다.

let func = (arg1, arg2) => arg1+arg2;

위와 같이 코드를 작성하면 arg1, arg2를 받는 함수 func가 만들어진다. 함수 func는 우측의 표현식인 arg1+arg2를 계산하고, 그 결과를 반환한다. 일반적인 함수 표현식와 비교하자면 아래와 같으며 인수를 감싸는 괄호를 생략함으로써 코드 길이를 더욱 줄일 수 있다.

let func = (arg1, arg2) => arg1+arg2;

let func1 = (arg1, arg2) => {
	return arg1+arg2;
}

이처럼 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. 만약 인수가 하나도 없을때는 괄호를 비워놓으면 되며 이때 괄호는 생략할 수 없다.

let func = () => {
	return true; // 인수를 생략한 화살표 함수
}

화살표 함수의 특징

화살표 함수는 편리하지만 단순히 구문을 짧게 유지하기 위한 용도로만 사용되지 않는다. 화살표 함수는 몇가지 특징을 가지고 있다.

 

화살표 함수는 this를 가지지 않는다

화살표 함수 내부에서 this에 접근하면 외부에서 값을 가져온다(캡슐화를 지원하지 않는다) 이런 특징은 객체 안에서 동일한 객체의 프로퍼티를 대상으로 순회를 하는데 사용할 수 있으며 Vue.js에서 data의 프로퍼티를 가져오는데 유용하게 사용된다.

 

화살표 함수에는 argument가 없다

화살표 함수는 일반 함수와 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체인 argument를 지원하지 않는다. 이런 특징은 this를 지원하지 않는 특징과 더불어 정보를 실어 나르는데 유용하게 사용될 수 있다.

요약

화살표 함수는 다음과 같은 점에서 일반 함수와 차이점이 있다.

 

1. this를 가지지 않는다
2. argument를 지원하지 않는다
3. new(생성자)와 함께 호출할 수 없다
4. super를 지원하지 않는다

화살표 함수는 컨텍스트가 있는 긴 코드보다는 컨텍스트를 가지지 않는 짧은 코드를 담는 용도에 최적화되어 있다. 이번 챕터에 나온, argument, super등은 다른 글에서 다루어보자 한다.