Function VS Arrow Function

Function VS Arrow Function

공부 하게 된 이유

Vue2 Vuex에서 Cookie에 접근을 할려고 했으나 arrow function 특성상 "this"가 window 기준이 아닌 상위 scope를 가리키게 되어 Cookie에 접근이 안되는 불상사가 생기게 되어 차이를 알고자 공부하게 되었습니다.

Function

전통적인 함수표현(function)

    function fun(){

    }

Arrow Function

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

사용법

일반 사용법

    // 1.
    param => expression
    // 2.
    (param) => expression
    // 3.
    (param1, paramN) => expression
    // 4.
    param => {
        statements
    }
    // 5.
    (param1, paramN) => {
        statements
    }

응용 사용법

    // Traditional anonymous function
    (function (a, b) {
        return a + b + 100;
    });

    // Arrow function
    (a, b) => a + b + 100;

    const a = 4;
    const b = 2;

    // Traditional anonymous function (no parameters)
    (function() {
        return a + b + 100;
    });

    // Arrow function (no arguments)
    () => a + b + 100;

    // Traditional Function
    function bob(a) {
        return a + 100;
    }

    // Arrow Function
    const bob2 = (a) => a + 100;

    const func = (x) => x * x;
    // concise body syntax, implied "return"

    const func2 = (x, y) => {
        return x + y;
    };
    // with block body, explicit "return" needed

arguments 사용 가능 여부

   function fun() {
        console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }

    fun(1, 2, 3);

    const arrFun = () => {
        console.log(arguments); // Uncaught ReferenceError: arguments is not defined
    };

    fun(1, 2, 3);

특징

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

---

Arrow VS Function 차이점

1. this

자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.

• 일반함수

일반 함수에서 this가 바인딩 되는 상황이다.

1. 함수 실행시에는 전역(window) 객체를 가리킨다.
2. 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
3. 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

• 화살표 함수

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.
(Lexical this) 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

• ex)

• //일반 함수
    function fun() {
        this.name = "하이";
        return {
            name: "바이",
            speak: function () {
                console.log(this.name);
            },
        };
    }
    // 화살표 함수
    function arrFun() {
        this.name = "하이";
        return {
            name: "바이",
            speak: () => {
                console.log(this.name);
            },
        };
    }
  
    const fun1 = new fun();
    fun1.speak(); // 바이
    const fun2 = new arrFun();
    fun2.speak(); // 하이

일반함수로 사용했을때는 바이가 찍히며, 자신이 종속된 객체를 this로 가리킨다.
화살표함수를 사용했을때는 하이가 찍히며, 자신이 종속된 인스턴스를 가리킨다.

Arrow function expressions
화살표 함수와 일반 함수의 차이