자바스크립트의 대표적인 함수 정의 문법 두가지에 대해 알고 있나요?

자바스크립트의 대표적인 함수 정의 문법 두가지에 대해 알고 있나요?

• function 키워드를 이용해 함수를 정의할 수 있습니다.
• 괄호와 중괄호만을 이용해 (() => {}) 화살표 함수라 불리는 arrow function 문법으로 함수를 정의할 수 있습니다.

function 키워드로 함수를 선언하면 arrow function 과 어떤 점이 다른가요?

function 키워드는 생성자로도 쓰일 수 있으며, prototype 프로퍼티를 갖습니다.

• function 키워드는 함수 선언에도 이용되지만, user-defined object 를 만드는데도 이용됩니다.
• new 연산자를 앞에 붙이고 해당 함수를 호출하면, prototype 의 constructor 를 호출하여 user-defined object 를 생성합니다.
  • 해당 함수의 prototype 이 user-defined object 의 __proto__ 에 할당됩니다.

function Car() {
  this.name = "차";
  this.start = function () {
    return "부르으응";
  };
  this.break = function () {
    return "끼이이익";
  };
  this.horn = function () {
    return "빵빵";
  };
}

const car = new Car();

console.log(car.name); // 차
console.log(car.start()); // 부르으응
console.log(car.break()); // 끼이이익
console.log(Car.prototype); // {constructor: ƒ} -> prototype 에 new 연산자를 이용하기 위한 생성자가 있습니다.
console.log(Car.__proto__ === Function.__proto__); // true

ES5 에서 프로토타입을 이용한 상속을 구현하는데도 쓰였습니다.

ES6 에서 정식 스펙으로 클래스가 도입되기 전에 상속과 다형성을 구현하려면 프로토타입을 이용하는 방식 밖에는 없었습니다.

function Tesla() {
  this.name = "전기차";
  this.start = function () {
    return "위이이잉";
  };
}

const tesla = new Tesla();
Object.setPrototypeOf(tesla, new Car());

console.log(tesla.name); // 전기차
console.log(tesla.start()); // 위이이잉
console.log(tesla.break()); // 끼이이익 -> 직접 구현하지 않고 상속받은 메서드
console.log(tesla.__proto__); // Car {name: '차', start: ƒ, break: ƒ, horn: ƒ}

MDN - 프로토타입을 이용한 상속

그 외에도 부가적인 기능들이 있습니다.

• arguments 오브젝트는 인자로 들어온 값을 배열로 묶어줍니다.
• 자동으로 this 를 바인딩 해줍니다.
• new.target 은 함수를 new 로 호출했는지 알 수 있습니다.

function foo() {
  if (!new.target) {
    throw new Error("new 를 이용해 호출해주세요!");
  }
}

foo(); // Error: new 를 이용해 호출해주세요!

아쉽게도 현대 자바스크립트에서는 function 키워드를 멀리하는 것이 좋다고 생각합니다.

• non-strict 모드에서 Nested 형태로 잘못 사용했을 때, 호이스팅으로 인해 동작 예측이 어려울 수 있습니다.
• 현대 자바스크립트에서 필요 없는 부가적인 기능을 제공하느라, 화살표 함수보다 메모리를 많이 먹습니다.
  • 이젠 user-defined object 나 상속을 이용하고 싶으면 class 를 사용하면 되고, 순수하게 함수를 정의하고 싶다면 arrow function 을 이용하면 됩니다.
• function 키워드로 함수 이름을 중복으로 선언해도 알 길이 없습니다.
  • 아무런 경고를 해주지 않습니다.
  • 쉐도잉이 발생할 수 있습니다.

클린코드에서 얘기하는 SRP(Single Responsibility Principal) 에도 function 키워드는 잘 맞지 않습니다.

오직 제너레이터를 만들 때만 * 과 함께 function 키워드를 사용할 일이 있다고 생각합니다.

arrow function 으로 함수를 선언한다면 어떠한 특징을 가지고 있나요?

arrow function 은 생성자를 고려하지 않고 순수하게 함수 정의의 역할만 합니다.

화살표 함수는 function 과 다르게 user-defined object 와 전혀 연관이 없습니다.

• 화살표 함수는 this, arguments, new.target 을 갖지 않습니다.
  • 그래서 function 키워드로 선언한 함수보다 가볍습니다.

const Car = () => {};
console.log(Car.prototype); // undefined -> new 키워드로 활용할 수 없는 대신 더 가볍다
console.log(Car.__proto__ === Function.__proto__); // 던더 프로토에 Function.__proto__ 를 갖는 것은 같다.

arguments 는 현대 자바스크립트에서 ... 문법으로 더 쉽게 파라미터를 뭉칠 수 있게 되어 사실 필요가 없어졌습니다.

마지막으로 function 과 arrow function 의 공통점

• 기본으로 프로토타입 체인에 Function.__proto__ 를 가집니다. (__proto__ 에 Function.__proto__ 가 들어있습니다.)
  • 이 프로토타입 체인에는 this 를 바인딩하기 위한 apply(), call(), bind() 등의 내장 메서드가 들어있습니다.