IT 정보 로그캣/Javascript

[Node.js] ES6 주요 문법 정리

지푸라기 개발자 2019. 1. 24. 17:08
반응형

Node.js 를 사용하기 위해서는 기본적으로 자바스크립트 문법을 알아야 한다.

자바스크립트 문법에는 ECMAScript (ES) 라는 자바스크립트 표준 문법이 있다.

ECMAScript 는 자바스크립트가 다양한 웹 브라우저를 공통적으로 잘 지원하기 위해 생겨났다. 

현재 2019년 1월 기준으로 ECMAScript 2018 (ES9) 이 최신이고, 매번 새로운 버전이 릴리스 될 때

마다 최신 트렌드를 따라가야 한다.

하지만  ES6 문법을 정리하는 이유는 가장 많이 쓰이는 ES5 (2009 릴리스) 에서 ES6 (2015 릴리스) 로 

넘어오면서 문법상으로 많은 변화들이 있었고, 브라우저 지원율도 증가하여 

실질적으로 ES6가 최신 자바스크립트 표준에 가깝다고 볼 수 있기 때문이다.




변수 let 과 const


ES6 이전에는 변수를 var을 사용했는데 이제 let (변수) 과 const (상수) 로 나누어진다.

var 과의 차이점은 var은 전역 범위인 반면 let 과 const 는 선언한 { } 내부 블록에서만 유효하다. 


 function test () {

    let letNumber = 1;

    const constNumber = 1;


    if(true){

        let letNumber = 2;      

        const constNumber = 2; 


        console.log(letNumber);      // 2 출력

  console.log(constNumber);   // 2 출력

    }


console.log(letNumber);      // 1 출력

  console.log(constNumber);   // 1 출력

}




템플릿 리터럴


ES6 에서는 백틱 ( ` ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있다.

또한 백틱 ( ` ) 안에서는 멀티 라인도 자유롭게 사용할 수 있다.


const id = "myId" ;

const url = `http://noahlog.tistory.com/login/${id}` ;


const message = ` 줄바꿈도 마음대로

  사용이 가능합니다. ` ;




함수의 기본 매개 변수값 지정


ES6 의 함수는 매개변수에 기본값 (default) 을 지정해 줄 수 있다.


function test ( height =10 , width = 20, color = 'green' ) {

...

}




객체 리터럴


ES6 에서는 객체 리터럴의 사용성이 좀 더 간편화 되었다.


var say = function() { console.log("hello"); }


const myObject = {

say,

work() { console.log("do work"); } ,

['name'] : 'noah'

};




화살표 함수


ES6 에서는 축약형 함수인 화살표 함수를 사용할 수 있다. 

특이한 점이 있다면 화살표 함수에서 this 는 함수 자신을 호출하는 객체가 아닌

화살표 함수의 상위 스코프 (scope) 를 호출한다.


const numbers = [ 1, 2, 3, 4, 5 ];


let choice = numbers.map( v => v + 1);    //축약 형태로 return 도 생략 가능


const noah = {

name : "noah",

friend : [ "mimi" ],

printFriends() { 

this.friend.forEach( f => 

console.log(` ${this.name} loves ${f}`)); 

}

};


noah.printFriends();    // 결과값 : noah loves mimi





비구조화 할당 (destructuring Assignment)


비구조화 할당은 배열이나 객체에서 데이터를 편리하게 가져올 수 있게 해준다.


//객체 

const blog = {

owner : "noah",

url : "noahlogs.tistory.com",

getPost() { console.log("ES6 문법 정리"); }

};


let { owner, getPost } = blog;       //각각 blog 객체의 owner , getPost() 의 데이터가 할당




//배열

const pocket = ["coin" , 10 , true];

const [ first , second, third ] = pocket;    //배열의 순서대로 값이 할당




프로미스 (Promise)


프로미스는 자바스크립트의 비동기 처리에 사용되는 객체이다. 

콜백 지옥에서 벗어나게 해주는 유용한 기능이다 :) 

ES8 (ECMAScript 2017) 에서 async/await 이 생겨나면서 프로미스에서 처리할 수 없던 순서 처리를 

할 수 있게 되었다. 필요할 때 사용하면 될 것 같다. 


const connect = new Promise((resolve, reject) => {

//success = resolve , fail = reject 반환 

});


connect.then( (success) => { 

console.log(success);

//성공 한 다음 처리할 작업 

}).catch( (error) => {

console.log(error);

//에러 예외 처리

});






반응형