반응형
1. 화살표 함수 (Arrow Function)
자바스크립트 ES6부터 => 화살표를 이용해서 익명 함수를 선언하는 Arrow Function이 도입되었다. Arrow Function을 사용하면 코드가 간결해진다.
자바스크립트에서 ES란 ECMASCRIT로 자바스크립트의 표준을 나타내는 용어이다.
2015년부터 ES6가 등장하였으며, 이후 ESXXXX 로 나타내고 있다.
1.1. 문법 Syntax
<javascript />
// 파라미터가 없는 경우
() => expression
// 파라미터가 하나인 경우
(param) => expression
param => expression
param => {
statements
}
// 파라미터가 여러개 인 경우
(paramA, paramB) => expression
(paramA, paramB) => {
statements
}
- 파라미터가 한 개인 경우 괄호를 생략할 수 있고, 파라미터가 없거나 여러 개인 경우는 반드시 괄호를 지정해야 한다.
- => 다음 중괄호를 생략해도 return 과 동일한 역할을 한다.
1.2.
1.3. 예제
<javascript />
// ES5
let getName = function(name) {
return "my name " + name;
};
// ES6
// 파라미터가 하나면 괄호 생략 가능
let getName = (name) => {
return `my name ` + name;
};
let getName = (name) => `hello ${name}`;
// 파라미터가 없는 경우 빈 괄호 사용
let test = () => {
return "test";
};
let test = () => "test"
- 파라미터인 name을 받아 처리하겠다는 의미로 =>를 사용한다.
- => 다음 중괄호를 생략하는 경우 파라미터 값을 넣을 때 백틱(`)을 사용하면 파라미터도 리턴할 수 있다.
1.3.1. Arrow function 에서의 this
Arrow 함수 에서의 this는 일반 함수와 다르게 상위 스코프에 상속되어 유용하게 쓰일 수 있다. 정리하기에 앞서 this 키워드에 대해 간략하게 짚고 넘어가자.
<javascript />
// 객체의 메서드로 호출되는 this
const person = {
name: 'sasca',
cnt: 28,
addCnt: function() {
this.cnt++; // person 객체
}
};
person.addCnt();
console.log(person.cnt);
// 전역 범위에서의 this
function globalScope() {
console.log(this); // Window 객체
}
globalScope();
- this 키워드는 전역 범위에선 Window 객체를, 객체의 메서드에선 해당 객체를 참조한다.
Window 객체를 참조하는 것을 방지하기 위해 strict mode 인 'use strict'를 사용하면 전역 스코프의 this를 undefined로 설정할 수 있다.
this 키워드에 값을 설정할 때는 .apply() 와 .call() 함수를 사용하여 처리한다.
<javascript />
function Person() {
// this는 Person
this.age = 0;
setInterval(function growUp() {
// Person이 아닌 Window 객체로 설정
this.age++;
}, 1000);
}
var p = new Person();
- setInterval 메서드 안에 있는 this는 전역 스코프에 해당하기 때문에 Window 객체를 참조하고 있다.
<javascript />
// ES 6 이전
function Person() {
var that = this;
that.age = 0;
setInterval(function growUp() {
that.age++; // Person 객체 참조
}, 1000);
}
// ES6 이후 화살표 함수 이용
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Person 객체 참조
}, 1000);
}
var p = new Person();
- 화살표 함수를 사용하기 전에는 다음과 같이 현재 객체의 정보를 변수에 담아서 처리하였다. 화살표 함수를 사용하면, 자기 자신의 this가 없어 상위 스코프를 따라가기 때문에 간단하게 처리할 수 있다.
1.3.2. Arrow function 에서의 arguments
<javascript />
const getName = () => {
const name = arguments[0];
console.log(`My name is ${name}`);
}
getName("sasca", "tistory");
- arguments 키워드를 이용하면 파라미터의 값을 가져올 수 있다. 하지만 위의 구문은 arguments is not defined 에러가 발생한다. 그 이유는 arrow function에서 arguments는 this와 같이 상위 스코프를 따라가기 때문에 받은 파라미터가 없다고 인식하기 때문이다.
<javascript />
const getName = (...args) => {
const name = args[0];
console.log(`My name is ${name}`);
}
getName("sasca", "tistory");
- 가변인자 방식인 ...을 사용해서 문제를 해결할 수 있다.
1.3.3. REFERENCE
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
반응형
