■ 화살표 함수 (arrow function)
ES6에서 유용하게 사용되는 화살표 함수에 대해서 보겠습니다.
화살표 함수를 사용하면 함수 키워드 없이도 함수를 만들고, return 없이도 계산 결과가
자동으로 반환이 됩니다.
위 모습이 화살표 함수의 기본 모습이라고 할 수 있습니다.
다만, 파라미터가 단 하나인 경우는 괄호를 생략해도 됩니다.
● 비교
기존 사용하는 함수 형태와 화살표 함수의 형태를 비교해보겠습니다.
var printText = function(txt) { return '입력 : ${txt}' } | var printText = txt => '입력 : ${txt}' |
한 줄로 간략하게 줄어든 것이 보이나요?
파라미터가 2개의 경우도 보겠습니다.
var printText = function(txt1, txt2) { return '${txt1} 그리고 ${txt2}' } | |
var printText = (txt1, txt2) => '${txt1} 그리고 ${txt2}' |
● 영역
함수 내에서 `this`를 활용할 때 주의해야 합니다.
`화살표 함수`는 새로운 `this 영역`을 만들어 내지 않기 때문입니다.
그렇기에 항상 영역에 대한 개념을 주의하여 사용하여야 합니다.
화살표 함수에 대해서 간단하게 정리했습니다.
기존의 방법보다 훨씬 간편하게 표현할 수 있습니다.
처음 볼 때 코드 이해가 어려울 수도 있지만, 표현 형태만 잘 익힌다면 쉽고 간편하게
함수를 선언하고 사용할 수 있을 것 같아요.
그럼 마치겠습니다. 감사합니다.
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript #6] 프라미스 (Promise) (0) | 2018.05.27 |
---|---|
[JavaScript #5] ES6의 객체와 배열 (0) | 2018.05.20 |
[JavaScript #3] ES6 변수 선언 (0) | 2018.05.09 |
[JavaScript #2] jQuery 셀렉터 (0) | 2017.03.23 |
[JavaScript #1] JSTL - Core Library (1) | 2017.01.19 |