ES6에 새롭게 추가된 문법들
ES5에서 ES6로 넘어오면서 새롭게 추가된 문법 중 우리에게 많은 영향을 주는 것들 위주로 정리해보았다.
1. 기본함수 매개변수(default function parameter)의 사용
ES6에서는 기본 함수 매개변수를 사용하여
값이 없거나, undefined한 값이 전달될 경우 매개변수 기본값(default)을 설정 할 수 있음
- 문법
function 함수이름 ([param1[=defaultVaule1], [param2[=defaultValue2], [,...,paramN[ = defaultValueN]){
statements
}- 예시
// ES5
function multiply(a,b) {
b = (typeof b !== 'undefined') ? b : 1;
return a*b;
}
multiply(5,2); // 10
multiply(5) // 5
// ES5에서는 multiply 함수에 매개변수 자리에서 매개변수 값을 정의하지 않음
// ES6
function multiply(a,b =1) {
return a*b
}
multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined) // 5 해당 예시에서 undefined값을 넣었음에도 불구하고 multiply 호출은 NAN이 반환되는 것이 아닌, 기본매개변수 값이 정의되어 함수가 숫자로 return값 반환
매개변수자리에서 미리 기본 값을 정의할 수 있음
- 참고
null 값은 기본적인 수학연산에서는 0 값으로 변환된다.
그래서 multiply(5, null); // 0 이 나옴!
근데 null === 0 // false
원래는 존재하지 않는 값이니깐~
2. Template Literal
ES6에서는 backtick을 사용하여, 문자열을 연결하거나 문자열 중간에 표현식을 삽입하여 사용할 수 있다.
복잡한 문자열을 표현할 필요가 없게 되어, 보다 가독성이 좋은 깔끔한 코드를 작성할 수 있다.
- '+' 과 같은 연산자를 사용하지 않아도 간단하게 새로운 문자열을 삽입할 수 있음(문자열 인터폴레이션)
- '\n' 과 같은 연산자를 사용하지 않아도 멀티라인을 나타낼 수 있음.
//ES5
var year = 20;
console.log('I am' + year + 'years old');
// I am 20 years old
//ES6
var year = 20;
console.log(`I am ${year} years old);
// I am 20 years old3. Arrow Function
화살표 함수('=>') 를 사용하여 function / return 키워드를 사용하지 않고 보다 간략하게 함수를 선언 수 있다.
- 화살표함수는 항상 익명함수
// ES5
var pow = function (x) {
return x * x;
};
console.log(pow(10)); // 100
// ES6
const pow = x => x * x;
console.log(pow(10)); // 100
//인자가 하나일 때는 매개변수의 소괄호 생략이 가능 , 두개이상일 때는 생략할 수 없음.-
일반 함수와 화살표 함수의 가장 큰 차이점은 this
: 화살표 함수의 this 는 언제나 상위 스코프의 this를 가리킨다. (원래 함수에서의 this는 window를 가르키게 되어있음, 그래서 ES5에서 우리가 bind를 따로 해줬어야 함)(1) 일반함수의 this
자바스크립트의 경우, 함수 호출방식(호출을 누가했냐에 따라 = 누가 실행했냐)에 의해 this에 바인딩할 객체가 동적으로 결정 됨
(호출방식과 무관하게 this를 고정하기 위해서는 bind라는 method를 이용했어야 함)
let realObj = {
name: 'obj',
func: function() {
console.log(this);
console.log(this.name);
setTimeout(function() {
console.log(this === window);
}, 100);
}
}
realObj.func();
//호출을 한 게, realObj라는 객체임
// So..!!
// console.log(this) 는 realObj 자체
// console.log(this.name)은 realObj
// setTimeOut 함수의 console값은 true
//(setTimeOut의 콜백함수는 전역객체에 바인딩됨) (2) 화살표함수의 this
함수를 선언할 때, this에 바인딩 할 객체가 정적으로 결정됨. 화살표 함수의 this는 언제나 상위 스코프의 this를 가르킴 (Lexical this)
let realObj = {
name: 'obj',
func: function() {
setTimeout(() => {
console.log(this === window);
console.log(this);
}, 100);
}
}
realObj.func();
// 화살표 함수에서의 this는 언제나 상위 스코프의 this를 가리킴
// console.log(this === window) 는 False
// 해당 화살표함수의 this는 realObj 객체를 가르킴4. 비구조화 할당(Destructuring Assignment)
비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)
간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법 !
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 2007ES5에서는 객체의 value를 변수에 담기 위해서는 객체.property로 접근해서 하나하나 변수명을 const 를 쓰면서 지정해줬어야 하는데,
ES6에서는 한번에 값을 할당해서 더 간단한 코드를 작성 할 수 있게 되었다.
참고
