ES6의 새로운 문법

우선 변수 선언부터 살펴보자.

1. 변수선언

변수 선언에는 var, let, const가 있다.
일단 이 세개의 차이점을 한번 알아보자.
var는 재선언이 되고 재할당도 된다.
let은 재선언이 안되고 재할당은 된다.
const는 재선언이 안되고 재할당도 안된다.
여기서 재선언, 재할당에 대해서 알아보면

var num = 10;
console.log(num);
var num = 20;
console.log(num);

이렇게 num을 중복으로 선언하는 경우가 재 선언이라고 한다.
var는 재선언이 가능해서 실행시켜보면 터미널에 10 과 20이 뜰 것이다.

var num = 10;
console.log(num);
num = 20;
console.log(num);

이렇게 변수에 값만 바꾸는 경우를 재 할당 이라고 한다.
var는 재할당도 가능해서 실행시켜보면 터미널에 10 과 20이 뜬다.

let num = 10;
console.log(num);
let num = 20;
console.log(num);

이걸 실행시키면 오류가 뜰것이다. 왜냐하면 let은 재 선언이 불가능 하기 때문이다.

let num = 10;
console.log(num);
num = 20;
console.log(num);

하지만 이걸 실행시키면 10과 20이 잘 뜬다. let은 재 선언은 불가능 하지만 재 할당은 가능 하기 때문이다.

const num = 10;
console.log(num);
const num = 20;
console.log(num);

이걸 실행 시키면 오류가 뜰 것이다. 왜냐하면 const는 재 선언이 불가능 하기 때문이다.

const num = 10;
console.log(num);
num = 20;
console.log(num);

이걸 실행 시켜도 오류가 뜰것이다. 왜냐하면 const는 재 할당도 안되기 때문이다.
따라서 재 선언이 필요한 경우는 var을 사용하고, 재할당이 필요한 경우는 let을 사용하고,
변하지 않는 값을 사용 할 때는 const를 사용하면 된다.

2. 호이스팅

호이스팅이란 javascript에서 코드를 실행하기 전 변수 및 함수 선언이 최상단으로 끌어 올려지는 현상이다.
예제를 보면서 진행하겠다.

var num1 = 10;
console.log(num1);
console.log(num2);
var num2 = 20;
console.log(num2);

이렇게 코드를 작성한다. 호이스팅이 없다면 3번째 줄에서 선언하지 않은 변수를 썻으니 에러가 날 것이다.
하지만 javascript는 호이스팅이 있어서 에러가 나지않고 undefined가 뜨게된다.
변수가 선언은 되었으나 값이 없다는 뜻이다. 결국 값은 10 undefined 20 이렇게 세줄이 뜨는것이다.
잘 이해가 안된다면 밑에 다시 풀어서 쓴 코드를 본다.

var num1;
var num2;
num1 = 10;
console.log(num1);
console.log(num2);
num2 = 20;
console.log(num2);

이렇게 되는 것이다.
호이스팅 때문에 var변수가 영향을 많이 받아서 var 대신 let이나 const를 사용하는 것을 권장한다.

3. for

for에는 4가지가 있다.
for loop, for of, for in, forEach.
각각 특징을 살펴보도록 한다.

1) for loop

for loop는 전에 봤던 for문이다. 전에 봤으니 간단한 예제 하나 보고 넘어 가도록 하겠다.

let list = [1,"kang",3,"hyungu",5];

for (let i = 0 ; i < list.length; i++) {
  console.log(list[i]);
}

이렇게 간단하게 짜보았다. list.length는 list 변수에 원소가 몇개가 있는지 알려주는 것이다.
이렇게 하면 리스트에 들어있는게 5개 이므로 i가 5보다 작으면 계속 반복 되는것이다.
반복 할 때 마다 i 값을 1 증가 시킨다.
실행을 시키면 터미널에 리스트의 값들이 하나씩 다 뜨게 된다.

2) for of

for of 는 배열의 원소를 하나씩 가져올 수 있는 것 이다.
위 방법과 다르게 배열의 길이를 알아야 한다는 불편함이 없다.
배열의 원소 수 만큼 알아서 반복된다. 예제를 한번 보겠다.

let list = [1,"kang",3,"hyun",5];
for (let li of list) {
  console.log(li);
}

for 안에 변수( li) 하나를 넣어 주고 of 리스트이름(list) 을 해주게 되면 넣어준 변수에 list 의 원소들이 하나씩 저장이 된다.
그 저장된 값을 console.log로 출력을 해준 것이다.
이걸 실행하면 원소들이 하나씩 순서대로 뜨게 된다.

3) for in

for in 은 배열에 들어있는 원소들의 순서를 가져온다.
그 순서를 가지고 배열의 원소를 뽑아 낼 수 있다.

let list = [1,"kang",3,"hyun",5];
for (let li in list) {
  console.log(li);
  console.log(list[li]);
}

for 안에 변수(li) 하나를 넣어주고 in 리스트이름(list) 을 넣어주게 되면 넣어준 변수에 list의 원소들 번호가 하나씩 저장이된다.
그 저장된 값을 console.log로 출력을 해준다.
그리고 그 원소들의 번호를 가지고 원소들을 빼기위해 list[li]도 해준다.
이걸 실행 시키면 숫자와 리스트에 있는 원소 값이 차례대로 하나씩 뜨게 될 것이다.

4) for each

for each는 다른것들과 생김새가 약간 다르다.
실제 동작은 for of와 비슷 하다고 보면 된다.

let list = [1,"kang",3,"hyun",5];
list.forEach(l => {
  console.log(l);
});

이런식으로 작성을 하면된다.
리스트이름.forEach를 하고 괄호 안에 변수 하나를 넣어주고 애로우 함수로 처리해준다. 애로우 함수는 다음장에 나온다.
그리고 console.log로 아까 넣어준 변수를 넣어주면 리스트에 값을 하나씩 보여준다.

4. Arrow Function

Arrow Function은 화살표(=>)가 있다고 해서 Arrow Function이라고 불린다.
Arrow Function은 함수가 짧아지는 장점이 있어서 사용을 한다.
예제를 한번 보겠다.

function message(a) {
  console.log(a);
}
const arrowmessage = (a) => {
  console.log(a);
}
const arrowfirst = (a) => console.log(a);
message("hello");
arrowmessage("hi");
arrowfirst("hihi");

첫번째 함수는 일반적인 함수 형태이다.
두번째 함수는 애로우 함수 형태이다.
세번째 함수는 애로우 함수인데, 한줄로 끝나는 경우에는 중괄호를 생략 할 수 있다는것을 보여준다.
이 코드를 실행하면 세개의 함수가 호출되서 작동이 잘 되는 것을 확인 할 수 있다.

5. Promise

Promise란 Javascript에서 비동기를 처리할 때 주로 사용되는 문법이다.
ES6에서 처음 등장하여 지금까지 많은 부분에서 사용되고 있다.
콜백지옥을 해결하였다.
이제 promise를 한번 사용 해 보자.

const Ready = true;

const promise = new Promise((resolve, reject) => {
  console.log("promise is created");
  if (Ready) {
    resolve("ready");
  }
  else {
    reject("not ready");
  }
}
promise
  .then(messsage => {
    console.log(messsage);
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("Done");
  });

일단 promise를 만들어 준다. 실행만 되면 무조건 promise is created가 뜨도록 console.log로 해준다.
그리고 Ready가 참이면 resolve("ready")를, 거짓이면 reject("not ready")를 해준다.
그 밑으로 promise를 실행하고 참이어서 resolve가 되면 .then으로 가서 resolve의 메세지를 출력한다.
그리고 .finally로 가서 "Done"을 실행한다.
만약 거짓이라면 reject가 되서 .catch로 들어가서 not ready가 나오게 된다.
그리고 .finally로 가서 "Done"을 실행한다.

6. async/await

async/await이란 promise를 좀 더 편하게 사용할 수 있게 해주는 문법이다.
예시를 살펴보자.

async function f() {

    let promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve("완료!"), 1000);
    });
    
    console.log('before await');
    let result = await promise; 
    console.log('after await');
    console.log(result);
  }
f();

일단 함수 앞에 async를 붙인다. 그러면 이 함수는 항상 promise를 반환한다.
그리고 promise를 만들어서 넣는다.
그 다음 확인하기위해 console.log로 before await를 출력해본다.
그리고 await promise를 써서 promise가 호출되는지 본다.
promise에 1초 기다리는게 있으니까 1초가 기다려지고, after await를 출력하게 된다.
그리고 await promise를 넣은 result를 출력해준다. 그러면 완료!가 뜰것이다.

여기까지 EC6에 추가된 문법들을 알아 보았다 다음은 웹 프레임워크인 Express를 알아보도록 하자.