26장 ES6 함수의 추가 기능

26.1 함수의 구분

ES6 이전의 모든 함수는 구분이 없이 사용되었다. 일반 함수이자 생성자 함수로서 호출이 가능했다.

ES6 에서는 사용 목적에 따라 함수를 세 가지 종류로 명확히 구분했다.

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

• 일반 함수 = 함수 선언문 or 함수 표현식으로 정의한 함수

---

26.2 메서드

ES6 에서 메서드는 메서드 축약표현으로 정의된 함수의 역할로 명확히 정의된다.

const obj = {
	x: 1,
	// 메서드
	foo(){return this.x}

	// 일반 함수
	bar: function(){return this.x}
}

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

// ES6에서 메서드는 인스턴스를 생성할 수 없는 non-constructor이기에 생성자 함수로서 호출할 수 없다.
new obj.foo() // TypeError
new obj.bar() // bar{}

또한 메서드는 내부 슬롯 [[HomeObject]]를 갖기에 super 키워드를 사용할 수 있다.

---

26.3 화살표 함수

화살표 함수는 function 키워드 대신 화살표(⇒)를 사용해 간략하게 함수를 정의할 수 있다. 표현만이 아닌 내부 동작도 간략하다. 특히 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.

26.3.1 화살표 함수 정의

함수 정의

화살표 함수는 함수 표현식으로 정의해야 한다.

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

매개변수 선언

매개변수에 따라 선언방식이 다르다.

// 매개변수가 없거나 2개 이상인 경우 소괄호 사용
const arrow = () => {...}
const arrow = (x,y) => {...}

// 매개변수가 1개인 경우 소괄호 생략 가능
const arrow = x => {...}

함수 몸체 정의

함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감사는 중괄호 생략 가능

// concise body
// 값으로 평가될 수 있는 표현식인 문이라 암묵적으로 반환된다.
const power = x => x**2

// block body
const power = x => {return x ** 2}

// 같은 결과임

함수 몸체를 감싸는 중괄호를 생략한 경우 함수 몸체 내부의 문이 표현식이 아닌 문이라면 에러가 발생한다. 표현식이 아닌 문은 반환할 수 없기 때문이다 !

const arrow = () => const x = 1 // SyntaxError
// 아래와 같이 해석되기에 에러가 발생한다.
const arrow = () => {return const x = 1}

// 따라서 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다.
const arrow = () => { const x = 1}

객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호로 감싸 주어야 한다. 객체 리터럴을 소괄호로 감싸지 않으면 중괄호를 함수 몸체를 감싸는 중괄호로 해석하기 때문이다 !

const create = (id, content) => ({id, content})
create(1, 'JS') // {id: 1, content: 'JS'}

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.

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

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

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

3. 화살표 함수는 함수 자체의 this.argument, super, new.target 바인딩을 갖지 않는다. ⇒ 스코프 체인을 통해 상위 스코프의 것을 참조한다.

26.3.3 this

화살표 함수의 this 는 일반 함수의 this 와 다르게 동작한다. 이는 콜백 함수의 this 가 외부 함수의 this 와 다르기 때문에 발생하는 문제를 해결하기 위해 의도적으로 설계되었다.

화살표 함수는 함수 자체의 this 바인딩이 없기에 상위 스코프의 this 를 그대로 참조한다. 이를 lexical this라 한다.

26.3.4 super

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

26.3.5 arguments

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

화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

---

26.4 Rest 파라미터

26.4.1 기본 문법

Rest 파라미터는 매개변수 이름 앞에 … 을 붙여 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

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

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

일반 매개변수와 Rest 파라미터를 함께 사용할 수 있으며, 순차적으로 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터여야 한다.

26.4.2 Rest 파라미터와 arguments 객체

ES6 에서는 rest 파라미터를 사용해 가변 인자 함수의 목록을 배열로 전달 받을 수 있다. 이를 통해 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있다.

function sum(...args){
	return args.reduce((acc,cur)=>acc+cur,0)
}
console.log(sum(1,2,3,4,5)) // 15

함수와 메서드는 Rest 파라미터와 arguments 객체를 모두 사용할 수 있다. 하지만 화살표 함수는 자체의 arguments 객체가 없기에 반드시 Rest 파라미터를 사용해야 한다.

---

26.5 매개변수 기본값

JS의 함수는 특이하다. 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는게 바람직하지만 그렇지 않은 경우에도 에러가 발생하지 않는다. JS 엔진이 매개변수의 개수와 인수의 개수를 체크하지 않기 때문이다.

하지만 인수가 전달되지 않은 매개변수의 값은 undefined로, 의도하지 않은 결과가 발생할 수 있다.

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

console.log(sum(1)) // NaN

따라서 인수가 전달되지 않는 경우에 매개변수에 기본값을 할당할 필요가 있다.(방어 코드)

function sum(x,y){
	x = x || 0;
	y = y || 0;

	return x + y
}

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

ES6 에서 도입된 매개변수의 기본값을 사용하면 간소화 할 수 있다.

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

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

Rest 파라미터에는 기본값을 지정할 수 없고, 설정한 기본값은 arguments 객체에 영향을 주지 않는다.