ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JavaScript ES6/ ecmascript 2015] 문법 정리
    JavaScript 2020. 6. 19. 15:51

    ✔ 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문의 블록과 관계없이 접근할 수 있다.

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

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

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

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

     

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

    (안내) 호이스팅의 원리에 대한 글을 추가로 포스팅했습니다. (19.10.13) 자바스크립트의 변수는 다른 언어들과 조금 다르게 동작합니다. 이는 때때로 개발자로 하여금 의도하지 않은 결과를 발생�

    yuddomack.tistory.com

    ✒ 템플릿 문자열 (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 공식문서로 이해하기

    .

    medium.com

    ✒ 프로미스(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를 붙일 수 있다.

    • 이전 thenreturn값을 다음 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.rejectreject 하는 프로미스를 만든다.

     

    Promise.all()

    Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 �

    developer.mozilla.org

    ✒ 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' 카테고리의 다른 글

    [JavaScript] 정규표현식(regular expression)  (0) 2020.07.11

    댓글

Designed by Seungmin Sa.