[JavaScript ES6/ ecmascript 2015] 문법 정리

✔ ES2015+

✒ const, let

• const와 let은 블록 스코프이다.

  if(true){
    var x = 3;
  }
  console.log(x); // 3
  if(true){
    const y = 3;
  }
  console.log(y) // Uncaught ReferenceError : y is not defined
  if(true){
    let z = 3;
  }
  console.log(z); // Uncaught ReferenceError: z is not defined
  for(var i=0; i<5; i++){
    // do something
  }
  console.log(i); // 5 

• var은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있다.

• const와 let은 블록 스코프를 가지고 있어서 블록 밖에서는 변수에 접근할 수 없다.

• 블록 범위는 if, while, for, function 등이 중괄호에 해당한다.

• 블록 스코프를 사용함으로써 호이스팅 같은 문제가 해결되고 코드의 관리가 수월해졌다는 장점이 있다.

• const와 let의 차이점은 const는 한 번 대입하면 다른 값을 대입할 수 없다. 또 한, 초기화 시 값을 대입하지 않으면 에러가 발생한다.

자바스크립트 호이스팅(Hoisting)

✒ 템플릿 문자열 (Template Strings)

• 큰따옴표나 작은따옴표로 감싸는 기존 문자열과는 다르게 백틱(`)으로 감싼다.

• 이것은 문자열 안에 변수를 넣을 수 있다.

  const num1 = 1;
  const num2 = 2;
  const result = 3;
  const sum = `${num1} 더하기 ${num2}는 ${result}`;
  

✒ 객체 리터럴

• IdCheck 같은 객체의 메서드에 함수를 연결할 때 콜론과 function을 붙이지 않아도 된다.

• memName : memName 처럼 속성명과 변수명이 겹치는 경우에는 한 번만 쓸 수 있게 되어있다. (코드의 중복을 피할 수 있다.)

• 예전 문법에서는 ES6라는 속성명을 만들려면 객체 리터럴 바깥에서 [es + 6]를 해야 했었지만, 객체 리터럴 안에서 사용 가능하다.

  const myObject = {
    IdCheck(){
        console.log('check!');
    },
    memName,
    [es+6] : 'wow!',
  };
  

✒ Arrow Functions(화살표 함수)

• return 문을 줄일 수 있다.

• 아래의 세 함수는 같은 함수이다.

    function add1(x,y){
      return x+y;
    }
    const add2 = (x,y) => {
    return x + y;
    }
    const add3 = (x,y) => x + y;

• 🔸 this 바인드 방식

• 일반 함수의 자신을 호출하는 객체를 가리키는 dynamic this였다.

    var relationship1 = {
      name : 'seungmin',
      friends : ['min', 'seung', 'sa'],
      logFriends: function(){
          var that = this; // relationship1을 가리키는 this를 that에 저장
          this.friends.forEach(function(friend){
              console.log(that.name, friend);
          })
      }
    }
    relationship1.logFriends();

• Arrow Functions는 코드의 상위 스코프를 가리키는 lexical this를 갖는다.

    const relationship2 = {
      name : 'seungmin',
      friends : ['min', 'seung', 'sa'],
      logFriends(){
          this.friends.forEach(friend => {
              console.log(this.name, friend);
          })
      }
    }
    relationship2.logFriends();
  

• this를 그대로 사용할 수 있다. (상위 스코프의 this를 그래도 물려받는다.)

✒ 비구조화 할당

• 객체 안의 속성을 찾아서 변수와 매칭 해준다.

  const ob = {
    status : {
        name : 'seung',
        count : 5,
    },
    getOb(){
        this.status.count--;
        return this.status.count;
    }
  };
  const {getOb, status: {count}} = ob;
  

✒ Modules

• Export, Import를 이용해 function이나 variables 들을 다른 곳에서 사용할 수 있다.

• 중괄호({})와 중괄호가 없는 것의 차이는 default로 설정되어있느냐 차이다.

  export default ColorBox;
  export const ColorProvider = ({children}) => {
  // ...
  }
  import ColorBox from './components/ColorBox';
  import {ColorProvider} from './contexts/color';

• 🎈 참고 문서

require(), exports, module.exports 공식문서로 이해하기

✒ 프로미스(Promise)

• 비동기 프로그래밍에서도 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용하는데 콜백 대신 프로미스 기반으로 재구성된다.

• CallBack Hell에서 벗어나 가독성이 좋으며 중첩된 콜백의 단점을 완화시킨다.

    const condition = true;
    const promise = new Promise((resolve, reject) => {
      if(condition){
          resolve('성공');
      }else{
          reject('실패');
      }
    });
  
    promise
    .then((message) => {
    console.log(message); // 성공한 경우(resolve)
    })
    .catch((error) => {
    console.log(error); // 실패한 경우(reject)
    })
  

• 프로미스 내부에서 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행된다.

• then이나 catch에서 다시 다른 then이나 catch를 붙일 수 있다.

• 이전 then의 return값을 다음 then 매개변수로 넘긴다.

• 프로미스를 return 한 경우 프로미스가 수행된 후 다음 then이나 catch가 호출된다.

  promise
    .then((message) => {
        return new Promise((resolve, reject) => {
            resolve(message);
        });
    })
    .then((message2) => {
        return new Promise((resolve, reject) => {
            resolve(message2);
        });
    })
    .then((message3) => {
        console.log(message3);
    })
    .catch((error) => {
        console.error(error);
    })

• 모든 콜백 함수를 바꿀 수 있지는 않다. 메서드가 프로미스 방식을 지원해야 한다.

• Promise.all은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있다.

• Promise.resolve는 즉시 resolve 하는 프로미스를 만든다.

• Promise.reject는 reject 하는 프로미스를 만든다.

Promise.all()

✒ async/await

• ES2017

• async/await문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 해 준다.

  • 🎈 promise 문법

    function findAndSaveUser(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'myname';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({gender : 'M'});
        })
        .then((user) => {
            //생략
        })
        .catch(err => {
            console.error(err);
        });
    }

  • 🎈 async/await 문법

    const findAndSaveUser = async (User) => {
      try{
          let user = await Users.findOne({});
          user.name = 'myname';
          user = await user.save();
          user = await Users.findOne({gender : 'M'});
          // 생략
      }catch(error){
          console.error(err);
      }
    }

• await가 붙은 함수는 해당 프로미스가 resolve 될 때까지 기다린 뒤 다음 로직으로 넘어간다.

• resolve될 때까지 기다린 뒤, 변수를 초기화한다.

• 에러 처리는 try/catch 문 로직으로 감싸준다.

• ES2018부터 for 문과 async/await을 같이 써서 Promise.all을 대체할 수 있다.

  const pomise1 =Promise.resolve('성공1');
  const pomise2 =Promise.resolve('성공2');
  (async() => {
    for await (promise of [pomise1, pomise2]){
        console.log(promise);
    }
  })
  

---

📌 참고 문서

• 🔷 JavaScript 참고자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference
• 🔷 ES2015 설명 :https://developer.mozilla.org/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
• 🔷 ES 상세 후보군 : https://github.com/tc39/proposals
• 🔷 ES2015+ 브라우저/서버 호환 여부 : http://kangax.github.io/compat-table/es6/
• 🔷 ES2015+ 참고 블로그 : https://www.zerocho.com/category/EcmaScript
• 🔷 ES6 문법 정리 : https://jsdev.kr/t/es6/2944
• 🔷 ES6 기능 확인 : http://es6-features.org/