[JavaScript] 화살표 함수 (arrow function expression)

- 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