자바스크립트의 화살표 함수

자바스크립트에서 함수를 선언할 때 보통 다음과 같이 선언을 할 것이다.

//함수의 선언
function add(a,b){
  return a + b;
}
console.log(add(1, 4));		//결과 : 5

다른 언어와 비슷하게 function을 통해 선언하고, ()안에 파라미터를 지정하고, {}문 안에 로직을 작성하고, return을 통해 반환 값(결과 값)을 저장할 수 있다.

이보다 더 간결하고 간편하게 함수를 사용할 수 있는 방법이 화살표 함수를 사용하는 것이다!

화살표 함수

함수를 function 대신 화살표 함수인 =>를 통해 선언할 수도 있다.

=> ES6부터 도입된 화살표 함수로, 흔히 람다식이라고 한다.

화살표 함수는 다음과 같이 선언할 수 있다.

//화살표 함수의 선언
const add = (a,b) => {
  return a + b;
}
console.log(add(1, 4));		//결과 : 5

그리고 위처럼 함수 내에 return밖에 없을 경우 다음과 같이 줄여 쓸 수도 있다.

const add = (a,b) => a + b;

화살표 함수는 이처럼 줄여 쓸 수 있다는 특징이 있다.
.
.

화살표 함수의 특징

줄여쓸 수 있다는 특징 외에 중요한 특징들을 살펴보자.
①함수명, ②arguments(인자), ③this 이 세 가지가 없다는 점이다.

①함수명이 없다는 것은 익명 함수로 동작한다는 뜻이고, arguments, this가 없다면 어떤 일이 생길까?

②arguments(인자)

const func = function(){
	console.log(arguments);
}
func(1,2,3,4); 	//[Arguments] {'0':1, '1':2, '2':3, '3':4}

보통 함수가 생성되면 위처럼 자신의 스코프 안에 자기 자신을 가리키는 this와 파라미터가 담기는 arguments가 자동으로 생성된다.

const func = (...args) => {
	console.log(args);
}
func(1,2,3,4); 	//[1,2,3,4]

하지만, 화살표 함수에서는 arguments가 자동으로 생성되지 않기 때문에 arguments가 필요하다면 함수의 피라미터 부분에 ...args를 넣어 args라는 배열 안에 파라미터를 담을 수 있다!

...은 전개 연산자라고 하는데, "값이 몇 개가 될지 모르나 뒤에 오는 변수명에 값을 배열로 넣어라"라고 하는, ES6이후 추가된 문법 중 하나

그리고 ③this가 없다는 것은 무엇을 의미할까?
this가 존재하지 않으니 화살표 함수에서는 bind를 사용해도 this를 주입할 수 없다.
때문에 생성자(new)를 사용해 화살표 함수로 만들어진 객체의 인스턴스를 생성할 수 없다.

만약, 화살표 함수로 만들어진 객체에 this를 사용한다면 일반적인 인자나 변수와 동일하게 취급하게 되고 내부 스코프에 this가 없기 때문에 상위 함수의 this나 전역(Global) 객체의 this를 불러오게 된다.

this에 대한 자세한 설명은 이전 게시물 자바스크립트에서의 this 를 참고하도록 하자.