[JavaScript] 화살표 함수

 안녕하세요, 오늘은 자바스크립트의 화살표 함수에 대해서 알아보겠습니다.

---

 화살표 함수(arrow function)은 기존의 함수를 깔끔하고 편리하게 쓸 수 있도록 하는 함수입니다.

<화살표 함수 특징>

1. function {} 대신에 => 기호로 함수를 선언
2. 변수에 대입할 경우 재사용 가능
3. 화살표 함수 내부에 return 문만 있는 경우, 중괄호({ })와 return 생략 가능
4. 매개변수가 하나일 경우 매개변수를 묶는 소괄호( ) 생략 가능

위에 있는 특징들을 활용해서 모두 같은 기능을 하는 함수를 다른 방식으로 구현했습니다.

//기존 방식
function add(x,y){
	return x+y;
}

//화살표 함수 기본 형태
const add=(x,y)=>{
	return x+y;
}

//return과 중괄호 생략
const add=(x,y)=>(x+y);

---

 

<기존 함수와 화살표 함수의 다른점>

1. this 바인딩 방식이 다름

    화살표 함수 이외의 모든 함수는 자신을 가리키는 this를 사용했습니다. 화살표함수는 this를 사용할때

기존의 함수와 바인딩 방식이 다릅니다.

바인딩이란 프로그램에 사용된 구성 요소의 실제 값 또는 특성을 결정짓는 행위입니다. 쉽게 말하자면, this가 어떤 함수나 객체의 this인지 결정짓는 행위입니다.

//객체의 생성자 함수
function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
  }, 1000);
}

var p = new Person();

    위의 코드에는 생성자 함수 안에 또 다른 함수가 존재합니다. 이때 setInterval안의 this.age는 객체의 this.age가 아니라 함수의 this.age를 나타내게 됩니다. 따라서 Person() 생성자에 정의된 this와 다릅니다. 화살표 함수가 아닌 경우에는 this 값을 지정할 수 있도록 that을 사용해서 해결합니다.

//기존 코드의 문제점 해결
function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    that.age++;
  }, 1000);
}

     하지만, 화살표 함수는 자신의 this가 없습니다. 그래서 화살표 함수의 this는 화살표 함수를 호출한 것(객체, 함수)의 상위 this 로 설정됩니다. 밑의 코드에서 화살표 함수를 호출한 것은 function Person()이고, 그 상위 this는 객체의 this입니다. 따라서, Person() 함수의 this와 화살표 함수인 setInterval 함수의 this는 같습니다. 

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}

var p = new Person();

    만약에 생성자 안에있는 화살표함수가 아니라 객체의 매서드인 화살표 함수였다면, 화살표 함수 안의 this는 window를 가리킬 것입니다. 따라서, 밑의 코드의 리턴값은 windows.x+windows.y의 답인 NaN이 됩니다.

const obj={
  x:1,
  y:2,
  add:()=>{
    return(this.a+this.b);
  }
}

 

2. new와 함께 사용할 수 없음

    화살표 함수는 생성자로서 사용될 수 없기때문에 new와 함께 사용할 경우 에러가 발생합니다.

3. prototype 속성 없음

4. yield 키워드 사용할 수 없음

    yield 키워드는 화살표 함수의 본문에 사용될 수 없습니다. 따라서, 화살표 함수는 생성자로서 사용될 수 없습니다.

5. 객체 리터럴 반환일 경우 괄호 필수

    화살표 함수에서 객체 리터럴을 반환하려할때 return과 중괄호({})를 생략할 경우, 괄호가 없다면 에러를 발생시킵니다. 따라서, 반드시 밑의 코드와 같이 ( ) 괄호로 묶어줘야합니다.

//에러 1 : undefined 반환
var func = () => {  foo: 1  };

//에러 2: SyntaxError, function 문은 이름이 필요
var func = () => {  foo: function() {}  };

//Good!
var func = () => ({ foo: 1 });

6. 파싱순서 주의

    화살표 함수 내의 화살표는 연산자가 아니기때문에 화살표 함수만의 특별한 규칙이 있습니다.

let callback;

// Good!
callback = callback || function() {};

// SyntaxError: invalid arrow-function arguments
callback = callback || () => {};

//Good!
callback = callback || (() => {});

---

그냥 화살표 함수 쓸 때, this를 안쓰는게 좋을 것 같아요..

이상입니다. 감사합니다!