Node.js 이해하기_ES2015+

이애옹·2022년 12월 23일

node.js

Node.js

목록 보기

6/32

2015년을 기점으로 ES2015 문법 등장 (매년 갱신됨)
2015년 이후에 등장한 문법을 ES2015+ 라고 부르기로함!

어떤점이 바뀌었는지 알아보쟈

1. const, let

var대신 const와 let으로 대체

if(true){
    var x=3;
}
console.log(x);

if(true){
    const y=3;
}
console.log(y);

x : 3
y : 에러 출력

var : 함수스코프를 가지므로 if문의 블록과 관계 없이 접근가능
const,let : 블록스코프를 가지므로 블록 밖에서는 변수에 접근 할 수 없음.

여기서 블록의 범위는 if, while, for, function등의 중괄호를 의미! 함수스코프 대신 블록스코프를 사용함으로써 호스팅 문제 해결 및 쉬운 코드 사용이 가능하다.

여기서 const와 let의 차이는 const는 한번 값을 대입하면 다른 값을 대입할 수 없고, 초기화 시 값을 대입하지 않는다면 에러가 발생한다는 점이 있고, let은 그 반대라고 생각하면 될 것 같당

2. 템플릿 문자열

1) 기존문법(ES5)

var num1 = 1;
var num2 = 2;
var result = 3;
var string1 = num1 + '더하기' + num2 + '는\''+ result +'\'';
console.log(string1);

결과 : 1더하기 2는 '3'

2) 새로운문법(ES2015)

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num1} 더하기 ${num4}는 '${result2}'`;
console.log(string2);

결과 : 1 더하기 2는 '3'

${변수} 형식으로 변수를 더하기 기호 없이 문자열에 추가 가능
기존의 따옴표 대신 백틱을 사용하기 때문에 큰따옴표나 작은따옴표와 함께 사용 가능

3. 객체 리터럴

1) 기존문법(ES5)

var sayNode = function(){
    console.log('Node');
};
var es='ES';
var OldObject = {
    sayJS : function(){
    console.log('JS');
    },
        sayNode: sayNode,
};
OldObject[es+6]='Fantastic';

OldObject.sayNode();
OldObject.sayJS();
console.log(OldObject.ES6);

Node
JS
Fantastic

2) 새로운문법(ES2015)

const newObject ={
    sayJS() {
        console.log('JS');
    },
    sayNode,
    [es+6]:'Fantastic',
};
newObject.sayNode();
newObject.sayJS();
console.log(newObject.ES6);

Node
JS
Fantastic

sayJS같은 객체의 메서드에 함수를 연결할때 콜론(:) 과 function을 붙이지 않아도 됨
sayNode:sayNode 처럼 속성명과 변수명이 겹치는 경우 한번만 쓰면됨
객체의 속성명을 동적으로 생성 가능
(ES6 속성 만들기 : 이전에는 객체 바깥에서 생성, 현재는 객체 리터럴 안에 선언 가능)

4. 비구조화

1) 기존문법(ES5)

var candyMachine = {
    status : {
        name : 'node',
        count : 5,
    },
    getCandy : function() {
        this.status.count--;
        return this.status.count;
    }
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.count;

2) 새로운문법(ES2015)

const candyMachine = {
    status :{
        name : 'node',
        count : 5,
    },
    getCandy() {
        this.status.count--;
        return this.status.count;
    }
};
const {getCandy, status : {count} } = candyMachine;

candyMachine 객체 안의 속성을 찾아 변수와 매칭시켜줌
count 처러 여러 단계 안의 속성을 찾는것도 가능

5. 프로미스

ES2015 부터 자바스크립트와 노드의 API들이 콜백대신 프로미스 기반으로 재구성
콜백 헬 극복

const condition = true;
const promise = new Promise((resolve,reject) => {
    if(condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

promise
    .then ((message) => {
        console.log(message);
    })
    .catch((error) => {
    console.error(error);
    });

new Promise : 프로미스 생성

resolve, reject : 매개변수로, 콜백 함수 안에 들어감

resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행
promise를 여러번 중첩 사용할 수도 있고, promise.all을 이용해 한번에 실행도 가능함.

6. async/await

1) async 함수

function 앞에 위치하며, function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환
프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스(resolved promise)로 값을 감싸 반환한다.

async function f() {
  return 1;
}

=> 프로미스 1 반환

async function f() {
  return 1;
}

f().then(alert); // 1

=> result가 1인 이행 프로미스 반환

2) await 함수

자바스크립트는 await 키워드를 만나면 프로미스가 처리될 때까지 대기

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();