ES5 / ES6

📖 ES5와 ES6의 차이점

1. 변수 선언 방식
   • ES5의 변수 선언 시 var를 사용하며 Function Scope를 가짐
   • ES6에서는 let, const가 추가되었으며 Block Scope를 가짐
2. 함수의 선언 방식
   • ES5는 function fc (){}으로 선언
   • ES6에서는 화살표 함수가 추가되어 const fc () => {} 간결해짐
     (추가로 생략식도 가능함)
3. 문자열 처리 (템플릿 엔진 문자열)
   • ES5에서는 변수를 사용하려면 "이름 :" + name + "임"
   • ES6에서는 백틱을 통해 한줄로 표현가능 '이름 : ${name}임'
4. 객체의 변화
   • ES5에서는 메소드를 사용할때도 key:value로 항상 적어줘야함
   • ES6에서는 간편하게 가능 (코드로 확인하는게 빠름)

var getInfo = function() {
    var name = "솜주먹";
    retrun name;
};
// ES5
var object = {
    getAge : function(){
        return age;
    },
    getInfo : getInfo(),
};

// ES6
let object = {
    getAge(){
        return age;
    },
    getInfo,
};

5. class 추가
6. 구조 분배 할당 사용가능

var person = {
  name: "이름"
  age: 30
}

// ES5
var name = person.name
var age = person.age

// ES6
let {name, age} = person

📖 ES6의 호환성 해결방법

브라우저 별 구동원리 또는 v8엔진의 차이로 인해 호환이 안된다면?

• Babel이라는 도구를 사용하면됨 (바벨이 뭐야..)

크로스 브라우징 : 브라우저 호환성 이슈를 최소화하고 런타임 환경에 맞게 최적화하는 작업

💡 답변

ES6의 호환성 해결방법은?

Babel이라는 트랜스파일러를 사용하면됩니다.
Babel은 ES6형식으로 작성된 JavaScript 코드들을 ES5로 변환해줍니다.

ES6에서 추가된 것은 무엇인가?

let과 const같은 변수의 선언 방식, 화살표 함수와 같은 함수의 선언 방식이 추가되었습니다.
또 class가 추가되었으며 템플릿 엔진 문자열이 추가되어 백틱을 사용할 수 있습니다.
마지막으로 구조 분해 할당이 가능해졌습니다.