es5-> es6로 넘어오면서 많이 사용되는 문법 중 일부를 소개하고자 한다:)
화살표 함수 (Arrow Function)
- 'function' & 'return' 키워드가 빠지고 ()소괄호로 변경!
인자가 하나일 때는 소괄호 생략이 가능. 인자가 두 개일 때는 생략 xxx.. - arrow function은 익명 함수이다.
//ES5
function() {}
//ES6
() => {}
//ex5
function (name) {
return name.toUpperCase();
}
// ES6
name => name.toUpperCase();- 기존 함수와 가장 큰 차이점은 this 의 바인딩 여부. 화살표 함수를 사용하게 되면서 window를 가르키게 되는 this를 부모함수를 가르키게 함.
React에서 이벤트 핸들러 함수를 바인드할때 화살표 함수를 사용.
function xoxo() {
this.func1 = function() {
console.log("1번",this);
}
this.func2 = function() {
let func3 = () => {
console.log("2번",this);
}
func3();
}
}
let something = new xoxo();
something.func1();
//'1번' xoxo { func1: [Function], func2: [Function] }
something.func2();
//'2번' xoxo { func1: [Function], func2: [Function] }비구조화 할당 (destructuring assignment)
- 배열이나 객체 속성을 분해하여 특정 데이터를 꺼내어 변수로 대입할 수 있는 문법
- 변수 선언시 { } 를 사용
const car = {
type: 'Toyota',
color: 'Silver',
model: 2007
};
// es5
const type = car.type;
const color = car.color;
const model = car.model;
console.log(type, color, model); // Toyota Silver 2007
// es6
const {type, color, model} = car;
console.log(type, color, model); // Toyota Silver 2007템플릿리터럴 (template literal)
역 따옴표(backticks)을 사용하여 문자열을 연결하거나 문자열 중간에 표현식를 삽입하여 사용할 수 있다. 멀티라인( +, \n .. )등을 사용하여 복잡한 문자열을 표현할 필요가 없게되서 코드 가독성을 높이고 엔터를 통해 공백과 개행을 표현 할 수 있게 됨..
const name = "철수";
const job = "developer";
const msg = `제 이름은 ${name} 이고
직업은 ${job} 입니다.`;
console.log(msg);
//
제 이름은 철수 이고
직업은 developer 입니다.
//기본매개변수 (default parameter)
파라미터의 값이 들어오지 않으면 무조건 undefined 가 됐지만, ES6 부터 그 기본값(default) 을 설정할 수 있다.
//es 6
function multiply(a,b =1) {
return a*b
}
multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined) // 5 그 외에 추가된 부분 (class, promise etc..)에 대해선 to be continued...
