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

함수의 구분

ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.

• 즉, 모든 함수는 callable이면서 constructor이었다.
• 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 다음 세 가지 종류로 명확하게 구분했다.

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

메서드

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

• ES6 사양에서 정의한 메서드 (이하 ES6 메서드)는 인스턴스를 생성할 수 없는 non-constructor이다.
• 따라서 ES6 메서드는 생성자 함수로서 호출할 수 없다. 

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

• ES6 메서드는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다. 
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다.
  • ES6 메서드가 아닌 함수는 super 키워드를 사용할 수 없다. 

화살표 함수

function 키워드 대신 화살표 (=>, fat arrow)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의한다.

• 표현만 간략한 것이 아니라 내부 동작도 기존의 함수보다 간략하다. 
• 특히 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다. 

✅화살표 함수 정의

📍함수 정의

• 화살표 함수는 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다.
• 호출 방식은 기존 함수와 동일하다. 

const multiply = (x, y) => x * y; 
multiply(2, 3); // -> 6

📍매개변수 선언

• 매개변수가 여러 개인 경우 소괄호 ( ) 안에 매개변수를 선언한다.
• 매개변수가 한 개인 경우 소괄호 ( )를 생략할 수 있다.
• 매개변수가 없는 경우 소괄호 ( )를 생략할 수 없다. 

const arrow = (x, y) => { ... };
const arrow = x => { ... };
const arrow = ( ) => { ... };

📍함수 몸체 정의

• 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 { }를 생략할 수 있다.
• 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다. 

// concise body 
const power = x => x ** 2; 
power(2); // 4 
// 위 표현은 다음과 동일하다.
// block body
const power = x => { return x ** 2; };

• 함수 몸체를 감싸는 중괄호 { }를 생략한 경우 함수 몸체 내부의 문이 표현식이 아닌 문이라면 반환을 할 수 없기 때문에 에러가 발생한다. 
• 함수 몸체가 하나의 문으로 구성된다 해도 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다. 
• 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ( )로 감싸 주어야 한다.

const create = (id, content) => ({ id, content }); 
create(1, 'JavaScript'); // {id: 1, content: "JavaScript"}

// 위 표현은 다음과 동일히다． 
const create = (id, content) => { return { id, content }; };

• 함수 몸체가 여러 개의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 { }를 생략할 수 없다.
• 이때 반환값이 있다면 명시적으로 반환해야 한다.

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

• 화살표 함수도 즉시 실행 함수로 사용할 수 있다.

const person = (name => ({ 
	sayHi() { return `Hi? My name is ${name}.`; } 
}))('Lee');

console.log(person.sayHi()); // Hi? My name is Lee.

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

1️⃣ 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.

2️⃣ 중복된 매개변수 이름을 선언할 수 없다.

3️⃣ 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

✅this

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

 📍화살표 함수에서 동작하는 this

• 콜백 함수 내부의 this가 외부 함수의 this와 다르기 때문에 발생하는 문제를 해결하기 위해 의도적으로 일반 함수와 다르게 설계되었다. 
• 일반 함수를 정의할 때에는 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 
• ES6에서는 화살표 함수를 사용하여 "콜백 함수 내부의 this 문제"를 해결할 수 있다.

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']

• 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.
• 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조하는데, 이를 lexical this라 한다. 
  • 이는 렉시컬 스코프와 같이 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 것을 의미한다. 
• 프로퍼티에 할당한 화살표 함수도 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.
• 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 Function.prototype.call, Function.prototype.apply, Function.prototype.bind 메서드를 사용해도 화살표 함수 내부의 this를 교체할 수 없다. 

window.x = 1; 

const normal = function () { return this.x; }; 
const arrow = () => this.x; 

console.log(normal.call({ x: 10 })); // 10 
console.log(arrow.call({ x: 10 })); // 1

• 메서드를 화살표 함수로 정의하는 것은 피해야 한다. 
  • 여기에서의 메서드는 ES6 메서드가 아닌 일반적인 의미의 메서드를 말한다. 
  • 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다.
• 프로토타입 객체의 프로퍼티에 화살표 함수를 할당하는 경우도 동일한 문제가 발생한다.
  • 프로퍼티를 동적 추가할 때는 ES6 메서드 정의를 사용할 수 없으므로 일반 함수를 할당한다.
  • 일반 함수가 아닌 ES6 메서드를 동적 추가하고 싶다면 객쳬 리터럴을 바인딩하고 프로토타입의 constructor 프로퍼티와 생성자 함수 간의 연결을 재설정한다.
  • 클래스 필드 정의 제안을 사용하여 클래스 필드에 화살표 함수를 할당할 수도 있다.
  • 클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아니라 인스턴스 메서드가 된다.
  • 따라서 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다.

✅super

• 화살표 함수는 함수 자쳬의 super 바인딩을 갖지 않는다.
• 따라서 화살표 함수 내부에서 $uper를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.
• super는 내부 슬롯 [[HomeObject]] 를 갖는 ES6 메서드 내에서만 사용할 수 있는 키워드이다.

class Base { 
    constructor(name) { 
    	this.name = name; 
    } 
    sayHi() { 
    	return `Hi! ${this.name}`; 
    } 
}

class Derived extends Base { 
	// 화살표 함수의 super는 상위 스코프인 constructor의 super를 가리킨다． 
	sayHi = () => `${super.sayHi()} how are you doing?`; 
}

const derived = new Derived('Lee'); 
console.log(derived.sayHi()); // Hi! Lee how are you doing?

✅arguments

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

(function () { 
    // 회살표 함수 foo의 arguments는 상위 스코프인 즉시 실행 함수의 arguments룔 가리킨다.
    const foo = () => console.log(arguments); // [Arguments] { '0': 1, '1': 2 }
    foo(3, 4); 
}(1, 2));

// 화살표 함수 foo의 arguments는 상위 스코프인 전역의 arguments를 가리킨다.
// 하지만 전역에는 arguments 객체가 존재하지 않는다. arguments 객체는 함수 내부에서만 유효하다． 
const foo = () => console.log(arguments);
foo(1, 2); // ReferenceError: arguments is not defined

• arguments 객쳬는 함수를 정의할 때 매개변수의 개수롤 확정할 수 없는 가변 인자 함수를 구현할 때 유용하지만 화살표 함수에서는 arguments 객쳬를 사용할 수 없다.
• 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

Rest 파라미터

Rest 파라미터 (나머지 매개변수)는 매개변수 이름 앞에 세개의 점 … 을 붙여서 정의한 매개변수를 의미한다.

✅기본 문법

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo( ... rest) { 
    // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터다． 
    console.log(rest); // [ 1, 2, 3, 4, 5 ] 
} 

foo(1, 2, 3, 4, 5);

• 일반 매개변수와 Rest 파라미터는 함께 사용할 수 있다.
  • 이때 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.
• Rest 파라미터는 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다.
• 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.
• Rest 파라미터는 단 하나만 선언할 수 있다.
• Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.

✅Rest 파라미터와 arguments 객체

• arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 하는 번거로움이 있었다.
• ES6에서는 rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다 .
• 이를 통해 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.
• 하지만 화살표 함수는 함수 자체의 arguments 객체를 갖지 않기 때문에 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다. 

매개변수 기본값

• 매개변수에 인수가 전달되었는지 확인하여 인수가 전달되지 않은 경우 매개변수에 기본값을 할당할 필요가 있다.
• 즉, 방어 코드가 필요하다. 
• ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다. 
• 매개변수 기본값은 매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효하다.

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

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

• 앞서 살펴본 Rest 파라미터에는 기본값을 지정할 수 없다.
• 매개변수 기본값은 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티와 arguments 객체에 아무런 영향을 주지 않는다.

function sum(x, y = 0) { 
	console.log(arguments); 
} 

console.log(sum.length); // 1

sum(1); // Arguments { '0': 1 }
sum(1, 2); // Arguments { '0': 1, '1': 2 }