[26장] 모던 자바스크립트 Deep Dive - ES6 함수의 추가 기능

26.1 함수의 구분

ES6 이전까지 자바스크립트의 함수는 다양한 목적으로 사용되었으며, 크게 구분되지 않았다. 자바스크립트의 함수는 호출할 때 일반 함수로 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성하는 생성자 함수로도 사용될 수 있으며, 객체에 메서드로 바인딩되어 호출될 수도 있다. 그러나 이러한 함수의 구분이 명확하지 않아 실수나 성능 저하를 유발할 수 있다.

예시:

 

var foo = function () {
    return 1;
}

// 일반적인 함수로서 호출
foo(); // 1

// 생성자 함수로서 호출
new foo(); // foo {}

// 메서드로서 호출
var obj = { foo: foo };
obj.foo(); // 1

함수의 종류:

• Callable: 호출할 수 있는 함수 객체
• Constructor: 인스턴스를 생성할 수 있는 함수 객체
• Non-constructor: 인스턴스를 생성할 수 없는 함수 객체

foo 함수가 메서드로 호출될 때도 마찬가지로 생성자 함수처럼 호출할 수 있기 때문에, ES6 이전의 함수에서는 명확한 구분이 없었다. 특히 콜백 함수의 경우도 constructor로 작용하여 불필요한 프로토타입 객체를 생성하게 된다.

Constructor에 대한 개념

• Constructor: 자바스크립트에서 constructor는 객체를 생성하는 함수이다. 함수 앞에 new 연산자를 붙여 호출하면, 해당 함수는 새로운 객체 인스턴스를 생성한다. 이때 constructor 함수는 자동으로 prototype 객체를 가지며, 생성된 객체는 이 prototype 객체를 상속받는다
• 예시:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('John', 30);
console.log(person1.name); // John

 

26.2 메서드

ES6 이전에는 객체에 바인딩된 함수를 메서드라고 부르곤 했다. 하지만 ES6에서는 메서드를 더 구체적으로 정의하였다. ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미하며, constructor로 호출할 수 없다.

예시:

 

const obj = {
  x: 1,
  // foo는 메서드다.
  foo() { return this.x },
  // bar는 일반 함수다.
  bar: function() { return this.x; }
};

console.log(obj.foo()) // 1
console.log(obj.bar()) // 1

new obj.foo(); // TypeError: obj.foo is not a constructor
new obj.bar(); // bar {}

26.3 화살표 함수

화살표 함수는 function 키워드를 대신하여 =>로 함수를 정의할 수 있는 새로운 문법이다. 화살표 함수는 코드가 간결할 뿐만 아니라, this가 어떻게 동작하는지에 있어서도 차이를 보인다.

화살표 함수 정의:

const multiply = (x, y) => x * y;
console.log(multiply(2, 3)); // 6

매개변수 처리:

화살표 함수는 매개변수가 하나일 경우 소괄호를 생략할 수 있으며, 여러 개일 경우에는 소괄호로 감싼다.

const power = x => x ** 2;
const sum = (a, b) => a + b;

함수 몸체:

화살표 함수의 몸체가 하나의 표현식으로 구성될 경우, 중괄호를 생략하고 해당 값을 바로 반환할 수 있다. 여러 문장으로 이루어진 경우에는 중괄호를 써서 명시적으로 반환해야 한다.

 

// concise body
const power = x => x ** 2;

// block body
const sum = (a, b) => { return a + b };

26.3.1 화살표 함수와 일반 함수의 차이

1. 화살표 함수는 constructor로 호출할 수 없다.

const Foo = () => {}
new Foo(); // TypeError: Foo is not a constructor

1. 매개변수의 중복 선언을 허용하지 않는다.

const arrow = (a, a) => a + a; // SyntaxError: Duplicate parameter name not allowed

1. 화살표 함수는 this, arguments, super, new.target을 바인딩하지 않는다.

화살표 함수는 상위 스코프에서 this, arguments, super를 참조하게 된다.

예시:

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select'])); // ['-webkit-transition', '-webkit-user-select']

26.4 Rest 파라미터

Rest 파라미터는 함수에 전달된 인수들을 배열로 받기 위해 매개변수 앞에 ...을 붙여서 정의한다.

const sum = (...args) => args.reduce((acc, val) => acc + val, 0);
console.log(sum(1, 2, 3)); // 6

26.4.1 Rest 파라미터와 arguments 객체

ES5에서는 arguments 객체를 통해 인수를 받을 수 있었으나, ES6에서는 Rest 파라미터를 사용하여 보다 깔끔하게 처리할 수 있다.

Arguments에 대한 개념

• Arguments: 자바스크립트에서 arguments 객체는 함수가 호출될 때 전달된 인수들을 담고 있는 유사 배열 객체이다. arguments 객체는 모든 함수 내에서 사용 가능하며, 함수의 매개변수보다 더 많은 인수를 처리할 수 있도록 해준다. 하지만 ES6에서 도입된 Rest 파라미터(...args)를 사용하는 것이 더 권장된다.
   

  function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; } console.log(sum(1, 2, 3)); // 6
• 예시:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6

26.5 매개변수 기본값

자바스크립트 함수에서는 매개변수에 값이 전달되지 않으면 undefined가 할당된다. 이를 방지하기 위해 기본값을 설정할 수 있다.

const greet = (name = 'Guest') => `Hello, ${name}!`;
console.log(greet()); // Hello, Guest!

---

전체 내용 요약

이번 장에서는 자바스크립트의 다양한 함수 종류와 그 차이점에 대해 알아보았다.

ES6 이전에는 함수의 구분이 명확하지 않았으나, ES6에서는 함수, 메서드, 화살표 함수 등을 명확하게 구분하여 사용한다. 특히, 메서드는 생성자 함수로 호출할 수 없고, 화살표 함수는 this, arguments, super 등을 상위 스코프에서 참조하게 된다. 또한, Rest 파라미터와 매개변수 기본값을 통해 함수의 매개변수를 보다 유연하게 처리할 수 있다.

---

이해 확인 문제

1. 일반 함수와 메서드의 차이를 설명하라.
   • 답: 일반 함수는 new를 사용하여 인스턴스를 생성할 수 있지만, 메서드는 new로 호출할 수 없다.
2. 화살표 함수의 특징 중 this에 관한 설명을 하라.
   • 답: 화살표 함수는 자체적으로 this 바인딩을 가지지 않으며, 상위 스코프에서 this를 참조한다.
3. 화살표 함수는 왜 constructor로 호출할 수 없는가?
   • 답: 화살표 함수는 prototype을 가지지 않아서 인스턴스를 생성할 수 없기 때문이다.
4. 다음 코드를 실행한 후, foo 함수의 결과를 예측하라.

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

foo(1, 2, 3);

• 답: arguments 객체는 함수에 전달된 인수들을 담고 있는 유사 배열 객체이다. 따라서 { '0': 1, '1': 2, '2': 3 }이 출력된다.

1. 다음 코드에서 문제점을 찾아 수정하라.

const sum = (a, a) => a + a;

• 답: 화살표 함수에서 매개변수의 중복 선언은 허용되지 않는다. 이를 수정하려면 매개변수 이름을 다르게 해야 한다.
  const sum = (a, b) => a + b;