ES란?

ECMAScript를 줄여서 부르는 말로 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화한 것이다.

ES5,ES6은 버전 숫자를 붙여 ECMAScript를 줄여 쓰는 것이다.

ES5와 ES6의 차이

변수 선언

ES5

var만 있다. 재할당과 재선언에 굉장히 자유롭고 호이스팅 문제가 있다.

호이스팅이란
코드가 실행되기 전에 변수선언/함수선언이 해당 유효범위의 최상단으로 끌어 올려진 것과 같은 현상을 말한다.

ES6

호이스팅 문제를 해결하기 위해 let, const가 추가 되었다.
let은 한번 선언된 변수의 이름과 동일한 이름으로 선언할 수 없다. 값은 재할당 할 수 있다.
const는 재선언 재할당 모두 불가능하다.

화살표 함수

ES6부터 등장한 함수 선언법

ES5

var func = function(arg1, arg2) {console.log("ES5")}

ES6

let func = (arg1, arg2) => {console.log("ES6")}

템플릿 리터럴

ES6부터 등장한 백틱으로 문자열을 감싸 표현하는 기능

ES5

var name = "이름"
var age = 20
console.log("저의 이름은" + name + "이고, 나이는 " + age +"입니다.")

ES6

let name = "이름"
let age = 20
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`)

Default parameter

ES5

var person = function(name) {
  var name = name || "이름"
  return name
}

ES6

let person = function(name="이름") {
  return name
}

클래스

ES6부터 class 키워드 사용 가능

ES5

프로토타입 기반

var Add = function(arg1, arg2) {
  this.arg1 = arg1
  this.arg2 = arg2
}
Add.prototype.calc = function() {
  return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2)
}
var num = new Add(3,5)
console.log(num.calc())

ES6

class Add {
  constructor(arg1, arg2) {
    this.arg1 = arg1
    this.arg2 = arg2
  }
  calc() {
    return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2)
  }
}
let num = new Add(3, 5)
console.log(num.calc())

---

참고
ECMAScript란? ES5와 ES6의 차이