Js ES5 vs ES6 : 문법 주요 차이

1. arrow 지원

• 익숙하면 편하고 간결해진 코드를 작성할 수 있다.

---------- ES5 ----------
1. function getNum() {
  return 10;
}
2. function getArr() {
  return [1, 2, 3];
}
3. function getObj() {
  return { a: 1, b: 2, c: 3 };
}
4. function calcCircleArea(radius) {
  if (!radius) {
    return null;
  } else {
    return Math.PI * radius * radius;
  }
}

---------- ES6 ----------
1. const getNum = () => 10;
2. const getArr = () => [1, 2, 3];
3. const getObj = () => ({ a: 1, b: 2, c: 3 }); 
4. const calcCircleArea = (radius) => {
  if (!radius) {
    return null;
  } else {
    return Math.PI * radius * radius;
  }
};

• this를 바인딩 하지 않고 선언된 scope의 this를 가리킨다는 장점

ES5- 객체 내에 있는 메소드를 실행 시 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 하여도 아무 값이 나오지 않는다.

var thisTest = {
     name : "최 윤진",   
     age : 27,
     info : function() {
          console.log(this)
          console.log(this.name , this.age)

          function innerInfo(){
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

// 실행결과 
// {name: "최 윤진", age: 27, info: ƒ}
// 최 윤진 27
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"

이러한 경우 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근하면 사용하면 된다.

ES6- this 는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.

let thisTest = {
     name : "최 윤진",   
     age : 27,
     info() {
          console.log(this)
          console.log(this.name , this.age)
 
          innerInfo = () =>{
              console.log(this)
              return this.name + ":" + this.age
          }
          return innerInfo()
     }
}

2. 템플릿 리터럴 (Template literals)
-백틱을 사용하면 문자열 데이터를 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다. 이중 따옴표("")나 작은따옴표('')로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능하다.

----------ES5----------
const shoesPrice = 25000
console.log("이 신발의 가격은" + shoesPrice + "원입니다.")
----------ES6----------
const shoesPrice = 25000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다.`)

3. 변수 선언방식

----------ES5----------
var만 존재 ; 변수 선언시 사용됨, 재할당과 재선언에 자유로움

var a = 17;
a = 25;
console.log(a); //25
var a = 50;
console.log(a); //50

----------ES6----------
대부분의 프로그래밍 언어는 블록 레벨 스코프지만, JS는 함수 레벨 스코프
(Function-level scope)를 따른다.
블록 레벨 스코프를 따르는 변수를 선언하기 위해 let, const를 제공한다

let a = 10;
a = 15;
console.log(a); //15
let a = 12; // Identifier 'a' has already been declared

<let vs const>
한번 선언된 변수에 동일한 이름으로 선언 불가,재할당 가능 vs 재할당/재선언 불가

const a = 30;
console.log(a); // 30;
a = 35; // TypeError: Assignment to constant variable.

• 블록 레벨 스코프
  코드 블록 또는 function 스코프 내에서 선언된 변수는 해당 스코프 내에서만 유효하고 해당 스코프 밖에서 안에있는 변수를 참조할 수 없다.쉽게 말하자면, 중괄호({})로 묶인 부분 내부에 선언된 let,const를 중괄호 외부에서 참조할수 없음.
  (* var : function 스코프에서는 내부에 선언된 var를 외부에서 참조할수 없지만 블록스코프 내부에 선언되어 있다면 외부에서 참조가능)

5. 모듈 (import / export 추가)

ES5 - 각 기능별로 js 파일을 나누고 개발,관리하는것 불가능
ES6-import/export로 모듈관리

< Export module >
var testModule = { a: 1, b: 2 };
---------- ES5 ----------
module.exports = testModule;
---------- ES6 ----------
export default testModule;
---------- ES6 (child modules) ----------
export const a = 1;
export const b = 2;

< Import module >
---------- ES5 ----------
var testModule = require(./testModule);
---------- ES6 ----------
import testModule from './testModule';
---------- ES6 (child modules) ----------
import { a, b } from './testModule';

6. 클래스
ES5- 프로토타입을 통해 실현가능
ES6- new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다.
(프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우에 클래스 문법을 사용할 수 있다)

7.callback hell을 해결하기 위해 Promise가 도입

비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태와 값이라는 속성을 갖고 있다. resolve, reject를 호출하여 진행 상태를 결정할 수 있다 promise의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다. then(), catch()는 일의 진행 상태를 나타내는 객체다. promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected일 때는 아무것도 하지 않는다

⑴ 동기
요청과 응답이 동시에일어난다.설계가 간단하고 직관적이지만 응답이 있을때까지 대기
ex) 은행 계좌이체

⑵ 비동기
요청과 응답이 동시에 일어나지 않는다 응답이 오기 전까지 다른 요청이나 작업이 가능

---------- ES5 (callback) ----------
function isEvenNumber(num, callback) {
  if (num % 2 === 0) {
    callback(true);
  } else {
    callback(false);
  }
}
isEvenNumber(10, function(result) {
  if (result) {
    console.log('even number');
  } else {
    console.log('odd number');
  }
});
---------- ES6 (promise) ----------
const isEvenNumber = (num) => {
  return new Promise((resolve, reject) => {
    if (num % 2 === 0) {
      resolve(true);
    } else {
      reject(false);
    }
  });
};
isEvenNumber(10).then((result) => {
  console.log('even number');
}).catch((error) => {
  console.log('odd number');
});