TIL - What's new in ES6

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 old

3. 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 2007

ES5에서는 객체의 value를 변수에 담기 위해서는 객체.property로 접근해서 하나하나 변수명을 const 를 쓰면서 지정해줬어야 하는데,
ES6에서는 한번에 값을 할당해서 더 간단한 코드를 작성 할 수 있게 되었다.

참고

• MDN 기본매개변수(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters)
• Poiemaweb