웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
ES6(ECMA Script 6)의 큰 특징 중 하나인 화살표 함수(Arrow functions)에 대하여 간략하게 알아봅니다.
[참고] 화살표 함수?
화살표 함수는 => 처럼 화살표 기호를 사용하여 함수를 만들 수 있는 방법으로 기존의 CoffeeScript의 문법에서 사용되던 함수 작성 문법입니다.
# ES 6 화살표 함수의 특징
ES 6 부터는 함수를 구현할 때 일반적인 함수 구현 방식과 달리 화살표 함수를 사용할 수 있게 되었습니다. 화살표 함수는 함수를 구현하는데 사용되는 함수 구문으로 기능적인 측면에서는 대부분이 동일합니다. 그 외 문법적 차이를 포함한 몇 가지 화살표 함수만의 차이점을 가지고 있습니다. 먼저 간단한 작성 문법을 알아보겠습니다.
위 두 문법은 myFunc() 이라는 동일한 함수를 만들어냅니다. 다만 ES 6의 화살표 함수는 기존 방식과 다른 특징을 가지고 있는데요 아래와 같은 특징이 있습니다.
ES 6 화살표 함수의 특징은?
- New 키워드를 사용한 생성자 함수 사용불가
- 한 줄 함수 작성 문법이 가능함
- this 키워드는 자기 자신의 함수를 this로 가지지 않고 외부 scope의 this를 계승함
위 내용은 대표적인 차이점입니다. 아래에서 자세히 알아보면...
! New 키워드를 사용한 생성자 함수 사용불가
가장 먼저 함수 내부에 New 키워드를 사용할 수 없습니다. 즉 생성자 함수를 만들 수 없는데요 ... 아래와 같이 생성자를 만들 경우 에러가 발생하게 됩니다.
즉 화살표 함수는 생성자를 만들 수 없습니다.
! 한 줄 (one line) 함수 작성하기
한 줄 함수를 쉽게 작성할 수 있습니다. 이 때 {} 기호는 생략 가능합니다.
더 간단하게 작성되었습니다.
기존의 방식과 새로운 ES 6의 차이점으로 함수 내부에서의 scope 영역의 this가 다를 수 있습니다. 예를들어 아래와 같이 내부함수에서 this를 사용하는 경우 self 또는 _this 등의 키워드를 사용하여 클로저를 활용해 외부 함수의 scope의 this에 접근할 수 있었습니다.
ES6의 화살표 함수는 클로저의 활용 없이 this 키워드가 바로 외부 함수의 this 값을 참조할 수 있게되었습니다.
this 쓰임에 있어서도 더 쉽고 편하게 구현할 수 있게되었죠. 하지만 this가 달리 사용되면서 주의할 부분도 있습니다. 바로 this의 값을 변경하기 위해서 apply(), call(), bind()를 사용할 수 없습니다. 이런 이유로 함수 내부에 apply(), call(), bind()를 사용해 this 값을 변경해야한다면 화살표 함수를 사용하지 말아야합니다.
이런 특징을 가지는 화살표 함수(Arrow Functions)를 사용하면 가독성도 뛰어나고 더 간결하게 나타낼 수 있어 개발에도 효율적인 방법입니다.
! ES6 화살표 함수 사용 예제보기
간략하게 예제를 하나 만들어보겠습니다. 아래 예제는 이름을 반환하는 getName() 이름의 함수를 만드는 예제입니다.
단순하게 네임값을 인자로 넘기면 입력된 인자 값을 반환하여 출력하는 함수입니다.
기본적인 연산도 만들 수 있겠죠. 만약 두 값을 더하는 예제를 만든다면?
매우 간단한 예제를 만들어 보았습니다.
[참고] 화살표 함수?
화살표 함수는 => 처럼 화살표 기호를 사용하여 함수를 만들 수 있는 방법으로 기존의 CoffeeScript의 문법에서 사용되던 함수 작성 문법입니다.
# ES 6 화살표 함수의 특징
ES 6 부터는 함수를 구현할 때 일반적인 함수 구현 방식과 달리 화살표 함수를 사용할 수 있게 되었습니다. 화살표 함수는 함수를 구현하는데 사용되는 함수 구문으로 기능적인 측면에서는 대부분이 동일합니다. 그 외 문법적 차이를 포함한 몇 가지 화살표 함수만의 차이점을 가지고 있습니다. 먼저 간단한 작성 문법을 알아보겠습니다.
// 기존의 자바스크립트 Function 구문
function myFunc() {
};
// ES 6의 화살표 함수 구문
myFunc = () => {
};
function myFunc() {
};
// ES 6의 화살표 함수 구문
myFunc = () => {
};
위 두 문법은 myFunc() 이라는 동일한 함수를 만들어냅니다. 다만 ES 6의 화살표 함수는 기존 방식과 다른 특징을 가지고 있는데요 아래와 같은 특징이 있습니다.
ES 6 화살표 함수의 특징은?
- New 키워드를 사용한 생성자 함수 사용불가
- 한 줄 함수 작성 문법이 가능함
- this 키워드는 자기 자신의 함수를 this로 가지지 않고 외부 scope의 this를 계승함
위 내용은 대표적인 차이점입니다. 아래에서 자세히 알아보면...
! New 키워드를 사용한 생성자 함수 사용불가
가장 먼저 함수 내부에 New 키워드를 사용할 수 없습니다. 즉 생성자 함수를 만들 수 없는데요 ... 아래와 같이 생성자를 만들 경우 에러가 발생하게 됩니다.myConstructor = (name) => {
this.name = name;
}
yourConstructor = new myConstructor('webisfree');
// myConstructor는 생성자가 아니라는 에러가 발생함
this.name = name;
}
yourConstructor = new myConstructor('webisfree');
// myConstructor는 생성자가 아니라는 에러가 발생함
즉 화살표 함수는 생성자를 만들 수 없습니다.
! 한 줄 (one line) 함수 작성하기
한 줄 함수를 쉽게 작성할 수 있습니다. 이 때 {} 기호는 생략 가능합니다.myConstructor = (name) => this.name = name;
더 간단하게 작성되었습니다.
! this 키워드의 쓰임새 차이점
기존의 방식과 새로운 ES 6의 차이점으로 함수 내부에서의 scope 영역의 this가 다를 수 있습니다. 예를들어 아래와 같이 내부함수에서 this를 사용하는 경우 self 또는 _this 등의 키워드를 사용하여 클로저를 활용해 외부 함수의 scope의 this에 접근할 수 있었습니다.
function getName() {
var self = this;
return function() {
this.result;
}
};
var self = this;
return function() {
this.result;
}
};
ES6의 화살표 함수는 클로저의 활용 없이 this 키워드가 바로 외부 함수의 this 값을 참조할 수 있게되었습니다.
getName = () => {
return function() {
this.result;
}
};
return function() {
this.result;
}
};
this 쓰임에 있어서도 더 쉽고 편하게 구현할 수 있게되었죠. 하지만 this가 달리 사용되면서 주의할 부분도 있습니다. 바로 this의 값을 변경하기 위해서 apply(), call(), bind()를 사용할 수 없습니다. 이런 이유로 함수 내부에 apply(), call(), bind()를 사용해 this 값을 변경해야한다면 화살표 함수를 사용하지 말아야합니다.
이런 특징을 가지는 화살표 함수(Arrow Functions)를 사용하면 가독성도 뛰어나고 더 간결하게 나타낼 수 있어 개발에도 효율적인 방법입니다.
! ES6 화살표 함수 사용 예제보기
간략하게 예제를 하나 만들어보겠습니다. 아래 예제는 이름을 반환하는 getName() 이름의 함수를 만드는 예제입니다.
getName = (name) => {
return name;
};
getName('Webisfree');
// 'Webisfree' 출력함
return name;
};
getName('Webisfree');
// 'Webisfree' 출력함
단순하게 네임값을 인자로 넘기면 입력된 인자 값을 반환하여 출력하는 함수입니다.
기본적인 연산도 만들 수 있겠죠. 만약 두 값을 더하는 예제를 만든다면?
getName = (a, b) => {
a + b;
};
getName(1,2);
// 3을 출력함
a + b;
};
getName(1,2);
// 3을 출력함
매우 간단한 예제를 만들어 보았습니다.
아래의 글도 찾고 계시지 않나요?
