[JavaScript] Arrow function 사용법 및 특징

© 2020 Oracle

[JavaScript] Arrow function 사용법 및 특징

(ECMAScript 버전 : 2015(ES6), 글쓴날 : 2020.04.16)

 

---

* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.

* 글의 내용은 MDN Web Docs 기반으로 공부하여 작성하였습니다.

---

 

 

JavaScript Arrow function 사용법 및 특징

---

1) Arrow function이란?

Arrow function이란 ECMAScript 2015(ES6) 이후 사용 가능한 함수 표현 문법으로 화살표 함수라고도 불립니다.

Arrow function은 익명 함수를 할당하는 방식으로 사용하며, 기존 함수 생성 방식인 function 키워드를 사용하는 것보다 훨씬 편리하고 간결하게 코드 작성이 가능합니다.

 

구조는

const (변수명) = (매개변수) => {

                        (몸체)

};

입니다.

 

특히, function처럼 동적 스코프가 아닌 렉시컬 스코프를 지향하므로 this를 바인딩 하지 않아도 됩니다!

(자세한 설명은 아래의 특징 파트에서...)

---

2) Arrow function 사용법

(1) 매개변수가 없는 경우

// 기존 function 키워드 사용 방식.
function func() {
  console.log("func");
}
 
// Arrow function 사용 방식.
const arrowFunc = () => {
  console.log("arrowFunc");
};

---

(2) 매개변수가 하나일 경우(소괄호 생략 가능)

// 매개변수가 하나일 경우 소괄호 생략 가능.
const arrowFunc = ex1 => {
  console.log("arrowFunc" + ex1);
};

 

---

(3) 매개변수가 여러 개일 경우(소괄호 생략 불가능)

// 매개변수가 여러 개일 경우 소괄호 생략 불가능.
const arrowFunc = (ex1, ex2) => {
  console.log("arrowFunc" + ex1 + ex2);
};

---

(4) 몸체가 한 줄일 경우(중괄호 생략 가능)

// 몸체가 한 줄일 경우 중괄호 생략 가능.
const arrowFunc = () => console.log("arrowFunc");

---

(5) 몸체가 여러 줄일 경우(중괄호 생략 불가능)

// 몸체가 여러 줄일 경우 중괄호 생략 불가능.
const arrowFunc = () => {
  console.log("arrow");
  console.log("Func");
};

---

3) Arrow function 특징

(1) this를 바인딩 하지 않아도 됨

기존의 function 키워드는 모두 자신의 this 값을 정의함에 따라, 객체지향 프로그래밍 시 사용하기 불편한 문제가 있습니다.

이에 반해, Arrow function은 상위 컨텍스트의 this를 이어받는 렉시컬 스코프를 지향하여 해당 문제를 해결할 수 있습니다.

 

아래의 예시는 해당 문제를 고의적으로 발생시키는 Counter 예제입니다.

(countUp() 함수가 function 키워드로 작성되어 Counter의 this.count와 호환되지 않습니다.)

 

* function 키워드를 사용한 Counter 예제

NaN이 출력됩니다.

 

따라서, 이러한 문제를 해결하기 위해 ECMAScript 3/5 시절엔 변수에 this를 할당하거나, this를 바인딩해야만 했습니다.

 

* 변수에 this를 할당하여 해결하는 방식

정상적으로 출력됩니다.

 

* this를 바인딩하여 해결하는 방식

정상적으로 출력됩니다.

 

하지만, ES6 문법인 Arrow function을 사용하면 상위 컨텍스트의 this를 이어받게 되므로, 위의 귀찮은? 작업 없이 원하는 방식대로 로직이 동작합니다.

 

* Arrow function을 사용한 Counter 예제

정상적으로 출력됩니다.

---

(2) arguments 객체가 사라짐

Arrow function에는 기존 function 키워드로 생성했을 때와 달리 매개변수들을 제어하는 arguments 객체가 사라졌습니다.

대신, ... (Spread 연산자)를 사용한 Rest 파라미터를 대안으로 사용할 수 있습니다.

 

* function 키워드의 arguments 객체

arguments 객체

 

* Arrow function의 Rest 파라미터

Rest 파라미터

---

 

 

---

 

 

 

여기까지 JavaScript, ES6의 Arrow function에 대하여 알아봤습니다.

제가 위에 설명해 놓은 특징 이외에도, this를 가지지 않는 Arrow function 특성상 메소드로 사용하면 좋지 않은 특성 등 여러 가지 특징들이 존재하므로 더 궁금하시다면...

 

* MDN Web Docs의 Arrow function expressions 문서 : MDN Web Docs의 Arrow function expressions 문서

Arrow function expressions

위의 MDN Web Docs의 Arrow function expressions 문서를 참조하시면 되겠습니다.

감사합니다!