- ECMAScript 2015 (ES6)


//===============

//일반 함수

var func1 = function(a, b=2){  return a+b; }


//화살표 함수

const af1 = (a, b=2) => {return a+b;}



//================

*  () 생략가능

-> 인자가 하나인 경우

a  => {return a+1};



* return 생략가능

-> 한줄함수에서 중괄호 {} 를 쓰지 않은 경우

(a, b) => a+b;



- 콜백함수로 활용 예

const arr = [1, 2, 3];

const pow = arr.map(x => x * x);



//=============

* 객체 반환

() => { return { a: 1 }; }

() => ({ a: 1 })  // 소괄호를 사용




//==================

* arguments 사용불가

- 대신 확산연산자(...) 사용으로 같은 기능을 구현 가능


var af = (...args1) => args1.length;

console.log( af(1,2) ); //2




//=======================

* 생성자 함수로 사용 불가

- prototype이 없음



* 객체의 메소드가 될수 없다




//==================

* 화살표 함수의 this

- 항상 현재의 상위 객체와 바인딩 됨 (Lexical Scope)

- 일반함수는 항상 window와 바인딩

var val1 = 1;


    var obj = {

      val1 : 201,

      func1 : function(){

        var that = this;

        console.log("obj-1", val1, this.val1, that.val1);//1 , 201, 201


        //내부 함수

        (function(){

          console.log("obj-fn", val1, this.val1, that.val1);//1 , 1, 201

        })();


        //화살표 함수

        ( ()=>{console.log("obj-af", val1, this.val1, that.val1);}//1 , 201, 201

        )();


      }

    }

- 화살표 함수는 call, applay, bind 메소드를 사용하여 this를 변경할 수 없다.

window.x = 1;

const normal = function () { return this.x; };

const arrow = () => this.x;


console.log(normal.call({ x: 10 })); // 10

console.log(arrow.call({ x: 10 }));  // 1




//============

//참고


https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions


https://poiemaweb.com/es6-arrow-function


https://jeong-pro.tistory.com/110



Posted by 코덴스

댓글을 달아 주세요