화살표 함수 ( arrow functions )
ES6는 함수를 생성하는 => 연산자를 이용해 생성하는 새로운 방식을 제공한다. 이를 화살표함수라고 한다. 보다 짧은 신택스를 가지며, 이는 익명함수이다.
다음과 같은 방식으로 사용한다.
// ES5
var circleArea1 = function(pi, r) {
var area = pi * r * r;
return area;
}
var result1 = circleArea(3.14, 3);
console.log(result1); //Output "28.26"
//ES6
let circleArea2 = (pi, r) => {
let area = pi * r * r;
return area;
}
let result2 = circleArea(3.14, 3);
console.log(result2); //Output "28.26"
let circleArea3 = (pi, r) => pi * r * r;
let result3 = circleArea2(3.14, 3);
console.log(result3); //Output "28.26"circleArea는 변수이며, 익명 화살표함수를 참조한다. 화살표함수 몸체에 한개의 statement만 존재할경우, {}를 안써도 된다.
화살표함수에서의 this
화살표함수에서는 this 키워드의 값은 함수가 정의된 환경에 스코핑된다.
예시를 보자.
var object = {
f1: function(){
console.log(this);
var f2 = function(){ console.log(this); }
f2();
setTimeout(f2, 1000);
}
}
object.f1();
// Object
// Window
// Window기존의 코드를 보면, f1 함수 내부의 this는 함수호출에 따른 this바인딩 방식에 따라 object를 참조한다. f2내부의 this는 window객체의 프로퍼티로 사용되어 window객체를 참조한다.
이제 화살표함수를 사용하면 어떻게 되는지 보자.
var object = {
f1: () => {
console.log(this);
var f2 = () => { console.log(this); }
f2();
setTimeout(f2, 1000);
}
}
object.f1();
// Window
// Window
// Window이상황에서는, f1 내부의 this는 전역스코프에 바인딩된다. 화살표함수에서의 this는 렉시컬환경을 기억하므로, 전역 스코프에서 정의된 f1, f1 스코프내부의 f2 의 this 모두 Window 객체를 참조한다.
기존의 함수와 차이점
화살표함수는 객체의 constructor로 사용될수 없으며 따라서 new연산자와 함께 사용할 수 없다. 문법,this바인딩, new 연산자 외에는 기존의 함수와 모두 일치하며 기존의 함수와 화살표함수 모두 Function constructor의 인스턴스이다.
Object literals
ES6에서는 {} 객체리터럴 방식에서 새로운 방식을 제공한다.
프로퍼티
ES6는 프로퍼티할당에있어서 보다 간편한 문법을 제공한다.
// ES5
var x = 1, y = 2;
var object = {
x: x,
y: y
};
console.log(object.x); //output "1"
// ES6
let x = 1, y = 2;
let object = { x, y };
console.log(object.x); //output "1"프로퍼티명과 값이 일치하는경우, 그냥 한번만 작성하면 된다.
메서드
ES6는 메서드 정의에서도 새로운 문법을 제공한다.
let object = {
myFunction(){
console.log("Hello World!!!"); //Output "Hello World!!!"
}
}
object.myFunction();이 함수는 기존의 메서드 선언 방식과 달리 super 사용이 가능하다.
Computed property name
런타임중에 계산된 프로퍼티 명을 computed porperty 라고 부른다. 이 표현식은 프로퍼티명을 동적으로 찾기 위해 사용된다.
// ES5
var object = {};
object["first"+"Name"] = "Eden";//"firstName" is the property name
//extract
console.log(object["first"+"Name"]); //Output "Eden"
// ES6
let object = {
["first" + "Name"]: "Eden",
};
//extract
console.log(object["first" + "Name"]); //Output "Eden"ES5 에서는, 객체를 생성하고 프로퍼티를 할당하는 식이었다면, ES6에서는 객체 생성과정에서 프로퍼티를 추가할 수 있다.
