1. 2일 전

    Date, JSON 객체

    Date, JSON 객체의 이모저모

  2. 19일 전

    ES6 - Generator

    Generation 함수 사용하기

  3. 26일 전

    ES6 - iteration & for ... of

    iteration과 활용

  4. 1달 전

    ES6 - Symbol

    왜 Symbol이 필요할까?

  5. 1달 전

    ES6 - Rest/Spread 연산자

    코드를 더 간결하게

  6. 2달 전

    ES6 - Promise

    콜백 지옥을 벗어나자

  7. 2달 전

    Webpack(3) - Plugin

    Plugin으로 더 강력한 Webpack

  8. 2달 전

    ES6 화살표 함수

    화살표 함수에 대해 깊게 이해하기

  9. 2달 전

    32. 이벤트

    이벤트 루프

  10. 2달 전

    JS가 객체지향언어라 할 수 있는 이유

    대체가능성, 내적동질성

  11. 3달 전

    Webpack(2) - Loader

    Loader로 다양한 파일 다루기

  12. 3달 전

    비동기 처리

    JavaScript에서 비동기 처리

  13. 3달 전

    19. 클로져

    JavaScript에서 클로저란?

  14. 3달 전

    18. 실행컨텍스트

    JavaScript에서 실행컨텍스트

  15. 3달 전

    17. this

    JavaScript에서 this

  16. 3달 전

    Webpack(1) - 기본편

    Webpack 대한 기본 이해

  17. 4달 전

    Babel(4) - polyfill

    더 많은 브라우저 지원하기

  18. 5달 전

    Babel(3) - 설정편

    설정하는 다양한 방법

  19. 5달 전

    Babel(2) - 실행편

    실습을 통한 더 깊은 이해

  20. 5달 전

    Babel(1) - 기본편

    babel에 대한 기본 이해

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

ES6 화살표 함수

화살표 함수에 대해 깊게 이해하기

featured image thumbnail for post ES6 화살표 함수

Arrow function | PoiemaWeb

화살표 함수는 사람들이 정말 좋아하는 스펙이다.

ES6%203220d8e4282e44ce8c6d79cee20735dc/arrow-function-imageg

Axel Rauschmayer survey on favorite ES6 features

Which ES6 features do you use?

ES6%203220d8e4282e44ce8c6d79cee20735dc/arrow-function-image1.png

Ponyfoo’s survey on the most commonly used ES6 features

Which ES5 features do you use?

ES6%203220d8e4282e44ce8c6d79cee20735dc/arrow-function-image2.png

ES5에서는 부터는 반복문 보다 배열을 순회하는 것을 훨씬 더 좋아함,.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

// 소괄호에도 여러줄로 표현식을 사용할 수 있다.(문은 불가) 맨 마지막 값이 리턴된다.
var k = (x) => (
    console.log(x),
    x = x*x,
    2*x
)
k(3)

const Text = (props) => (
    <div>
        {props.name}{props.age}{props.title}
    </div>
)

ES5이전의 함수와 화살표 함수의 차이점


가장 큰 차이점은 this.

var Dog = function() {
  this.think = "밥 줘";
  this.say = () => this.think;
};

var a = new Dog();
a.say();

생성자로 호출될 수 없음.

arguments가 없음

prototype 프로퍼티를 가지지 않음.

yield 키워드를 사용할 수 없다고 함.

The yield keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.

MDN 예제인데, 위는 되고 아래가 안되는건 너무나 이상하다..

var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

화살표 함수는 연산자 사이에서 사용하려면 이렇게 해줘야 한다.

let callback;

callback = callback || function() {}; // ok

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

callback = callback || (() => {});    // ok

내 생각에 연산자 사이에 화살표 함수에 대해서는 올바로 처리하지 못하는 것이 아닌가 한다...

Operator precedence

How Much Use Is There for Arrow Functions?


  • Use function in the global scope and for Object.prototype properties.
  • Use class for object constructors.
  • Use => everywhere else.

화살표 함수는 객체지향 프로그래밍을 할 수 없다.


이전에 객체 지향 관련해서 전달 드렸던 내용

var Parent = class {
  wrap() {
    this.action();
  }
  action() {
    console.log("Parent");
  }
};
var Child = class extends Parent {
  action() {
    console.log("Child");
  }
};

var a = new Child();
a.action();
a.wrap();

프로토타입 기반 상속으로 변경

var Parent = function() {};
Parent.prototype.wrap = function() {
  this.action();
};
Parent.prototype.action = function() {
  console.log("parent");
};
var Child = function() {
  this.action = () => {
    console.log("Child");
  };
};

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var a = new Child();
a.action();
a.wrap();

함수를 화살표 함수로 변경

var Parent = function() {
  this.wrap = () => this.action();
  this.action = () => console.log("Parent");
};
var Child = function() {
  this.action = () => {
    console.log("Child");
  };
};

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var a = new Child();
a.action();
a.wrap();

테스트 자식만 화살표 함수로

var Parent = function() {};
Parent.prototype.wrap = function() {
  this.action();
};
Parent.prototype.action = function() {
  console.log("parent");
};
var Child = function() {
  this.action = () => {
    console.log("Child");
  };
};

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var a = new Child();
a.action();
a.wrap();

화살표 함수를 쓸때와 안쓸 때??

var Parent = function() {};
Parent.prototype.wrap = function() {
  this.action();
};
Parent.prototype.action = () => {
  console.log("parent");
};
var Child = function() {
  this.action = () => {
    console.log("Child");
  };
};

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var a = new Child();
a.action();
a.wrap();

TMI


coffeeScript 의 언어에서는 =>-> 둘다 존재 한다. => 를 fat arrow, -> 를 thin arrow 라 부른다.

참고


Arrow function expressions

Arrow Functions: Fat and Concise Syntax in JavaScript