ES5 / ES6

JavaScript의 ES5 / ES6을 알아보자

ES란?

ECMAScript 의 약어
자바스크립트의 표준 규격을 나태는 용어로 뒤의 숫자는 버전이다. // ES5(2009년) ES6(2015년)
크로스 브라우진 이슈를 해결하고자 JavaScript를 표준화 함

ES5와 ES6의 대표적인 몇 가지 차이

변수 선언

ES5 -> var
ES6 -> let, const 추가

 	 재선언	재할당		   Block scope			Function scope
var	  O			O		외부에서 내부 참조 가능	외부에서 내부 참조 불가
let	  X			O		외부에서 내부 참조 불가	외부에서 내부 참조 불가
const X			X		외부에서 내부 참조 불가	외부에서 내부 참조 불가

var를 사용 시 생기는 여러가지 문제점

• 중복선언이 가능해 값이 예상하지 못 한 결과를 출력 할 수 있다.
• 호이스팅 문제
  등 이 있어 ES6 이후에는 const 혹은 let 을 주로 사용한다.
  var,let,const 참고 링크

this

ES5같은 경우 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
ES6에서의 this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

화살표 함수

ES6 부터 등장한 함수 선언법 / 함수의 표현이 좀 더 간결해졌다
함수 내부에서 this가 전역객체를 바라보는 문제 때문에 도입

• 예시
  ES5
  var func = function(arg1, arg2) {console.log("ES5")}
  ES6
  let func = (arg1, arg2) => {console.log("ES6")}

템플릿 리터럴

es6 부터 새롭게 등장
백틱을 사용하여 문자열을 감싸 표현하는 기능
${variable} 형식으로 사용하여 표현식 삽입 가능
백틱 사용 시 줄바꿈 부분 편하게 가능

` JAVASCRIPT
    Hello! ES6! `
입력 시 /n 등이 없어도 공백 및 줄바꿈 적용

클래스의 사용

es5는 프로토타입 기반의 객체지향 프로그래밍이었으나 es6부터는 class 기반의 객체지향 프로그래밍 가능

등등 ES5 -> ES6으로 업데이트 되는 과정에서 많은 부분이 개선