JavaScript ES6 정리 - Arrow Function

JavaScript ES6 정리 - Arrow Function

이번 포스팅에서는 많은 사람이 궁금해하고 제일 많이 쓰는 ES6에서 추가된 화살표 함수(Arrow Function)에 대해 알아보자!

Arrow Function

나도 처음에 Arrow Function을 봤을 때 무슨 외계어가 있어서 이게 도대체 뭐지..? 했던 기억이 있다.

하지만, 익숙해지면서 가독성 향상과 편리함을 많이 느꼈다.

Arrow Function을 처음 본 분들은 이번 기회에 꼭 익혀보자!

Arrow Function 사용 전

var a = function () {
  return new Date()
}
var b = function (a) {
  return a * a
}
var c = function (a, b) {
  console.log( a * b )
}

Arrow Function 사용 후

let a = () => new Date()
let b = a => a * a
let c = (a, b) => {
  console.log( a * b )
}

최종적으로 Arrow Function을 사용해 축약된 형태를 보니 이해가 잘가지 않을 것이다.

변수 a에 대해 하나씩 천천히 변환해보자.

변환 과정

//1번째
var a = function () {
  return new Date()
}

//2번째
var a = () => {
  return new Date()
}
//function 키워드가 => 으로 변환되었다.

//3번째
var a = () => new Date()
/*
{ return }이 삭제되었다.
함수 내부에서 추가적인 일 없이 바로 return을 한다면
3번째와 같이 사용할 수 있다.
*/

변수 b, c도 유사하다.

차이점은 parameter를 감싸는 ()를 생략 여부인데, parameter가 하나일 경우는 ()를 생략할 수 있고, 그렇지 않을 경우는 생략이 불가능하다.

(나는 param이 하나라도 웬만하면 생략하지 않는다.)

변환 과정과 위 설명을 보고 다시 함수를 Arrow Function으로 바꿔보자!

var e = function (x) {
  return {
    x
  }
}

위 예제는 조금 헷갈릴 수도 있다. 변환 과정을 보자!

//1번째
var e = function (x) {
  return {
    x
  }
}

//2번째
var e = (x) => {
  return {
    x
  }
}

//3번째
var e = (x) => { x }
/*
return 뿐이라 { return } 생략했다
하지만 위 코드는 뭔가 의도랑은 조금 다르다.
객체를 return 하고 싶어서 위처럼 작성했지만
함수 스코프의 중괄호가 되어버린 느낌이다.
*/

//3번째 (수정)
var e = (x) => ({ x })
//위와 같은 케이스는 소괄호를 감싸주면 된다.
var f = function (a) {
  return function (b) {
    return a + b;
  }
}

let f = a => b => a + b

좀 더 어려운 예제다. 나는 Arrow Function을 공부 안 한 상태에서 위와 같은 예제를 본 적이 있었는데 정말 외계어 같고 머리가 빙빙 돌았다 😱

여태까지 이해가 되었다면 잘 이해할 수 있을 것이다. 변환과정은 생략하겠다.

this 바인딩

오랜만에 this 바인딩에 관해 얘기해보자!

const obj1 = {
  a () {
    console.log(this);

    const b = function () {
      console.log(this)
    }

    b.call(this);
  }
}

const obj2 = {
  a () {
    var self = this;
    console.log(this);

    const b = function () {
      console.log(self)
    }
  }
}

기존 함수 내부에서 this를 호출하면 Window 객체를 반환하기 때문에 위와 같은 방식들로 this를 호출했다. (이해가 되지 않는다면 this 바인딩에 대한 포스팅을 읽어보자!)

const obj3 = {
  a () {
    console.log(this);

    const b = () => {
      console.log(this)
    }

    b();
  }
}

하지만 Arrow Function을 사용하면 위와 같이 바인딩하지 않고 쓸 수 있다.

※ Arrow Function 또한 함수 스코프를 가진다.

Concise Method와 Arrow Function의 공통점

  • prototype 프로퍼티가 존재하지 않는다 -> 생성자 함수로 사용할 수 없다
  • arguments, callee가 hidden 처리되어 있고, invoke 해야만 값을 얻을 수 있다

본 포스팅은 인프런 강의 Javascript ES6+ 제대로 알아보기를 공부하며 정리한 포스팅입니다!