- ECMAScript 2015 (ES6)


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

//일반 함수

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


//화살표 함수

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



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

let fn1;

const g=1;


//인자

fn1 = () => g+1     // 인자가 없는 경우

fn1 = a => a+1      // 인자가 1개인 경우, 괄호 생략 가능

fn1 = (a,b) => a+1  // 인자가 2개 이상인 경우, 괄호 생략 불가


//코드 내용

fn1 = a => (a+1) // 코드가 한줄이면: 괄호로 묶거나 생략가능, 결과값 자동 리턴,  return 과 ; 사용 못함

fn1 = a => { return a+1 } // 중괄호로 묶으면: return 생략 불가



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

*  () 생략가능

-> 인자가 하나인 경우

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://poiemaweb.com/es6-arrow-function

- 기본적으로 상위 개체를 참조



* 메소드

- 객체의 메소드로 정의하면 안됨

- 상위의 전역 window를 참조



* prototype



* 생성자 함수



* addEventListener 함수의 콜백 함수

- 상위의 전역 window를 참조




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

//참고


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 codens