소개

es6의 문법을 지원하지않는 브라우저들이 꽤나 있다
이런 브라우저에서는 자바스크립트의 편하고 강력한 최신문법을 사용하지 못한다
하지만 Babel을 이용한다면, 최신 코드들을 호환이 되는 코드로 변환시켜준다.
따라서 우리는 구형 브라우저에서도 새로운 자바스크립트 문법들을 사용할 수 있게된다.

예제

화살표함수는 es6의 문법이다 따라서 구형브라우저에서는 호환이 안될 수 있다. 그럴 경우 바벨을 사용해 호환성을 맞춰준다.

cdn : <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

jsx 또한 구형 코드로 변환시켜준다. 위와 같은 바벨의 cdn코드를 넣어주고,
scrpit 태그의 type 속성에 text/babel 을 삽입시켜주면된다.

Array.of() : 매개변수에 원하는 값을 넣으면 Array로 변환해 리턴해준다.

Array.from() : array like object를 array로 바꿔준다.

buttons는 array 처럼 보이지만 array like object다. 따라서 forEach같은 함수를 사용하지 못한다.

다음과 같이 Array.from()을 사용하면 buttons를 array로 바꿔준다.

결과

let과 const.

• 그동안 var를 써왔다. var는 function scope를 가진다. function 안에서 정의하면 외부의 접근을 막아주지만, if안이나 try-catch문 등등 에서 선언하면 외부에서도 접근이 가능하다. 따라서 프로그램의 덩치가 커지거나, 다른 개발자와 협업시 var는 오염될 수 있다. 이러한 단점을 막기위해 let과 const가 생겼다.

• var 와는 달리, const 와 let 은 block scope 를 가진다. 그 말인 즉슨, {} 안에서 선언한다면 외부에서 접근이 불가능하다는 뜻이다.

• let 은 재할당이 가능하고, const 는 재할당이 불가능하다.

const lastName = 'hong';
//lastName = 'kim'     //<-- 불가능하다.
let   firstName = 'eunmo';
firstName = 'chulsoo'; //<--  가능하다.

그렇다고 const 가 불변인 것은 아니다. 다음의 예제를 보자.

const Person = {
    name : 'eunmo hong',
    gender : 'male',
    age : 29;
};

Person.age = 19;      // <-- 가능하다.
//Person = "123456"   // <-- 불가능하다.

결론. 기본적으로 const를 쓰되, 필요할 때만 let을 쓰자. var는 쓰지말자.