화살표 함수란?

화살표 함수(Arrow function)는 JavaScript의 ES6문법에서 새로 추가된 함수이다.

기존의 function 키워드를 사용해서 함수를 만드는 것 보다 훨씬 간단히 함수를 표현할 수 있으며, 이름이 없는 익명 함수로 즉시 실행이 필요할 경우 사용하는 함수이다.

화살표 함수의 기본문법

1. 매개변수가 없는 경우

const hello = () => console.log("안녕하세요");
hello();  //안녕하세요

2. 매개변수가 하나 있는 경우

const hello = x => x;
hello("안녕하세요");  //안녕하세요

3. 매개변수가 여러개 있는 경우

const add = (a, b) => {
  return a + b;
}

// 단순 리턴
const add = (a, b) => a + b;

위와 같이 화살표 함수 중 단순하게 리턴만 하는 한 줄짜리는 괄호를 사용하여 더 간단하게 표현이 가능하다.

// 여러줄 작성
const add = (a, b) => { 
	const c = 3;
	return a + b + c;
}
add(1, 2, 3);  //6

일반 함수 vs 화살표 함수

ES6에 새롭게 나타난 화살표 함수와 기존까지 사용되었던 일반 함수의 차이점에 대해 알아보자.

this

JavaScript에서 모든 함수는 실행이 될 때마다 함수 내부에 this라는 객체가 추가된다. 각 함수에서 this가 바인딩 되는 상황에 대해 알아보면 아래와 같은 차이점이 존재한다.

• 일반 함수
  함수를 선언할 때 this에 바인딩 할 객체가 정적으로 결정되지 않고,
  함수를 호출할 때 함수가 어떻게 호출 되었는지에 따라서 this에 바인딩 할 객제가 동적으로 결정된다.

• 화살표 함수
  함수를 선언할 때 this에 바인딩 할 객체가 정적으로 결정된다.
  화살표 함수의 this는 언제나 최상위 스코프의 this를 가리킨다.

생성자 함수

• 일반 함수
  일반 함수는 생성자 함수로 사용 가능하다.

• 화살표 함수
  화살표 함수는 prototype 프로퍼티를 가지고 있지 않아 생성자 함수로 사용이 불가능하다.

arguments

• 일반 함수
  함수가 실행될 때 암묵적으로 argument변수가 전달되어 사용 가능하다.

• 화살표 함수
  화살표 함수에서는 argument가 전달되지 않아 사용이 불가능하다.