[JavaScript] Arrow Fuction 정리 (this, arguments 사용 시 주의점)

화살표 함수 (Arrow Function) 

자바스크립트 ES6부터 => 화살표를 이용해서 익명 함수를 선언하는 Arrow Function이 도입되었다. Arrow Function을 사용하면 코드가 간결해진다.

자바스크립트에서 ES란 ECMASCRIT로 자바스크립트의 표준을 나타내는 용어이다.
2015년부터 ES6가 등장하였으며, 이후 ESXXXX 로 나타내고 있다.

 

문법 Syntax

// 파라미터가 없는 경우 

() => expression

// 파라미터가 하나인 경우

(param) => expression
param => expression
param => {
	statements
}

// 파라미터가 여러개 인 경우
(paramA, paramB) => expression

(paramA, paramB) => {
	statements
}

• 파라미터가 한 개인 경우 괄호를 생략할 수 있고, 파라미터가 없거나 여러 개인 경우는 반드시 괄호를 지정해야 한다.
• => 다음 중괄호를 생략해도 return 과 동일한 역할을 한다.

 

예제

// 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을 받아 처리하겠다는 의미로 =>를 사용한다. 
• => 다음 중괄호를 생략하는 경우 파라미터 값을 넣을 때 백틱(`)을 사용하면 파라미터도 리턴할 수 있다.

 

Arrow function 에서의 this

Arrow 함수 에서의 this는 일반 함수와 다르게 상위 스코프에 상속되어 유용하게 쓰일 수 있다. 정리하기에 앞서 this 키워드에 대해 간략하게 짚고 넘어가자.

// 객체의 메서드로 호출되는 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() 함수를 사용하여 처리한다.

 

function Person() {
  // this는 Person
  this.age = 0;

  setInterval(function growUp() {
    // Person이 아닌 Window 객체로 설정
    this.age++;
  }, 1000);
}

var p = new Person();

• setInterval 메서드 안에 있는 this는 전역 스코프에 해당하기 때문에 Window 객체를 참조하고 있다. 

 

// 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가 없어 상위 스코프를 따라가기 때문에 간단하게 처리할 수 있다.

 

Arrow function 에서의 arguments

const getName = () => {
   const name = arguments[0];
   console.log(`My name is ${name}`); 
}

getName("sasca", "tistory");

• arguments 키워드를 이용하면 파라미터의 값을 가져올 수 있다. 하지만 위의 구문은 arguments is not defined 에러가 발생한다. 그 이유는 arrow function에서 arguments는 this와 같이 상위 스코프를 따라가기 때문에 받은 파라미터가 없다고 인식하기 때문이다.

 

const getName = (...args) => {
   const name = args[0];
   console.log(`My name is ${name}`); 
}

getName("sasca", "tistory");

• 가변인자 방식인 ...을 사용해서 문제를 해결할 수 있다.

 

REFERENCE

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions