JS 화살표 함수(arrow function)

Javascript 화살표 함수란?

 화살표 함수는 ES6에 새로 등장한 함수를 생성하는 방법으로 말 그대로 화살표(=>) 를 이용하여 함수를 선언하는 방법이다. 화살표 함수는 익명 함수로만 사용할 수 있으며 매개변수의 여부 등에 따라 생략까지 할 수 있는 간략한 방법으로 함수를 선언할 수 있다. 또한 생성자로서 사용할 수 없다.

 

기존 함수 생성 방법(ES5)

let sum = function(a,b) {
	return a+b;
}; 

 기존 함수는 매개변수 a,b를 받는 함수 sum을 생성하고 return 값으로 매개변수들에 대한 식을 만든다

 

화살표 함수 생성 방법(ES6)

let sum = (a,b) => a+b;

 화살표 함수는 function이라는 키워드를 제거하고 기존 함수와 동일하게 괄호 안에 인자를 넣는다. 그리고 화살표(=>)를 통해 return 하는 expression을 작성하면 되는 훨씬 더 간편하고 축약된 버전이라고 할 수 있다.

 

화살표 함수 특징

- 매개변수가 한 개인 경우 소괄호 생략 가능, 매개변수가 없거나 2개 이상이면 소괄호 필요

- expression식(함수 내의 식)이 한줄이라면 중괄호 생략 가능

- 호출시 익명 함수로만 사용 가능 + 콜백 함수로 사용 가능 

- 생성자로 사용할 수 없다 

- this 가 없다

let a = b => b+2; 
// 매개변수 b 1개로 소괄호 생략 가능
// 함수식이 b+2로 한줄이기 때문에 중괄호 생략 가능 

let c = () => alert('hi');
// 매개변수가 없으면 소괄호 생략 불가능 

// 함수 정의
let pow = (x) => x*x;

// 함수 호출
console.log(pow(10)); // 100

 위의 사례처럼 화살표 함수는 기본적인 구조에서 매개변수의 숫자, 함수 내부 식에 따라 더 간소화 할 수 있다. 대표적으로 매개변수가 1개이면 소괄호를 제거해도 된다. 하지만 매개변수가 없거나 2개 이상인 경우에는 반드시 소괄호가 필요하다. 또한 함수 내부 식의 경우 식이 한줄인 경우 일반적인 함수랑 마찬가지로 중괄호를 제거해도 된다.

 

 화살표 함수는 호출시 익명 함수로만 사용 가능하다는 점 그리고 콜백함수로 사용할 수 있다는 점 또한 명심해야 된다. 특히 콜백함수의 경우 화살표 함수가 짧고 간단하여 많이 쓰인다.

 

 그 외 화살표 함수에는 'this' 가 없는 것이 가장 중요하고 큰 특징이다. JS에서 'this'와 관련된 개념은 다른 언어들과 사뭇 다른 점이 존재하기 때문에 추후 'this'에 대해서 더 깊게 공부를 하고 정리를 할 예정이다. 

 

화살표 함수 'this'

 앞서 언급했듯이 화살표 함수에서 'this' 는 존재하지 않는다. 일반 함수에서 'this' 는 기본적으로 전역 스코프에서는 window()를 가리킵니다. 그래서 일반 함수에서 this를 전달하는 방법으로 'bind' 를 사용하기도 한다. 하지만 화살표 함수에서는 'this'에 접근하면 외부에서 값을 가져온다. 

 

 즉 화살표 함수 내에서 'this'가 사용되었다면 그 this를 함수 밖에서 찾으려고 할 것이다. 

const account = {
	username: 'Rex',
    balance: 20000,
    getBalance: function() {
    	inner = () => `${this.username}의 잔액은 ${this.balance}입니다`;
        console.log(inner());
   	}
}

account.getBalance(); // Rex의 잔액은 20000입니다.

 위의 예시처럼 화살표 함수에서는 this가 없기 때문에 화살표 함수 외부인 바깥 스코프에서 this를 찾게 되어 결국 username 과 balance를 bind 없이 출력 가능하다. 하지만 이러한 특징으로 인해 객체의 메소드를 사용하는 것은 적합하지 않다.  

 

Summary

- 일반 함수 표현식보다 단순하고 쉽다

- 'this'가 없다

- 객체의 메소드로 사용하는 것은 적합하지 않다

- 익명함수이다

- 생성자로 사용할 수 없다

 

Ref.

https://bohyeon-n.github.io/deploy/javascript/this.html

https://ko.javascript.info/arrow-functions

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions