ES6 함수의 추가 기능

자바스크립트는 ES6 이전과 이후로 나뉜다. ES6이후 JS의 많은 부분이 바뀌었는데 함수 부분도 마찬가지이다. 먼저 이전의 함수는 생성자함수와 일반 함수의 구분이 없었다. 따라서 모든 함수는 일반함수로서 호출할 수 있으며 생성자 함수로서 new 키워드를 사용해 호출할 수 있었다.

 

이러한 유동성은 성능면에서도 큰 문제를 갖는다. 바로 콜백함수 또는 객체에 바인딩 된 함수 모두 cunstructor를 갖는다는 점이다. 이는 불필요한 프로토타입 객체를 생성하게 되며, 함수의 명확한 구분없이 사용되는 점은 코드의 가독성에도 큰 영향을 미친다. 

 

따라서 ES6 이후 함수의 사용 목적에 따라 세가지 종류로 나누었다. 

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

※ 제너레이트 함수와 async함수는 제외하였습니다.

메서드

메서드는 함수의 한 종류이다. 이전에는 "메서드는 함수이다." 라고만 알고있었는데 메서드의 정확한 정의는 "ES6 사양에서 메서드 축약 표현으로 정의된 함수"이다. 이 때 메서드는 객체에 속한 함수이다. 

 

메서드 축약표현이란 function 키워드를 사용하지 않고 함수를 정의하는 것을 말한다. 이렇게 생성된 메서드는 인스턴스를 생성할 수 없으며 프로토타입 또한 존재하지 않는다. 

 

또한, 자신을 바인딩한 객체를 가리키는 내부슬롯 [[HomeObject]]를 갖는다. 따라서 super 키워드를 사용할 수 있다. 이렇게 객체 내부에서 사용되는 메서드는 본연의 기능 (super)를 추가하고 불필요한 기능 (cunstructor)를 제거했다.

 

화살표 함수

function 키워드 대신 =>를 이용하여 사용하는 함수이다. 기존에는 없었던 문법이지만 ES6 이후 생겼으며 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내에서 this를 사용하면 상위스코프의 this를 참조한다. 이를 lexical this라고 한다. 

 

// 화살표 함수 정의
const add = (a,b) => a + b

Rest 파라미터

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

 

이 때 일반 매개변수와 함께 사용할 수 있으며 인수들은 매개변수와 rest 파라미터에 순차적으로 할당된다.

// rest 파라미터

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

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


// 매개변수와 함께 사용하는 rest 파라미터

function bar(param,...rest){
	console.log(param)	// 1
	console.log(rest)	// [2,3,4,5]
}

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

 

ES6 이전과 이후의 차이점을 공부하기 위해 작성된 글 입니다.

 

이번 단원은 함수의 기능에 초점을 맞춘게 아닌 ES6 이후 변경된 점에 초점을 맞추었기 때문에 함수의 기능을 학습하기 위해 보는것은 추천하지 않습니다.