🖋️ 화살표 함수와 Function 함수 비교하기

• 두가지 방법 모두 함수를 정의할 수 있다!

• 하지만, 차이점이 꽤나 존재합니다.

• 화살표 함수

  • this 바인딩

    • 화살표 함수에는 this 가 존재하지 않습니다.
    • 대신 정의된 시점에서 상위 범위에서 this 를 상속합니다. (this 가 상위 범위에 존재한다는 전제)

  • 암시적 반환

    • 중괄호가 없는 단일 표현식인 경우 암시적으로 'return' 없이 값을 반환

  • 생성자 사용 불가

    • 화살표 함수는 new 키워드와 함께 사용 불가
    • 자체 this 컨텍스트가 없기 때문에 오류가 발생

  • '인수' 개체 없음

    • 자체 기능은 없음
    • 하지만 나머지 매개변수를 사용하면 비슷한 기능 구현 가능

const arrowFunc = (a, b) => a + b;

const arrowFunc = (...args) => console.log(args);

• Function 함수

  • 함수 선언, 함수 표현식 여러가지 방법 선언 가능

    • 화살표 함수에는 this 가 존재하지 않습니다.
    • 대신 정의된 시점에서 상위 범위에서 this 를 상속합니다. (this 가 상위 범위에 존재한다는 전제)

  • this 바인딩

    • 기존 함수에는 함수가 호출되는 방식에 따라 변경될 수 있는 자체 this 컨텍스트 존재

  • 생성자

    • new 를 통해 생성자로 사용 가능
    • "프로토타입"에서 상속되는 새 객체 인스턴스 생성

  • 인수 객체

    • 자체적으로 함수에 전달된 모든 인수를 포함하는 개체 존재

function sum(a, b) { 
   return a + b;
}

const sum = function(a, b) {
   return a + b;
}

function Car(make, model) {
    this.make = make;
    this.model = model;
}
const myCar = new Car('Toyota', 'Corolla');

function func() {
    console.log(arguments);
}

• Function 함수 심화

  • call

    • 주어진 this 값과 개별적으로 제공되는 인수를 사용하여 함수를 호출

  • apply

    • call 과 유사하지만 인수가 배열로 전달

  • bind

    • this 키워드가 제공된 값으로 설정, 새 함수가 호출될 때 제공된 인수에 주어진 일련의 인수가 있는 새 함수 생성

function greet(greeting) {
   console.log(greeting + ', ' + this.name);
}

greet.call({name: "John"}, "Hello"); // "Hello, John"

greet.apply({name: "John"}, ["Hello"]); // "Hello, John"

const greetJohn = greet.bind({name: "John"}, "Hello"); 
greetJohn(); // "Hello, John" 

이 외 Tip ) 모든 객체는 프로토타입을 가지고 있다