<div id="readability-page-1" class="page"><div><h2>✔ ES2015+</h2>
<h2>✒ const, let</h2>
<ul>
<li>
<p>const와 let은 블록 스코프이다.</p>
<pre><code>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&lt;5; i++){
  // do something
}
console.log(i); // 5 </code></pre>
</li>
<li>
<p><code>var</code>은 <b>함수 스코프</b>를 가지므로 <code>if</code>문의 블록과 관계없이 접근할 수 있다.</p>
</li>
<li>
<p><code>const</code>와 <code>let</code>은 블록 스코프를 가지고 있어서 블록 밖에서는 변수에 접근할 수 없다.</p>
</li>
<li>
<p>블록 범위는 <code>if, while, for, function 등이</code> 중괄호에 해당한다.</p>
</li>
<li>
<p>블록 스코프를 사용함으로써 <a href="https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting#recentComments">호이스팅</a> 같은 문제가 해결되고 코드의 관리가 수월해졌다는 장점이 있다.</p>
</li>
<li>
<p><code>const</code>와 <code>let</code>의 차이점은 <code>const</code>는 한 번 대입하면 다른 값을 대입할 수 없다. 또 한, 초기화 시 값을 대입하지 않으면 에러가 발생한다.</p>
</li>
</ul>
<figure id="og_1592549193961" contenteditable="false" data-ke-type="opengraph" data-og-type="article" data-og-title="자바스크립트 호이스팅(Hoisting)" data-og-description="(안내) 호이스팅의 원리에 대한 글을 추가로 포스팅했습니다. (19.10.13) 자바스크립트의 변수는 다른 언어들과 조금 다르게 동작합니다. 이는 때때로 개발자로 하여금 의도하지 않은 결과를 발생�" data-og-host="yuddomack.tistory.com" data-og-source-url="https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting#recentComments" data-og-url="https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting" data-og-image="https://scrap.kakaocdn.net/dn/tCa5j/hyGsHlbLqf/qfMDROXe3qnzg7birmf930/img.jpg?width=800&amp;height=256&amp;face=0_0_800_256,https://scrap.kakaocdn.net/dn/nUo0A/hyGtPhBPUK/iZMpBAf8ZkydxGpHMNHuT1/img.jpg?width=800&amp;height=256&amp;face=0_0_800_256,https://scrap.kakaocdn.net/dn/gP2Uu/hyGszHtSgW/xkMadtUUnq7PFMFRnQYv00/img.jpg?width=960&amp;height=640&amp;face=0_0_960_640"><a href="https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting#recentComments" target="_blank" rel="noopener" data-source-url="https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting#recentComments">

<div>
<p>자바스크립트 호이스팅(Hoisting)</p>
<p>(안내) 호이스팅의 원리에 대한 글을 추가로 포스팅했습니다. (19.10.13) 자바스크립트의 변수는 다른 언어들과 조금 다르게 동작합니다. 이는 때때로 개발자로 하여금 의도하지 않은 결과를 발생�</p>
<p>yuddomack.tistory.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/tCa5j/hyGsHlbLqf/qfMDROXe3qnzg7birmf930/img.jpg?width=800&amp;height=256&amp;face=0_0_800_256,https://scrap.kakaocdn.net/dn/nUo0A/hyGtPhBPUK/iZMpBAf8ZkydxGpHMNHuT1/img.jpg?width=800&amp;height=256&amp;face=0_0_800_256,https://scrap.kakaocdn.net/dn/gP2Uu/hyGszHtSgW/xkMadtUUnq7PFMFRnQYv00/img.jpg?width=960&amp;height=640&amp;face=0_0_960_640"></figure>
<h2>✒ 템플릿 문자열 (Template Strings)</h2>
<ul>
<li>
<p>큰따옴표나 작은따옴표로 감싸는 기존 문자열과는 다르게 백틱(`)으로 감싼다.</p>
</li>
<li>
<p>이것은 문자열 안에 변수를 넣을 수 있다.</p>
<pre><code>const num1 = 1;
const num2 = 2;
const result = 3;
const sum = `${num1} 더하기 ${num2}는 ${result}`;
</code></pre>
</li>
</ul>
<h2>✒ 객체 리터럴</h2>
<ul>
<li>
<p>IdCheck 같은 객체의 메서드에 함수를 연결할 때 콜론과 <code>function</code>을 붙이지 않아도 된다.</p>
</li>
<li>
<p>memName : memName 처럼 속성명과 변수명이 겹치는 경우에는 한 번만 쓸 수 있게 되어있다. (코드의 중복을 피할 수 있다.)</p>
</li>
<li>
<p>예전 문법에서는 ES6라는 속성명을 만들려면 객체 리터럴 바깥에서 [es + 6]를 해야 했었지만, 객체 리터럴 안에서 사용 가능하다.</p>
<pre><code>const myObject = {
  IdCheck(){
      console.log('check!');
  },
  memName,
  [es+6] : 'wow!',
};
</code></pre>
</li>
</ul>
<h2>✒ Arrow Functions(화살표 함수)</h2>
<ul>
<li>
<p>return 문을 줄일 수 있다.</p>
</li>
<li>
<p>아래의 세 함수는 같은 함수이다.</p>
<pre><code>  function add1(x,y){
    return x+y;
  }
  const add2 = (x,y) =&gt; {
  return x + y;
  }
  const add3 = (x,y) =&gt; x + y;</code></pre>
</li>
</ul>
<ul>
<li>
<p>🔸 <code>this</code> 바인드 방식</p>
</li>
<li>
<p>일반 함수의 자신을 호출하는 객체를 가리키는 <code>dynamic this</code>였다.</p>
<pre><code>  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();</code></pre>
</li>
<li>
<p>Arrow Functions는 코드의 <b>상위 스코프</b>를 가리키는 lexical this를 갖는다.</p>
<pre><code>  const relationship2 = {
    name : 'seungmin',
    friends : ['min', 'seung', 'sa'],
    logFriends(){
        this.friends.forEach(friend =&gt; {
            console.log(this.name, friend);
        })
    }
  }
  relationship2.logFriends();
</code></pre>
</li>
<li>
<p>this를 그대로 사용할 수 있다. (상위 스코프의 this를 그래도 물려받는다.)</p>
</li>
</ul>
<h2>✒ 비구조화 할당</h2>
<ul>
<li>
<p>객체 안의 속성을 찾아서 변수와 매칭 해준다.</p>
<pre><code>const ob = {
  status : {
      name : 'seung',
      count : 5,
  },
  getOb(){
      this.status.count--;
      return this.status.count;
  }
};
const {getOb, status: {count}} = ob;
</code></pre>
</li>
</ul>
<h2>✒ Modules</h2>
<ul>
<li>
<p>Export, Import를 이용해 function이나 variables 들을 다른 곳에서 사용할 수 있다.</p>
</li>
<li>
<p>중괄호({})와 중괄호가 없는 것의 차이는 default로 설정되어있느냐 차이다.</p>
<pre><code>export default ColorBox;
export const ColorProvider = ({children}) =&gt; {
// ...
}
import ColorBox from './components/ColorBox';
import {ColorProvider} from './contexts/color';</code></pre>
</li>
<li>
<p>🎈 <a href="https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3">참고 문서</a></p>
</li>
</ul>
<figure id="og_1592549200225" contenteditable="false" data-ke-type="opengraph" data-og-type="article" data-og-title="require(), exports, module.exports 공식문서로 이해하기" data-og-description="." data-og-host="medium.com" data-og-source-url="https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3" data-og-url="https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3" data-og-image=""><a href="https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3" target="_blank" rel="noopener" data-source-url="https://medium.com/@chullino/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3">

<div>
<p>require(), exports, module.exports 공식문서로 이해하기</p>
<p>.</p>
<p>medium.com</p>
</div>
</a></figure>
<h2>✒ 프로미스(Promise)</h2>
<ul>
<li>
<p>비동기 프로그래밍에서도 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용하는데 콜백 대신 프로미스 기반으로 재구성된다.</p>
</li>
<li>
<p>CallBack Hell에서 벗어나 가독성이 좋으며 중첩된 콜백의 단점을 완화시킨다.</p>
<pre><code>  const condition = true;
  const promise = new Promise((resolve, reject) =&gt; {
    if(condition){
        resolve('성공');
    }else{
        reject('실패');
    }
  });

  promise
  .then((message) =&gt; {
  console.log(message); // 성공한 경우(resolve)
  })
  .catch((error) =&gt; {
  console.log(error); // 실패한 경우(reject)
  })
</code></pre>
</li>
<li>
<p>프로미스 내부에서 <code>resolve</code>가 호출되면 <code>then</code>이 실행되고, <code>reject</code>가 호출되면 <code>catch</code>가 실행된다.</p>
</li>
<li>
<p><code>then</code>이나 <code>catch</code>에서 다시 다른 <code>then</code>이나 <code>catch</code>를 붙일 수 있다.</p>
</li>
<li>
<p>이전 <code>then</code>의 <code>return</code>값을 다음 <code>then</code> 매개변수로 넘긴다.</p>
</li>
<li>
<p>프로미스를 <code>return 한</code> 경우 프로미스가 수행된 후 다음 <code>then</code>이나 <code>catch</code>가 호출된다.</p>
<pre><code>promise
  .then((message) =&gt; {
      return new Promise((resolve, reject) =&gt; {
          resolve(message);
      });
  })
  .then((message2) =&gt; {
      return new Promise((resolve, reject) =&gt; {
          resolve(message2);
      });
  })
  .then((message3) =&gt; {
      console.log(message3);
  })
  .catch((error) =&gt; {
      console.error(error);
  })</code></pre>
</li>
<li>
<p>모든 콜백 함수를 바꿀 수 있지는 않다. 메서드가 프로미스 방식을 지원해야 한다.</p>
</li>
<li>
<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all</a>은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있다.</p>
</li>
<li>
<p><code>Promise.resolve</code>는 즉시 <code>resolve 하는</code> 프로미스를 만든다.</p>
</li>
<li>
<p><code>Promise.reject</code>는 <code>reject 하는</code> 프로미스를 만든다.</p>
</li>
</ul>
<figure id="og_1592549205694" contenteditable="false" data-ke-type="opengraph" data-og-type="website" data-og-title="Promise.all()" data-og-description="Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 �" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" data-og-url="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" data-og-image="https://scrap.kakaocdn.net/dn/c0zWxu/hyGsx3ZNa7/vUN2VWnoQUxB7Gzgrxc6Fk/img.png?width=600&amp;height=600&amp;face=0_0_600_600,https://scrap.kakaocdn.net/dn/TBJ6U/hyGtPaTSFy/H8uRLkrooasGvLgJ9BT5KK/img.png?width=600&amp;height=600&amp;face=0_0_600_600"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" target="_blank" rel="noopener" data-source-url="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">

<div>
<p>Promise.all()</p>
<p>Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 �</p>
<p>developer.mozilla.org</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/c0zWxu/hyGsx3ZNa7/vUN2VWnoQUxB7Gzgrxc6Fk/img.png?width=600&amp;height=600&amp;face=0_0_600_600,https://scrap.kakaocdn.net/dn/TBJ6U/hyGtPaTSFy/H8uRLkrooasGvLgJ9BT5KK/img.png?width=600&amp;height=600&amp;face=0_0_600_600"></figure>
<h2>✒ async/await</h2>
<ul>
<li>
<p>ES2017</p>
</li>
<li>
<p>async/await문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 해 준다.</p>
<ul>
<li>
<p>🎈 promise 문법</p>
<pre><code>function findAndSaveUser(Users) {
Users.findOne({})
    .then((user) =&gt; {
        user.name = 'myname';
        return user.save();
    })
    .then((user) =&gt; {
        return Users.findOne({gender : 'M'});
    })
    .then((user) =&gt; {
        //생략
    })
    .catch(err =&gt; {
        console.error(err);
    });
}</code></pre>
</li>
<li>
<p>🎈 async/await 문법</p>
<pre><code>const findAndSaveUser = async (User) =&gt; {
  try{
      let user = await Users.findOne({});
      user.name = 'myname';
      user = await user.save();
      user = await Users.findOne({gender : 'M'});
      // 생략
  }catch(error){
      console.error(err);
  }
}</code></pre>
</li>
</ul>
</li>
<li>
<p>await가 붙은 함수는 해당 프로미스가 resolve 될 때까지 기다린 뒤 다음 로직으로 넘어간다.</p>
</li>
<li>
<p>resolve될 때까지 기다린 뒤, 변수를 초기화한다.</p>
</li>
<li>
<p>에러 처리는 try/catch 문 로직으로 감싸준다.</p>
</li>
<li>
<p>ES2018부터 for 문과 async/await을 같이 써서 Promise.all을 대체할 수 있다.</p>
<pre><code>const pomise1 =Promise.resolve('성공1');
const pomise2 =Promise.resolve('성공2');
(async() =&gt; {
  for await (promise of [pomise1, pomise2]){
      console.log(promise);
  }
})
</code></pre>
</li>
</ul>
<hr>
<h2>📌 참고 문서</h2>
<ul>
<li>🔷 JavaScript 참고자료 : <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference</a></li>
<li>🔷 ES2015 설명 :<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">https://developer.mozilla.org/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla</a></li>
<li>🔷 ES 상세 후보군 : <a href="https://github.com/tc39/proposals">https://github.com/tc39/proposals</a></li>
<li>🔷 ES2015+ 브라우저/서버 호환 여부 : <a href="http://kangax.github.io/compat-table/es6/">http://kangax.github.io/compat-table/es6/</a></li>
<li>🔷 ES2015+ 참고 블로그 : <a href="https://www.zerocho.com/category/EcmaScript">https://www.zerocho.com/category/EcmaScript</a></li>
<li>🔷 ES6 문법 정리 : <a href="https://jsdev.kr/t/es6/2944">https://jsdev.kr/t/es6/2944</a></li>
<li>🔷 ES6 기능 확인 : <a href="http://es6-features.org/">http://es6-features.org/</a></li>
</ul>
</div></div>

SaDevelog

Harang

✔ 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는 한 번 대입하면 다른 값을 대입할 수 없다. 또 한, 초기화 시 값을 대입하지 않으면 에러가 발생한다.
✒ 템플릿 문자열 (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';
  참고 문서
✒ 프로미스(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 하는 프로미스를 만든다.
✒ 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/

[JavaScript ES6/ ecmascript 2015] 문법 정리

댓글