[JavaScript] 화살표 함수(Arrow Function) 사용법 & 예제 총정리
ES2015에서 처음 등장한 화살표 함수(arrow function)는 기존 함수 표현식을 화살표로 간결하게 표현할 수 있는 새로운 문법으로 화살표 함수라는 이름은 문법의 생김새를 차용해 이름이 지어졌습니다.
- 화살표 함수는 짧고 간단하게 함수를 작성할 수 있게 해줍니다.
- 화살표 함수는 this를 자신이 속한 환경에서 가져와서, this 키워드를 더이상 사용하지 않아도 됩니다.
- 화살표 함수는 arguments 객체 대신 나머지 매개변수(...)를 사용합니다.
- 화살표 함수는 new 키워드로 객체를 만들 수 없어서 객체 메서드로 사용할 때 주의하셔야 합니다.
자바스크립트 화살표 함수(Arrow Function) 사용법
기본 문법
(param1, param2, param3) => {
// 함수 본문
}
기존의 문법과 다른점을 살펴보겠습니다. 기존에 자바스크립트에서는 함수를 선언할때는 function이라는 키워드로 시작을 했어야 했는데 화살표 함수는 function 키워드 대신 => 문법을 사용합니다. 그리고 그 뒷부분 매개변수 부분은 괄호( ) 안에 콤마 , 로 구분짓게 되는데 이 부분은 기존에 함수 매개변수 받는 부분이랑 같습니다.
See the Pen arrow function1 by 우정태 (@sxqouumz-the-reactor) on CodePen.
완전 기초적인 문법만 살려서 화살표 함수(arrow function)을 사용해봤습니다. 위와 같이 function이라는 키워드 대신에 변수에 괄호(매개변수) => { 본문 } 형태로 작성하면 됩니다. 위의 예제에서는 a,b,c 3개의 매개변수를 받아서 합계를 리턴해주고 있네요.
나머지 매개변수 ... 사용
(param1, param2, ...paramN) => {
// 함수 본문
}
여기서 주목할점은 매개변수를 받는 부분의 ...paramN 입니다. ...은 여러 개의 매개변수를 나열할 수 있다는 것을 의미합니다. 즉 화살표 함수가 여러 개의 매개변수를 받을 수 있다는 것을 나타내기 위한 표기법입니다. 이 나머지 매개변수는 배열로 인식하게 됩니다.
See the Pen arrow function1 by 우정태 (@sxqouumz-the-reactor) on CodePen.
단순히 매개변수 값을 전달받아 출력을 하는 print() 메서드를 화살표 함수(arrow function)을 사용해서 만들어봤습니다. print() 메서드는 총 3개의 인자값을 받습니다.
- a: 첫 번째 매개변수
- b: 두 번째 매개변수
- ...c: 나머지 모든 매개변수를 배열로 받는 나머지 매개변수
함수 본문에서는 document.write를 사용하여 각각의 매개변수를 HTML 문서에 출력합니다. 여기서 주목할 점은 ...c 나머지 매개변수입니다. a와 b는 출력과 동시에 <br>개행을 진행해주어 줄바꿈이 이루어졌는데 매개변수 c는 나머지 ["셋","넷","다섯"]의 배열로 인식되어 개행이 되지 않은 것을 보실 수 있습니다. 이 값을 더 잘사용하려면 함수 내부에서 가공 처리를 해줘야 할겁니다.
매개변수가 하나인 경우에는 괄호를 생략할 수 있음
param => {
// 함수 본문
}
화살표 함수(arrow function)에는 매개변수가 하나만 있는 경우 괄호를 생략할 수 있도록 하고 있습니다. 아래 예제에서 잘 되나 한번 살펴보죠.
See the Pen arrow function3 by 우정태 (@sxqouumz-the-reactor) on CodePen.
보시는것처럼 매개변수가 하나 괄호가 없어도 잘 되죠? 이렇게 매개변수가 하나밖에 없으면 ( ) 괄호 생략이 가능합니다.
한 줄짜리 함수 본문은 중괄호와 return 키워드를 생략할 수 있음
(param1, param2) => param1 + param2본문이 단일 표현식이라면 { }중괄호와 return까지 생략이 가능합니다. 이렇게 생긴 형태를 많이 보셨을겁니다. 이렇게 화살표 함수(arrow function)은 생략이 많이 진행될수록 점차 하나의 식처럼 보이기도 합니다.
See the Pen arrow function4 by 우정태 (@sxqouumz-the-reactor) on CodePen.
본문이 한줄짜리인 함수 두개를 생성해봤습니다. 하나는 a와 b 매개변수를 받아 더해서 반환하는 함수고, 하나는 매개변수 하나를 받아서 그대로 출력하는 함수입니다. 이렇게 Arrow 함수는 자바스크립트 코드를 더 간결하고 명확하게 만들어줍니다. 어떠한가요. 이해가 잘 되셨을까요?
※ 자바스크립트 화살표 함수 사용시 주의할점은 아래 글을 참고해 주세요.
[JavaScript] 화살표 함수(Arrow Function) 사용시 주의할 점 (어휘적 범위 - Lexical Scope)