[ js ] ES5 vs ES6 차이

 

ES5 vs ES6 

---

# 변수 선언 방식의 차이

▶ ES5 : var 만 존재 

재할당과 재선언에 자유로움 
호이스팅 문제

 

★ 호이스팅 : 코드가 실행되기 전 변수선언 | 함수선언이 해당 유효범위의 최상단으로 끌어 올려지는 것과 같은 현상

 

▶ ES6 : let , const 추가 

호이스팅 문제를 해결하기 위해 let , const 추가 
let : 선언된 변수는 동일한 이름으로 선언 x , 재할당은 o 
const : 재선언 , 재할당 x  

 

변수	스코프	재할당	재선언
var	함수 스코프	가능	가능
let	블록 스코프	가능	불가능
const	블록 스코프	불가능	불가능

 

// var 
console.log(americano);
var americano = 'Americano is the most delicious coffee';

-> output : undefined

// let 
console.log(smoothies);
let smoothies = 'Smoothies are healthy drinks';

-> output : ReferenceError : Cannot access 'smoothies' before initialization

// const 
console.log(tea);
const tea = 'tea is delicious hot.';

-> output : ReferenceError : Cannot access 'tea' before initialization

---

# 템플릿 리터럴 ( template literal ) 

▶ ES6 : 백틱 (`) 을 활용하여 표현식을 자유자재로 사용 가능

// ES5 
let coffeeName = 'americano';
let answer = coffeeName+'is delicious';
console.log(answer);

--> output : americano is delicious

// ES6 : template literal 
let coffeeName = 'americano';
let answer = `${coffeeName} is delicious`;
console.log(answer);

--> output : americano is delicious

// ES6 : template literal change line
let coffeeName = 'americano';
let answer = `${coffeeName} is 
delicious`;
console.log(answer);

--> output : americano is 
delicious

---

# 화살표 함수 ( arrow function ) 

▶ ES6 : 화살표 함수를 사용하여 간결하게 표현 가능 

// ES5 

function fc(k){
    return k;
}

// ES6 

const fc = (k) => `${k}`;

---

# 배열 다루는 방법 ( array ) 

▶ ES5 : for loop 

▶ ES6 : forEach loop , for ~ of loop 

// ES5 ( for loop )

const array = ['a','b','c','d','e'];
for(let i=0; i < array.length ; i ++){
    console.log(array[i]);
}


// ES6 

// forEach loop 
const array = ['a','b','c','d','e'];
array.forEach((i,idx)=>{
    console.log(`item ${i}`);
    console.log(`index ${idx}`);
})

// for ~ of loop
for(let i of array){
    console.log(i);
}

---

# 구조 분해 할당 ( destructuring assignment ) 

▶ ES5 : 배열의 각 인덱스 값들을 변수에 담기 위해서는 다음처럼 진행

// ES5

let array =  [1,2,3,4,5];
let a = array[0];
let b = array[1];

console.log(a);

--> output : 1

console.log(b);

--> output : 2

 

▶ ES6 : 배열이나 객체 내 변수들을 편하고 쉽게 만들어 주는 구조 분해 할당 문법

// ES6 

// 배열에서 사용 
let [a,b,c,d] = [1,2,3,4];

console.log(a);

--> output : 1

// 객체에서 사용 
const person = {

    name : 'kim',
    age  : 30,
    address : 'seoul'

}

const {name , age , address} = person;
console.log(name,age,address);

--> output : kim 30 seoul

// alias 사용
const { name: name1 , age : age1 , address: address1} = person;
console.log(name1 , age1 , address1);

--> output : kim 30 seoul

---

# 스프레드 연산자 ( spread 연산자 ) ▶ ES5

// ES5 

function compare (a,b){
    return a - b;
}

let result = compare.apply(null,[1,2]);
console.log(result);

// output : -1

 

▶ ES6

// ES6 

let result = compare(...[1,2]);
// 스프레드 연산자가 배열 [1,2]를 unpack
// compare() 함수에서 a가 1 , b가 2로 할당됩니다.

console.log(result);

// output : -1

 

 

★ 배열 push () 메서드를 쓰는 방식에서의 차이

 

▶ ES5

// ES5 

let fruits = ['apple','banana','orange'];
let moreFruits = ['pear','strawberry'];

[].push.apply(fruits,moreFruits);

console.log(fruits);
// [ 'apple', 'banana', 'orange', 'pear', 'strawberry' ]

 

▶ ES6

// ES6

let fruits = ['apple','banana','orange'];
let moreFruits = ['pear','strawberry'];

fruits.push(...moreFruits);

console.log(fruits);
// [ 'apple', 'banana', 'orange', 'pear', 'strawberry' ]

 

 

★ 배열 ( array ) 과 스프레드 연산자 ( spread operator ) 활용

 

▶ ES6

// ES6

// 1. 배열 초기화 생성

let initialChars = ['A','B'];
let chars = [...initialChars , 'C','D'];
console.log(chars);
// [ 'A', 'B', 'C', 'D' ]


// 2. 배열 합치기 

let numbers = [1,2];
let moreNumbers = [3,4];
let allNumbers = [...numbers , ...moreNumbers];

console.log(allNumbers);
//[ 1, 2, 3, 4 ]

// 3. 배열 복사
let scores = [80,70,90];
let copiedScores = [...scores];
console.log(copiedScores);
// [ 80, 70, 90 ]
// 주의 : 스프레드 연산자를 이용한 배열 복사는 "shallow copy" 입니다 !

 

★ 문자열과 스프레드 연산자

▶ ES6

// ES6 
let chars = ['A',...'BC','D'];
console.log(chars);
// [ 'A', 'B', 'C', 'D' ]

---

# 비교 연산자 

// ES5 Vs ES6 비교 연산자 차이

const A = 1;
const B = '1';

// ES5
console.log( A == B); // true

// ES6
console.log( A == B); // true
console.log( A === B); // false

---

# import / Export 

▶ ES5

// ES5 ( require , exports )
// exports
let testModule = {
    hi : function (){
        console.log('hi');
    }, 
    bye : function(){
        console.log('bye');
    }
};

module.exports = testModule;

// require 
let myModule = require('./testModule');
myModule.hi();
myModule.bye();

 

 

▶ ES6

// ES6 : exports , test.js
export const add = (a,b) => a+b;
export const subtract = (a,b) => a-b;

// ES6 : import, app.js
import {add , subtract} from './test'
console.log(add(1,2)); // 3 
console.log(subtract(1,2)) // -1

---

# Class 

▶ ES5

// ES5

function testClass(val){
    this.val = val;
}

testClass.prototype.myMethod = function(){
    // do something 
}

 

▶ ES6

// ES6

class testClass{
    constructor(val){
        this.val = val;
    }

    testMethod(){
        // do something
    }
}

// super를 사용하여 부모 클래스의 생성자를 호출하고 인스턴스 변수를 초기화

class Coffee{
    constructor(name,price){
        this.name = name;
        this.price = price;
    }
}

class Americano extends Coffee {
    constructor(name,price,size){
        super(name,price);
        this.size = size;
    }
}

const myAmericano = new Americano("black",4500,"tall");

console.log(myAmericano.name); // black 
console.log(myAmericano.price); // 4500 
console.log(myAmericano.size); // tall

 

---

# Promise

Promise 4가지 상태 

1. fulfilled : Promise가 성공했을 때 
2. rejected : Promise가 실패했을 때
3. pending : 아직 보류중일 때 ( fulfilled or rejected 되기 전 ) 
4. settled : fulfilled or rejected 상태 후

▶ then

promise.then(
    function(result) { /* 결과(result)를 다룹니다 */ },
    // 첫 번째 인수는 프라미스가 이행되었을 때 실행되는 함수

    function(error) { /* 에러(error)를 다룹니다 */ }
    // 두 번째 인수는 프라미스가 거부되었을 때 실행되는 함수 
  );


// resolve 성공이 되었을 때 
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("완료!"), 1000);
});

// resolve 함수는 .then의 첫 번째 함수(인수)를 실행합니다.
promise.then(
result => alert(result), // 1초 후 "완료!"를 출력
error => alert(error) // 실행되지 않음
);

// reject 실패가 되었을 때 
let promise = new Promise(function(resolve, reject) {
setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// reject 함수는 .then의 두 번째 함수를 실행합니다.
promise.then(
result => alert(result), // 실행되지 않음
error => alert(error) // 1초 후 "Error: 에러 발생!"을 출력
);

 

▶ catch

let promise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("에러 발생!")), 1000);
});
  
// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

 

▶ finally

new Promise((resolve, reject) => {
/* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve, reject를 호출함 */
})
// 성공·실패 여부와 상관없이 프라미스가 처리되면 실행됨
.finally(() => 로딩 인디케이터 중지)
.then(result => result와 err 보여줌 => error 보여줌)