LHJ

I'm a FE developer.

6.7 화살표 표기법

03 May 2020 » js_lj

ES6에서 새로 만든 화살표 표기법(arrow notation) 도 환영받는 문법입니다.
화살표 표기법은 간단히 말해 function이라는 단어와 중괄호 숫자를 줄이려고 고안된 단축 문법입니다.
중요한 차이가 하나 있는데, 곧 설명하겠습니다.

화살표 함수에는 세 가지 단축 문법이 있습니다.

역주_
화살표 함수는 이 책 전반에 걸쳐 자주 사용되므로, ES6 문법을 처음 접하는 독자분이라면 읽고만 넘어가지 말고 충분히 연습해서 익숙해져야 이후 내용을 이해하기 편리합니다.
화살표 함수는 단순히 function 키워드와 괄호 등을 생략하는 단축 문법에 그치지 않으며, 최근 주목받고 있는 함수형 프로그래밍을 자바스크립트에 도입하는 중요한 열쇠이기도 합니다.

  • function을 생략해도 됩니다.
  • 함수에 매개변수가 단 하나뿐이라면 (())도 생략할 수 있습니다.
  • 함수 바디가 표현식 하나라면 중괄호와 return문도 생략할 수 있습니다.

화살표 함수는 항상 익명입니다.
화살표 함수도 변수에 할당할 수는 있지만, function 키워드 처럼 이름 붙은 함수를 만들 수는 없습니다.

다음 예제를 보십시오.
이들 표현식은 모두 동등한 한 쌍입니다.

const f1 = function() { return "hello!"; }
// 또는
const f1 = () => "hello!";

const f2 = function(name) { return `Hello, ${name}!`; }
// 또는
const f2 = name => `Hello, ${name}!`;

const f3 = function(a, b) { return a + b; }
// 또는
const f3 = (a, b) => a + b;

이들 예제는 다분히 인위적입니다.
이름 붙은 함수가 필요하다면 그냥 일반적인 함수 선언을 사용하면 됩니다.
화살표 함수는 익명 함수를 만들어 다른 곳에 전달하려 할 때 가장 유용하며, 이에 대해서는 8장에서 살펴보겠습니다.

화살표 함수에는 일반적인 함수와 중요한 차이가 있습니다.
this 가 다른 변수와 마찬가지로, 정적으로(lexically) 묶인다는 겁니다.
이 장에서 만들었던 greetBackwards 예제를 고쳐 써 봅시다.
화살표 함수를 사용하면 내부 함수 안에서 this를 사용할 수 있습니다.

const o = {
	name: 'Julie',
	greetBackwards: function() {
		const getReverseName = () => {
			let nameBackwards = '';
			for(let i=this.name.length-1; i>=0; i--){
				nameBackwards += this.name[i];
			}
			return nameBackwards;
		};
		return `${getReverseName()} si eman ym, olleH`;
	},
};
o.greetBackwards();

화살표 함수에는 일반적인 함수와 다른 점이 두 가지 더 있습니다.
화살표 함수는 (9장에서 설명할) 객체 생성자로 사용할 수 없고, arguemnts 변수도 사용할 수 없습니다.
하지만 ES6에서 확산 연산자가 생겼으니 arguments 변수는 필요가 없긴 합니다.