본문으로 바로가기

[Node] ES2015 (ES6) 문법

category Back-End/Node.js 2018. 12. 12. 00:03


ES2015


본 내용은 ZeroCho 님의 저서 Node.js 교과서를 학습한 내용을 바탕으로 작성한 내용입니다.




1. ES2015 (ES6)

    • 개요
- ES6보다 ES2015라고 많이 불리우며, ES6 Harmony라고도 불린다. ES2015에서의 다음과 같은 문제들이 해결되었다.
        • 호이스팅(변수 선언부분이 최상단으로 끌어올려지는 현상)이 사라진 것 같은 효과
> 함수를 표현식으로 선언한 경우에는 변수에 function이 대입되기 전에 변수를 호출하므로 호이스팅되지 않고 에러가 발생
        • this를 동적으로 바인딩하지 않는 화살표 함수
        • 모듈화 지원
        • 콜백 지옥에서 구원해줄 Promise
        • Default, Rest 파라미터
        • 해체 할당, Spread 연산자
        • 템플릿 리터럴 등등...

    • const, let
- 기존의 var 대신에 const와 let을 사용.
- const는 값을 바꿀 수 없기 떄문에 변수 선언과 동시에 초기화를 해야 하고, let으로 변수 선언 시 값을 바꿀 수 있다.
- const와 let은 블록 스코프를 가지므로 블록( {   } ) 밖에서는 접근이 불가능하다.
- const에 객체가 할당된 경우 객체 내부의 속성은 바꿀 수 있다. (const 변수 x는 레퍼런스이기 )
> const x = { a:1, b:2, c:3 };
   x.a = 2;
   console.log(x.a);  // 2

    • 템플릿 문자열
- ES6에서는 문자열을 큰따옴표나 작은따옴표 대신 백틱( ` ) 으로 감싼다.
- 백틱으로 감싼 문자열 안에는 변수를 넣을 수 있다.
- 문자열 사이사이에 '+'를 이용해서 변수를 넣었던 불편함을 없애고, 큰따옴표 작은따옴표의 구분을 하지않고 사용할 수 있다.

    • 객체 리터럴
- 객체의 메서드에 함수를 연결할 때 콜론(:)과 function을 붙이지 않아도 된다.
- 속성명과 변수명이 겹치는 경우에는 한 번만 쓰면 된다.
- 동적속성을 객체리터럴 안에서 같이 선언(생성)할 수 있다.

    • 화살표 함수
- 화살표 함수에서는 function 선언 대신 '=>' 기호로 함수를 선언한다. 또한, 변수에 대입하면 나중에 재사용할 수 있다.
- (매개) => { return 리턴 };   // 리턴만 있는 경우            (매개) => 리턴;   // 이렇게 줄일 수 있다.
> const add = (x, y) => { return x+y; };       ----->    const add = (x, y) => (x + y);
- 함수 표현식 : 변수를 먼저 선언하고 function에 함수를 대입    /    함수 선언문 : function에 이름을 붙여 선언하는 것

    • 비구조화 할당(distructuring)
- 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.
- 객체의 비구조화 (객체의 속성을 같은 이름의 변수에 대입하는 경우)
> const a = 객체.a        =>        const { a, b } = 객체
   const b = 객체.b
- 배열의 비구조화
> var array = ['node.js', { }, 10, true];                        const array = ['node.js', { }, 10, true];
   var node = array[0];                            =>
   var object = array[1];                                         const [node, object,   , boolean] = array;
   var boolean = array[3];

    • 프로미스
- 자바스크립트 비동기 처리에 사용되는 객체로 프로미스를 이용하여 콜백 헬을 해결할 수 있다.
- 프로미스 내부에서 resolve가 호출되면 .then이 실행되고, reject가 호출되면 .catch가 실행된다.
- then이나 catch에서 다시 다른 then이나 catch를 붙일 수 있다. 이전 then의 return값을 다음 then의 매개변수로 넘긴다.
- 프로미스는 결과 값을 가지고는 있지만, .then 이나 .catch를 붙이기 전까지 반환하지 않는 것임.
> Promise.resolve(성공 메시지) : 무조건 성공하는 프로미스
   Promise.reject(실패 메시지) : 무조건 실패하는 프로미스
- Promise.all 을 사용하여 여러 프로미스를 동시에 실행 가능. 단, 하나라도 실패하면 바로 .catch로 이동

    • async / await
- 프로미스 코드를 깔끔하게 줄여준다.
- 함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await을 붙여준다.
- 에러 처리를 위해 try ~ catch문으로 감싸줘야 한다. (각각의 await를 따로 try ~ catch로 감싸줘도 됨)
- for문과 async/await을 같이 쓴 'for await of'문을 사용하여 Promise.all을 대신할 수 있다.
> const promise1 = Promise.resolve('성공1');
   const promise2 = Promise.resolve('성공2');
   (async func( ) => {
for await (promise of [promise1, promise2]) {
console.log(promise);
}
}) func( );




'Back-End > Node.js' 카테고리의 다른 글

[Node] 노드의 핵심 개념  (3) 2018.12.07