화살표 함수

  화살표 함수란 function 표현을 짧게 줄여쓴 것으로 function과 같은 기능을 하지만 일부 요소에 대해 function과 다르게 작동한다.

1. 사용방법

//1. 함수 선언식
function add(a,b){
  return a + b
}

//2. 함수 표현식
let add = function(a, b){
  return a + b;
}

  지금까지 사용해온 함수 선언은 위와 같다. 이 함수들은 화살표 함수 문법으로 간단하게 축약해보자

(함수 선언식과 표현식의 차이는 이전 포스팅을 참고하자:2020/12/17 - [Javascript/Basic JS] - 호이스팅(Hoisting))

 

//1. function 키워드 생략
let add1 = (a,b) => {
  return a+b;
}

//2. function 키워드 + return 생략
let add2 = (a,b) => ( a+b )

  add1은 function 키워드만 생략한 것이다. function 키워드를 생략하는 대신 parameter를 표현하는 괄호 뒤에 화살표(=>)를 붙여준다.

 

  add2는 function 키워드뿐만 아니라 return도 생략한 것이다. add 함수 내부에는 다른 연산없이 return만 존재하므로 add2와 같이 return도 생략가능하다. 이 때 중괄호가 아닌 소괄호를 사용해야한다는 것에 주의하자

 

 

2. 일반 함수와 차이점

  1) this

  일반적으로 함수 내부의 this는 함수의 호출방식에 따라 다른 객체를 가리킨다.

var value = 1

//1. 전역 함수 호출
function getValue(){
  return this.value //window.value
}

//2. 객체의 method 호출
const stuff = {
  value: 10,
  getValue: function(){
    return this.value; //stuff.value
  }
}

//3. instance의 method 호출
function Student(){
  this.value = 100 //new Student().value
  this.getValue = function(){ return this.value }
}

getValue();         //1
stuff.getValue();   //10
let kim = new Student()
kim.getValue();     //100

  전역 함수 내에서 this는 전역객체를 의미한다. Browser 측의 JavaScript 최상위 객체는 window를 의미하므로 첫번째 경우의 this는 window를 가리키며 getValue는 곧 window.value이므로 결과는 1이된다.

  객체의 method 호출 시 this는 부모객체를 의미한다. stuff.getValue()의 부모 객체는 stuff이므로 2번째 경우의 this.value는 stuff.value가 된다. 따라서 stuff.getValue()의 값은 10이다.

  new 키워드로 생성자를 호출했을 때 this는 새롭게 생성된 인스턴스 객체를 의미한다. 3번째 경우의 this.value는 new 키워드로 새롭게 생성된 객체의 value가 되며 kim.getValue()는 kim.value와 같다. 따라서 결과는 100이다.

 

 

  화살표함수는 자신의 this가 없다. 대신 화살표 함수를 둘러싼 바깥 범위(상위 스코프)의 this를 가리킨다(Lexical this)

var value = 1

//1. 전역 함수 호출
const num1 = function () => {
  return this.value; //window.value
}

//2. 객체의 method 호출
const stuff = {
  value: 10,
  value2: this.value, //window.value
  getValue: () => {
    return this.value;
  }
}

//3. instance의 method 호출
function Student(){
  this.value = 100 //new Student().value
  this.getValue = () => { return this.value }
}

num1();         //1
stuff.getValue();   //1
let kim = new Student()
kim.getValue();     //100

  첫 번째의 경우 화살표 함수의 상위 스코프는 전역이다. 따라서 화살표 함수 내의 this는 전역에서 this를 했을 때의 값과 동일하며 그 결과는 window이다. 따라서 첫 번째 화살표 함수의 호출 결과는 1이다.

  두 번째 경우 화살표 함수의 상위 스코프는 stuff 객체이다. 따라서 화살표 함수 내의 this는 stuff 객체에서 this를 했을 때의 값과 동일하며 그 결과는 stuff의 상위 객체인 window이다. 따라서 두 번째 화살표 함수의 호출 결과는 1이다.

  세 번째 경우 화살표 함수의 상위 스코프는 Student 객체이다. 따라서 화살표 함수 내의 this는 Student객체에서 this를 했을 때의 값과 동일하며 그 결과는 새롭게 생성된 인스턴스 객체이다.(new 키워드 사용) 따라서 세 번째 화살표 함수의 호출 결과는 100이다.

 

  화살표 함수 안에서는 기본적으로 this가 존재하지 않으며 this를 썼을 때 예상과는 다른 결과가 나올 수 있으므로 사용하지 않는 것을 추천한다.

 

2) arguments

  화살표 함수는 일반 함수의 인자들을 담고있는 유사배열객체인 arguments를 지원하지 않는다. 대신 spread operator(...args)를 사용할 수 있다.

//1. 일반함수
const add1 = function(){
  return arguments[0] + arguments[1];
}

//2. arguments 사용 -> 오류
const add2 = () => ( arguments[0] + arguments[1] )

//3. spread operator
const add3 = (...args) => ( args[0] + args[1] )

add1(1, 2) //3
add2(1, 2) //error: ReferenceError: arguments is not defined
add3(1, 2) //3

 

3) super

  화살표 함수는 super가 존재하지 않는다. 대신 this처럼 화살표 함수를 둘러싼 바깥 범위(상위 스코프)의 super를 가져와 사용한다.

 

 

---

참고 사이트

화살표 함수 다시 살펴보기

 

 

Arrow function | PoiemaWeb