[JS] ES6에서 주목할 함수 기능들

ES6 이전의 함수 구분

• 모든 함수는 일반 함수는 물론 생성자 함수로서 호출 가능 (callable, constructor)
• 메서드(객체에 바인딩된 함수) 또한 일반 함수, 생성자 함수로서 호출 가능

1) 함수의 구분

• ES6 부터 함수를 명확히 구분

함수 구분	constructor	prototype	super	arguments
일반 함수	O	O	X	O
메서드	X	X	O	O
화살표 함수	X	X	X	X

1. 메서드

• 메서드 축약 표현으로 정의된 함수(ES6 사양에서 정의 명확히 규정)

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

• 내부 슬롯 [[HomeObject]]
  - 자신을 바인딩한 객체 가리킴
  - super 참조에 사용됨 -> 메서드는 super 키워드 사용 가능

2. 화살표 함수

• 함수 표현식 사용
• 매개변수 1개: 소괄호() 생략 O
• 매개변수 0개: 소괄호 () 생략 X
• 함수 몸체 내부 또한 표현식 사용
• 객체 리터럴 반환 시, 소괄호() 사용
• 콜백 함수 정의할 때 유용

const create = (id, contenet) => ({ id, content });

일반 함수와의 차이

• non-constructor
  - 생성자 함수로서 호출 X
  - prototype 프로퍼티 X, 프로토 타입 X
• 함수 자체의 this, arguments, super, new.target 바인딩 X
  - 참조할 경우, 상위 스코프의 해당 내용을 참조
  

this

this 바인딩

• 함수가 어떻게 호출되었는지에 따라 동적으로 결정(실행되는 시점에 결정)

콜백 함수 내부의 this 문제

class Prefixer {
  constructor(prefix) { this.prefix = prefix }
  
  add(arr) {
    //	여기서 this는 메서드를 호출한 객체 prefixer
    arr.map(function (item) {
      return this.prefix + item;
      // TypeError: Cannot read property 'prefix' of undefined
      // 여기서 this는 undefined
    });
  }
}

const prefixer = new Prefixer('aa');
console.log(prefixer.add(['apple', 'airplane']));

• strict mode 일 때, 일반 함수내에서 호출된 this <- undefined 바인딩
  strict-mode 관련 글

해결 방법

1) this 일단 회피

add(arr) {
  const that = this;
  return arr.map(function (item) {
    return that.prefix + item;
  });
}

2) 두 번째 인수로 this 전달

add(arr) {
  return arr.map(function (item) {
    return this.prefix + item;
  }, this);
}

3) bind 메서드 사용

add(arr) {
  return arr.map(function (item) {
    return this.prefix + item;
  }.bind(this));
}

4) 화살표 함수 사용

• 화살표 함수는 함수 자체의 this 바인딩 X
• 화살표 함수 내부의 this 참조 -> 상위 스코프의 this 그대로 참조

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

• super, arguments 또한 함수 자체 바인딩 X
  -> 상위 스코프 참조

2) Rest 파라미터(나머지 매개변수)

• 함수에 전달된 인수들의 목록을 배열로 전달 받음
• 반드시 마지막 파라미터이어야 함
• 단 하나만 선언 가능
• length 프로퍼티(선언한 매개변수의 개수)에 영향 X

function foo(param, ...rest) {
  console.log(param);		// 1
  console.log(rest);		// [2, 3, 4]
  console.log(foo.length);	// 1
}

foo(1, 2, 3, 4);

arguments 객체

• 함수에 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체
  (실제 배열이 아님)
• 배열 메서드 사용을 위해 배열로 변환해야 함

// 변환 방법 1
function foo() {
  var array = Array.prototype.slice.call(arguments);
  console.log(array);	// [1, 2, 3, 4]
  
// 변환 방법 2  
function foo(...args) {
  console.log(args);	// [1, 2, 3, 4]
}

foo(1, 2, 3, 4);

3) 매개변수 기본값

인수가 전달되지 않은 매개변수의 값: undefined

• 인수를 전달하지 않거나(1) undefined를 전달한 경우(2)에만 유효
• length 프로퍼티(선언한 매개변수의 개수)에 영향 X

function logName(name = 'Lee') {
  console.log(name);
}

logName();		// --- (1) Lee
logName(undefined);	// --- (2) Lee
logName(null);		// null
logName('Kim');		// Kim