ES6의 특징

ES6로 넘어오면서 여러가지 특징들이 많이 바뀌었다.
한번 확인해보도록 하자.

[let,const]

기본적으로 자바스크립트는 var로 모든 변수값을 제어해 왔다.
var의 단점에 대해서 한번 확인해보도록 하자.

if(false){
    var x = "하이";
  }
  console.log(x) //undefined

위의 코드를 보게 되면 console은 함수의 스코프에서 벗어난 x를 콘솔로 찍으려 하고있다.
하지만 var는 호이스팅으로 인해서 값이 undefined로 초기화가 된다.
하지만 undefined는 이미 그 자체로도 값이기 때문에 변수 x가 제대로 값이 선언 되어 있지 않음에도 정상적으로 동작을 하는 것을 확인할 수 있다.
이러한 단점 떄문에 let과 const 가 존재한다.

if(false){
let x = "하이"
}
console.log(x); //Reference Error

하지만 let 과 const를 쓰게 되면, x를 참조 할 수 없기 때문에 호이스팅이 일어나긴 하지만, TDZ에 걸림으로 레퍼런스 에러를 출력하게 됨으로써 개발자가 잘못된 변수의 호출을 사전에 방지해준다.

[화살표 함수]

ES6로 넘어오면서 화살표 함수가 도입이 되었다.
함수를 선언할때 function() 이러한 형식이 아닌, 좀더 편하게 함수를 사용하고자 도입된 함수 이다.

const aaa=()=>{
  console.log("안녕하세요");
}
aaa(); //안녕하세요

화살표 함수는 그안에 콜백도 동일하게 화살표 함수로 사용 할 수 있다.
그럼으로 콜백으로 함수를 인자로 받는 map이나 filter를 사용할때 좀더 코드가 간결해 진다.

const a = [1,2,3];
a.filter((el)=>{
return el
})

[향상된 객체 리터럴]

키와 벨류가 서로 일치한 경우에는 간단하게 생략이 가능하다.

const a = 'Apple';
const b = 'Banana';
 
const es5 = { a: a, b: b };
const es6 = { a, b};

[템플릿 표기법]

기존에 템플릿 표기법이 없을때는 + 로 서로 문자열을 연결시켜주거나 데이터 바인딩한 값을 + 로 서로 연결을 시켜주어야 했다. 템플릿이 나오면서 백틱으로 좀더 편하게 데이터를 표현 할 수있다.

const hello = 'Hello';
const to = 'Everybody!';
 
console.log(`${hello} ${to}`);

[비구조화 할당]

[배열]

let foo = ["one", "two", "three"];
 
let [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

let fruit = {
    a: 'Apple',
    b: 'Banana',
}
let { a, b } = fruit;
console.log(a);    // 'Apple'
console.log(b);    // 'Banana'