[VUE, JS, ES6] Arrow Function 화살표 함수 사용법

 

1. 화살표 함수(Arrow Function)는 무엇인가?
2. 화살표 함수(Arrow Function)가 필요한 이유는?
3. 화살표 함수(Arrow Function)를 어떻게 사용하는가?
4. 화살표 함수(Arrow Function)의 사용 예시!

 

 

1. 화살표 함수(Arrow Function)는 무엇인가?

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

 

 

2. 화살표 함수(Arrow Function)가 필요한 이유는?   

• 선언된 변수에 function(){return value} 를 담아야 할 때 주로 사용한다.
  즉, 기존 변수따로 함수 따로 작성해 길게 늘어진 코드가 짧으면 한 줄로 사용이 가능하다.

 

 

3. 화살표 함수(Arrow Function)를 어떻게 사용하는가?

변경 전 기존 함수 문법

let func = function(arg1, arg2, ...argN) {
  return expression;
};

 

변경 후 Arrow Function 형태의 문법

let func = (arg1, arg2, ...argN) => expression

 

 

4. 화살표 함수(Arrow Function)의 사용 예시!

/* 변경 전 함수 문법
let sum = function(a, b) {
  return a + b;
};
*/

/* 변경 후 함수 문법 */
let sum = (a, b) => a + b;

/* 결과 생성된 함수 사용법 */
alert( sum(1, 2) ); // 결과 : 3