[JavaScript] 화살표 함수(Arrow Function) 기본 용법 정리

---

🧐 왜 갑자기 JavaScript 포스팅을 하나요?

웹 FE 개발자가 되고 싶은데, JS를 포함하여 필요한 기술들에 대한 전반적인 학습 수준이 부족하다는 생각이 들었다. 그래서 유데미, 코세라 등등... 학습을 더 할 수 있는 길을 모색을 하다가 유데미에서 아래의 강의를 구매하여 듣기 시작했다.

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

나름대로의 내실 다지기라고 봐야겠다. 아무튼 그래서 이 강의의 섹션 중 JS를 짧게 복습하는 섹션이 있는데, 그 섹션의 강의를 들으면서 상기시킨 ES6 문법들 중에 정리해야겠다 싶은 것들은 정리해놓고 두고두고 봐야겠다 생각했다. 그래서 첫 JS 공부 정리는 ES6의 최신 문법 중에 하나인 화살표 함수 (Arrow Function)에 대해서 정리해보려고 한다.

 

---

👉 화살표 함수

화살표 함수는 JS에서 함수를 선언하고 정의할 때 사용하던 전통적인 키워드인 function 대신 사용할 수 있는 문법이다.

하지만 모든 상황에서 사용할 수 없고 제한적인 상황에서 사용할 수 있다.

 

강의에 따르면 .this 키워드를 좀 더 안정적으로 사용할 수 있다고 들었고, MDN에 따르면 화살표 함수의 특징은 다음과 같다.

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

▲ function 키워드를 활용한 함수 선언 및 정의.

▲ 위의 함수를 화살표 함수로 동일한 작업을 수행하도록 변경한 예.

👉 화살표 함수의 기본적인 용법

기본적인 용법은 위와 같다. 고급 용법도 있고, .this 바인딩 등 다양한 특징들이 있지만, 이번 포스팅은 기본 용법에 관한 포스팅이므로, 기회가 닿고 내가 충분히 이해를 했다면 추후에 포스팅을 해서 정리를 해놓도록 하겠다. 

 

---

👀 마치며

이번에 강의를 듣고, MDN 등을 뒤지며 기본기를 다지기 위한 공부를 하는 중인데, 웹 FE 개발자가 되고 싶다는 마음에 비해 JS의 기본적인 부분조차 모르고 있다는 현실을 알 수 있었다. 입만 살아가지고서는.... 그래서 앞으로는 이렇게 하나씩 새로운걸 알거나 확실히 복습을 한 경우에는 블로그에 정리해서 공부를 했다는 기록을 남기고, 필요할 때 내가 과거의 나의 생각을 알 수 있도록 할 생각이다. 이제 정말 열심히 해야하는데...

 

혹시라도 이 포스팅의 내용이 문제가 있다면 댓글로 말씀해주시면 감사하겠습니다 :)

---

👀 참고 자료

화살표 함수 - JavaScript | MDN