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

모던 자바스크립트 Deep Dive 도서의 26장을 정리하였습니다.

26.1 함수의 구분

ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시 말해, ES6 이전의 모든 함수는 callable이면서 contructor이다.

var foo = function () {}

foo() // undefined
new foo() // foo {}

객체에 바인딩된 함수도 callable이면서 contructor이다.

사용 목적에 따른 함수 구분

ES6 함수의 구분	contructor	prototype	super	arguments
일반 함수(Normal)	O	O	X	O
메서드(Method)	X	X	O	O
화살표 함수(Arrow)	X	X	X	X

26.2 메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

const obj = {
  x: 1,
  // foo는 메서드
  foo() { return this.x; }
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수다.
  bar: function() {
    return this.x;
  }
}

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

ES6에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor다.

그리고 ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super 참조는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하므로 내부 슬롯 [[HomeObject]]를 갖는 ES6 메서드는 super 키워드를 사용할 수 있다.

// 26-09
const base = {
  name: 'Lee',
  sayHi() {
    return `Hi ${this.name}`
  }
}

const derived = {
  __proto__: base,
  // sayHi는 ES6 메서드이기 때문에 [[HomeObject]]를 진다.
  // sayHi의 [[HomeObject]]는 sayHi가 바인딩된 객체인 derived를 가리키고
  // super는 sayHi의 [[HomeObject]]의 프로토타입인 base를 가리킨다.
  sayHi() {
    return `${super.sayHi()}. how are you doing?`
  }
}

console.log(derived.sayHi()) // Hi! Lee. how are you doing?

26.3 화살표 함수

화살표 함수는 function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.

26.3.1 화살표 함수 정의

// 함수 정의
const multiply = (x, y) => x * y
multiply(2,3) // 6

// 매개변수 선언
const arrow = (x, y) => { ... }
const arrow = x => { ... }
const arrow = () => { ... }

// 함수 몸체 정의
const power = x => x ** 2
power(2) // 4
const arrow = () => {
  const x = 1
}

// 객체 리터럴 반환
const create = (id, content) => ({ id, content })

// 즉시 실행 함수
const person = (name = > ({
  sayHi() {
    return `Hi~ ${name}` 
  }
}))('Lee')

// 화살표 함수도 일급 객체이므로 map, filter, reduce에 인수로 전달 가능
[1, 2, 3].map(v => v * 2)

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

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-contructor다.
2. 중복된 매개변수 이름을 선언할 수 없다.
3. 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

26.3.3 this

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 this이다. 화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많다.

*함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix
  }
  
  add(arr) {
    // 이 장소에서 this는 prefix를 가리킨다.
    return arr.map(function (item) {
      // 여기서 this는 undefined를 가리킨다.
      return this.prefix + item
      // TypeError: Cannot read property 'prefix' of undefined
    })
  }
}

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

위의 문제를 ES6에서는 화살표 함수를 사용하여 "콜백 함수 내부의 this 문제"를 해결할 수 있다.

화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다.

26.3.4 super

화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 super을 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.

super

• [[HomeObject]]를 갖는 ES6 메서드 내에서만 사용할 수 있는 키워드

26.3.5 arguments

화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다. super와 마찬가지로 상위 스코프의 arguments를 참조한다.

(function() {
  const foo = () =>  console.log(arguments) // [Arguments] { '0': 1, '1': 2}
  래ㅐ(3, 4)
}(1, 2)
 
const foo = () => console.log(arguments)
foo(1, 2) // ReferenceError: arguments is not defined

26.4 Rest 파라미터

26.4.2 Rest 파라미터와 arguments 객체

arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 반환해야 하는 번거로움이 있었다.

function sum(...args) {
  // args를 rest 파라미터를 사용하여 배열로 직접 받아서 사용하면 가능하다.
  var array = Array.prototype.slice.call(arguments)
  
  return array.reduce((pre, cur) => pre + cur, 0)
}

26.5 매개변수 기본값

인수가 전달되지 않은 매개변수의 값은 undefined이다.

ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.

function sum(x = 0, y = 0) {
  return x + y
}

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

*rest 파라미터에는 기본값을 지정할 수 없다.

Ref

• 이웅모 저, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스