4차산업혁명의 일꾼/Java&Spring웹개발과 서버 컴퓨터

ES6 - javascript

르무엘 2022. 7. 19. 18:40

1) var , let (scope개념 추가)(그리고 const (변하지 않는 상수)

2) Hoisting (호이스팅) 이란?

 

3) 개선된 반복문

for in

forEach

 

4) Arrow Functions

// 첫번째 arrow function

const arrowFunction = () => {

console.log("Hello arrow function");

}

// 두번째 arrow function

const arrowFunctionWithoutReturn = ()

=> console.log("Hello arrow function without return"); 

 

5) Promise

프로미스란 Javascript에서 비동기를 처리할 때 주로 사용되는 문법인데

ES6에서 처음 등장하여 지금까지 많은 부분에서 사용되고 있으며

콜백 지옥(callback hell)을 해결하였습니다.

 

const isReady = true;

// 1. Producer

const promise = new Promise(   (resolve, reject)

=>  {    console.log("Promise is created!");

           if (isReady) { resolve("It's ready");

           } else { reject("Not ready"); }

      }

);

// 2. Consumer

promise

  .then(messsage => { console.log(messsage); })

   .catch(error => { console.error(error); })

   .finally(() => { console.log("Done"); });

성공시  Promise is created! , It's ready , Done 으로 로그가 찍힘

 

프로미스 상태에는 생성되면 Pending(대기),  resolve를 실행하면 Fulfilled(이행) , reject를 실행하면 Rejected(실패) 상태가 된다.

 

async 와 await 라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다. async/await는 놀라울 정도로 이해하기 쉽고, 사용법도 어렵지 않습니다

async function f() {

    let promise = new Promise(  (resolve, reject)

    => { setTimeout(() => resolve("완료!"), 1000) });

let result = await promise;

// 프라미스가 이행될 때까지 기다림 (*)

console.log(result); // "완료!"

}

f();

await 는 promise.then 보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법 입니다. promise.then보다 가독성 좋고 쓰기도 쉽습니다

LIST