ES6는 ECMAScript2015 또는 ECMAScript6로 2015년 도입된 자바스크립트 버전입니다. ES6 이전 버전들에서 문제가 있던 것들을 보완하고 해결한 자바스크립트 버전으로 많은 개발 환경들이 ES6에 맞춰지게 되었습니다. 따라서, ES6에 대해 많은 관심과 주목을 하게 되었습니다. 지금부터 ES6에 추가된 함수 기능에 대해 알아보도록 하겠습니다.
함수의 구분
ES6 이전까지 함수의 별다른 구분은 존재하지 않았습니다. 여러 호출 방법을 통해 함수를 사용하여 코드의 제약이 존재하지 않아 편리한 것처럼 보일 수 있지만, 이는 잘못된 코드 작성 같은 실수를 유발하여 성능 저하로 이어질 수 있습니다.
ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없어 호출 방식에 특별한 제약이 존재하지 않고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성할 수 있었습니다. 이러한 문제를 해결하기 위해 ES6에서는 사용 목적에 따라 함수를 일반 함수, 메서드, 화살표 함수로 구분하였습니다.
일반 함수는 함수 선언문 또는 함수 표현식으로 정의한 함수로 ES6 이전의 함수와 큰 차이는 존재하지 않습니다.
메서드
ES6에서 메서드는 메서드 축약 표현으로 정의된 함수를 의미합니다.
const obj = {
x: 1,
foo() {return this.x}
};메서드는 인스턴스를 생성할 수 없는 non-constructor입니다. 따라서, prototype 프로퍼티가 존재하지 않으며 프로토타입도 생성하지 않습니다. 메서드는 자신을 바인딩 한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 가지며, 이를 통해 super 키워드를 사용할 수 있습니다.
화살표 함수
화살표 함수는 function 키워드 대신 화살표를 사용하여 간략한 함수 정의가 가능합니다. 화살표 함수는 인스턴스를 생성할 수 없어 prototype 프로퍼티가 없으며 프로토타입도 생성하지 않습니다. 또한, 중복된 매개변수 이름을 선언할 수 없고 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않습니다. 함수 내부에서 this, arguments, super, new.target을 참조하면 스코프 체인을 따라 상위 스코프의 this, arguments, super, new.target을 참조합니다.
화살표 함수의 this는 일반 함수의 this와 다르게 동작합니다. 콜백 함수 내부의 this와 외부 함수의 this가 서로 다른 값을 가리켜 에러를 발생시키는 문제가 존재합니다. ES6에서는 이를 해결하기 위해 화살표 함수 자체의 this 바인딩을 갖지 않아 this 참조 시 상위 스코프의 this를 참조하게 됩니다. 이를 lexical this라고 합니다.
또한 화살표 함수는 super, arguments 바인딩을 갖지 않습니다. 따라서, 화살표 함수 내부에서 참조하면 counstructor 내부의 super를 참조하거나 상위 스코프의 arguments를 참조합니다.
Rest 파라미터
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받습니다. 매개 변수 이름 앞에 점 3개를 붙여 정의합니다. 일반적인 매개 변수와 같이 사용할 수 있으며, 함수에 전달되는 인수들은 일반 매개 변수와 Rest 파라미터에 순차적으로 할당됩니다. 함수에 전달되는 일반 매개 변수를 제외하고 나머지 인수들로 Rest 파라미터에 할당되기 때문에 Rest 파라미터는 마지막에 위치해야 하며, 한 개의 Rest 파라미터만 선언할 수 있습니다.
ES6 이전에는 arguments 객체를 통해 인수를 전달받아 특정 변환을 통해 배열처럼 사용할 수 있었습니다. ES6에서 Rest 파라미터가 지원된 이후 번거로운 과정이 사라져 편리하게 매개 변수를 활용 가능해졌습니다.
매개 변수 기본값
함수 호출 시 전달되는 인수의 개수와 매개 변수의 개수가 달라도 에러를 발생하지 않습니다. 이는 자바스크립트 엔진이 매개 변수 개수와 인수 개수를 체크하지 않기 때문입니다. 매개 변수 개수보다 적은 인수를 전달할 경우 값을 전달받지 못한 매개 변수는 undefined 값을 가지게 됩니다. 이는 의도치 않는 결과를 낳을 수 있습니다. 따라서 ES6에서는 이를 방지하기 위해 매개 변수의 기본값을 지원합니다. 매개 변수의 기본값 설정을 통해 매개변수 개수와 일치하지 않은 인수 전달 시 설정된 기본값을 사용합니다.
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 26_ES6 함수의 추가 기능(p.469 - 491)