Frontend/js
[ js ] ES5 vs ES6 차이
IT grow.
2024. 4. 22. 18:49
반응형
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가지 상태
- fulfilled : Promise가 성공했을 때
- rejected : Promise가 실패했을 때
- pending : 아직 보류중일 때 ( fulfilled or rejected 되기 전 )
- 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 보여줌)반응형