ES6 최신 문법

구조 분해 문법 

매번 호출되는 json객체의 접근 방식의. 연산자를 통해 접근하는 것이 아닌 한 번에 초기화할 수 있는 문법

//ES6 최신 문법
function fetchData() {
  return {
    data: {
      name: 'capt',
      age: 100,
    },
    config: {},
    statusText: '',
    headers: {},
  };
}
//변수로 받아 접근 해야한다
const result = fetchData();
console.log(result.data);
console.log(result.config);
//구조 분해 할당
const { data, config, statusText } = fetchData(); //한번에 접근해 변수에 초기화 가능
console.log(data);
console.log(config);
//변수의 이름과 다른 이름으로 초기화
const { data: captain } = fetchData();
console.log(captain);

• 한 번에 여러 변수의 값을 객체의 키값에 맞는 value값으로 초기화하기 편하다.
• 만약 초기화해야 하는 변수 명과, 객체의 키 값이 다를 경우 : 연산자를 통해 초기화시켜야 할 변수명을 지정할 수 있다

Async & Await

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

Promise

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

async & await

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

//ES6 최신 문법 ( Async & Await )
//동기 방식일 경우는 값이 항상 있다는것이 보장이 되기 때문에 문제가 없다
var a = 10;
console.log(a);
var sum = a * 2;
console.log(sum);
//비동기 방식
function fetchData() {
  var user = $.ajax('users/1', function (user){
        //콜백 함수가 매번 들어간다 -> 이를 해결하기 위해 promise 나왔다
        //promise도 then 절이 매번 이어져야 하므로 async 문법이 나왔다
        console.log(user);
        $.ajax('users/2', ....)
      }); //제이쿼리로 값을 읽어 오는 함수로 가정
  console.log(user);
}

//최신 비동기 방식
async function fetchData(){
  var user = await $.ajax('users/1');
  console.log(user)
}

• $.ajax라는 코드는 실제로는 없고, 예시를 위해 작성한 것이다(JQuery에서 값을 읽어 오는 비동기 함수라고 생각하자)
• 동기 방식 경우 , 값이 항상 있다는 것이 보장이 되기 때문에 콜백과 같은 것을 쓸 필요가 없다.
• 비동기 방식 같은 경우 해당 값이 있다는 것을 보장되기 위해 콜백 함수를 사용하고, 해당 콜백 함수에서는 비동기 함수로 호출한 값이 항상 존재하는데, 이를 매번 중복해서 쓰다 보면 콜백 지옥에 빠지게 된다.
  • 이를 해결하기 위해, promise 문법이 나오게 되었지만, 이 역시 then 지옥이라는 문제를 초례하게 되었다.
• 최신 자바스크립트 문법에서는 async& await를 통해 이러한 문제들을 해결 하였으며, 깔끔하게 코드를 작성할 수 있다.