출처 : NHN 엔터

✅ TOAST UI Front-end Style Guide (ES5 5o ES6+)

var => const, let

• var : 함수 스코프, Hoisting 발생
• const, let : 블록 스코프
  - const : 선언 이후 수정 불가. BUT 프로퍼티는 수정 가능

Arrow function

표현식이 짧아지며, this 바인딩 이슈도 해결해준다.
화살표 함수는 해당 컨텍스트의 this 객체를 바인드 한 함수 표현식처럼 동작.

Class

Prototype의 대체재로 ES6는 클래스를 사용한다.

<script>
class SomeClass {
  static staticClassMethod() {
    // 정적 메서드
  }

  constructor() {
    // 생성자 함수
  }
  
  someMethod() {
    // 클래스 매서드
  }
}

const instance = new SomeClass(); 
instance.someMethod();

SomeClass.staticClassMethod();
</script>

(아직 클래스 문법은 완벽히 이해하지 못 했다. 추가 공부가 필요함!)

짧아진 Object 리터럴

key 텍스트와 value에 올 변수 이름이 같은 경우 한 번만 입력

<script>
const iPhone = '아이폰';
const iPad = '아이패드';
const iMac = '아이맥';

const appleProducts = {iPhone,  iPad,  iMac};
/*
ES5의 경우 굳이 key&value 세트로 적어줘야 했음.
var appleProducts = {
	iPhone : iPhone,
    	iPad : iPad,
	iMac : iMac
}; 
*/
</script>

이후의 내용은 어려워서 일단 보류. JS문법 조금 더 공부 후에 숙지하고자 한다.
멀고도 험한 JS의 세계!