[JavaScript]ES6부터 추가된 함수의 기능
해당 post 는 모던 자바스크립트 입문 책에 있는 내용을 인용한 post 입니다.
모던 자바스크립트 입문 / 길벗
아소 히로시 지음 / 서재원 옮김
ES6?
- ES6(ECMAScript 6)는 ECMA International에서 2015년에 ECMAScript 6 개정판을 발표하였는데 이를 줄여서 ES6라고 합니다..
ECMA International에서는 JavaScript 가 다양한 웹 브라우저들의 지원을 받기 시작하면서 JavaScript가 다양한 웹 브라우저에서
공통되게 잘 작동하기 위해 표준 규격이 필요해졌는데, 이 때 ECMA Internatonal에서 ECMAScript Standard 라 불리는 스크립트 표준을 만들게 되었습니다.
JavaScript는 ECMAScript와 BOM(Browers Object Model)과 DOM(Document Object Model) 이라는 1개의 코어와, 2개의 모델로 이루어져 있는데,
ECMAScript와 JavaScript는 비슷한 뜻으로 자주 쓰이지만 이 두개는 작은 차이를 가지고 있다는 것을 기억해야 합니다.
ES6 지원 브라우저
- ES(ECMAScript)는 다양한 웹 브라우저에서 공통되게 잘 작동하기 위한 표준 규격이라고 했지만 곧 지원을 종료하게 될 브라우저인 Internet Explorer 를 아예 지원하지 않습니다.
현재 지원되는 브라우저는 아래의 표와 같습니다.
| Chrome 58 | Internet Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| 2017 1월 | 2016 8월 | 2017 3월 | 2016 7월 | 2018 8월 |
- 만약 IE(Internet Explorer)에서 ES6를 사용하려면 바벨(babel)을 이용하여 작성한 ES6 구분을 ES5구문으로 변환시켜 동작하게 만들어주어야 합니다.
화살표 함수
- ES6부터 추가된 화살표 함수 표현식입니다. 화살표 함수(화살표 함수 표현식)는 함수 리터럴(익명 함수) 의 단축 표현입니다.
그러나 함수 리터럴과 완전히 같은 건 아니므로 주의가 필요합니다.
// 화살표 함수 표현식의 기본 작성법
// 기존 방식
var Test = function(x) {
return x * x;
}
// 화살표 함수 방식
var Test = (x) => {
return x * x;
}
// 여러개의 인수가 있는 경우
var Test = (x, y, z) => {
return x, y, z;
}
// 인수가 하나만 있는 경우 (인수를 묶는 괄호 생략 가능)
var Test = x => {
return x * x;
}
// 인수가 없는 경우 (인수가 하나만 있는 경우와는 반대로 괄호 생략이 불가능)
var Test = () => {
return;
}
// 함수 몸통 안의 문장이 return뿐이면 중괄호와 return 키워드 생략 가능
var Test = (x) => x * x;
// 함수 몸통 안에 return 문장만 있더라도 함수의 반환값이 객체 리터럴이면 객체 리터럴을 그룹 연산자로 묶는다
var f = (a, b) => ({x: a, y: b});
// 화살표 함수를 즉시 실행 함수(IIFF) 로 사용하기
(x => x * x)(3);
함수 리터럴과 화살표 함수의 차이
- 화살표 함수와 함수 리터럴은 아래의 목록과 같은 차이가 있습니다.
- this의 값이 함수를 정의 할 때 결정된다.
- 함수 리터럴로 정의한 함수의 this 값은 함수를 호출할 때 결정되지만, 화살표 함수의 this 값은 함수를 정의할 때 결정됩니다.
// 예제 코드1 var obj = { say: function() { console.log(this); // 결과 값 [object Object] var f = function() { console.log(this); // 결과 값 [object Window] } f(); var a = () => { console.log(this); // 결과 값 [object Object] } a(); } } // 예제 코드2 var f = function() { console.log(this.name); } var a = () => { console.log(this.name); } var Test = { name: 'JS'}; f.call(Test); // 'JS'; a.call(Test); // ''; - arguments 변수가 없다.
- 화살표 함수 안에응 arguments 변수가 정의되어 있지 않아 사용이 불가능 합니다.
var f = () => { console.log(arguments); } f(); // ReferenceError: arguments is not defined
- 화살표 함수 안에응 arguments 변수가 정의되어 있지 않아 사용이 불가능 합니다.
- 생성자로 사용할 수 없다.
- 화살표 함수 앞에 new 연산자를 붙여서 호출할 수 없습니다.
var Person = (name, age) => { this.name = name; this.age - age; }; var Test = new Person('Kim', 30); // TypeError: Person is not a constructor
- 화살표 함수 앞에 new 연산자를 붙여서 호출할 수 없습니다.
- yield 키워드를 사용할 수 없다.
- 화살표 함수 안에서는 yield 키워드를 사용할 수 없습니다. 따라서 화살표 함수는 제너레이터로 사용할 수 없습니다.
- this의 값이 함수를 정의 할 때 결정된다.
| ES6 함수의 구분 | constructor | prototype | super | arguments |
|---|---|---|---|---|
| 일반 함수(Normal) | O | O | X | O |
| 메소드(Method) | X | X | O | O |
| 화살표 함수(Arrow) | X | X | X | X |
인수에 추가된 기능
- ES6부터는 함수의 인자가 들어가는 부분이 … 을 입력하면 그만큼의 인수를 배열로 받을 수 있습니다.
… 으로 표현한 인자를 가리켜 나머지 매개변수(Rest Parameters) 라고 부릅니다
let f = (a, b, ...args) => {
console.log(a, b, args);
}
f(1, 2, 3, 4, 5, 6);
// 1 2 [3, 4, 5, 6]
- ES5 까지는 함수에서 가변 인수를 이용하려면 arguments 변수를 사용해야 했습니다. 하지만 arguments는 배열이 아닌
유사 배열 객체 이므로 forEach 등의 배열 메서드로 배열로의 변환을 거쳐야 했지만 나머지 매개변수(Rest Parameters) 는
인수를 배열로 받기 때문에 덜 번거롭습니다.
또 화살표 함수 안에서는 arguments를 사용할 수 없지만 나머지 매개변수를 사용하면 화살표 함수 안에서도 가변 인수를 이용할 수 있습니다.
var sum = (...args) => {
for (var i=0, s=0; i < args.length; i++) s+=args[i];
return s;
};
sum (1, 2, 3, 4, 5);
// 15
- ES6 부터는 함수의 인자에 대입(=) 연산자를 사용해서 기본값을 설정할 수 있습니다.
기본값을 설정한 인자에 호응하는 인수를 생략하거나 undefined 를 넘기면 대입 연산자 우변의 값이 기본값이 됩니다.
let mutyply = (a, b=1) => {
return a * b;
}
mutiply(3);
// 3
mutiply(3, 2);
// 6
이터레이터
- 이터레이터(Iterator)란 반복 처리(iteration)가 가능한 객체를 말합니다. 아래의 코드가 그 예 인데
var a = [5, 4, 3]; a.forEach(function(var)) { console.log(val); } // 5 // 4 // 3 - 해당 코드는 forEach 메서드가 배열의 요소를 꺼내어 그 값을 함수의 인수로 넘기고, 그 작업이 끝나면 배열의
다음 요소를 꺼내 함수의 인수로 넘기는 작업을 반복합니다. 이 작업은 내부적으로 처리되므로 개발자는 각 처리 단계를 제어할 수 없는데
ES6부터는 추가된 이터레이터를 사용하여 개발자가 반복 처리를 단계별로 제어할 수 있게 됬습니다.
// 일반적인 이터레이터 예제 코드
var a = [5, 4, 3];
var iter = a [Symbol.iterator]();
console.log(iter.next());
// Object {value: 5, done: false}
console.log(iter.next());
// Object {value: 4, done: false}
console.log(iter.next());
// Object {value: 3, done: false}
console.log(iter.next());
// Object {value: undefined, done: true}
console.log(iter.next());
// Object {value: undefined, done: true}
console.log(iter.next());
// Object {value: undefined, done: true}
- 위의 코드처럼 일반적인 이터레이터를 보면 iter 의 next 메서드를 호출할 때 마다 이터레이터 리절드(iterator result) 라는 객체가 반환됩니다.
이터레이터 리절트는 value와 done 프로퍼티를 가지는 객체입니다.
next 메서드가 호출될 때 마다 value 프로퍼티에는 차례대로 꺼내진 배열 요소의 값이 저장되고 done 프로퍼티에는 요소의 열거가 끝는지를 뜻하는 논리값이 저장됩니다. - ES6의 이터레이터는 일반적으로 다음 두가지 항목을 만족하는 객체입니다.
- next 메서드를 가진다.
- next 메서드의 반환값은 value 프로퍼티와 done 프로퍼티를 가진 객체이다.
이때 value에는 꺼낸 값이 저장되고 done에는 반복이 끝났는지를 뜻하는 논리값이 저장된다.
Comments