ES7 await/async

by jasonwilczak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser-polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.min.js"></script>
<p>All attribution goes to <a href="https://node.university/blog/498412/es7-es8" target="_blank">Node University</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">MDN</a></p>
<p>*Note that, for whatever reason, the function calls are duplicated by Babel, so not a huge issue, just annoying.</p>
<h1>Table of Contents</h1>
<ul>
  <li>
    <ul><h2>Arrays</h2>
      <li><a href="#array.Include">Array.Include</a></li>
    </ul>
  </li>
  <li>
    <ul><h2>Objects</h2>
      <li><a href="#object.entries">Object.entries</a></li>
      <li><a href="#object.values">Object.values</a></li>
      <li><a href="#object.propDescriptors">Object.getOwnPropertyDescriptors</a></li>
    </ul>
  </li>
  <li>
      <ul><h2>Misc</h2>
        <li><a href="#asyncAwait">Async/Await</a></li>
        <li><a href="#stringPadding">String Padding</a></li>
      </ul>
  </li>
</ul>
<hr>
<h2>Arrays</h2>
<div id="array.Include">
<h3>Array.Include</h3>
<h4>Replacement for indexOf</h4>
<p id="array.IncludeResults"></p>
</div>
<h2>Objects</h2>
<div id="object.entries">
<h3>Object.entries</h3>
<h4>List of property names in an object</h4>
<p id="object.entriesResults"></p>
</div>
<div id="object.values">
<h3>Object.values</h3>
<h4>List of property values in an object</h4>
<p id="object.valuesResults"></p>
</div>
<div id="object.propDescriptors">
<h3>Object.getOwnPropertyDescriptors</h3>
<h4>allows to create real shallow copies of objects and to create subclasses. It does so by giving developers the descriptors. Putting descriptors in Object.create(prototype, object) give a real shallow copy or Object.defineProperties with 2 objects to merge</h4>
<p id="object.propDescriptorsResults"></p>
</div>
<h2>Misc</h2>
<div id="asyncAwait">
<h3>Async/Await</h3>
<h4>Call an...

Babel + JSX

async function asyncFun() {
  const a = await 7;
  logToPage('asyncAwait','a is holding', a);
  const b = await Promise.resolve('foo');
  logToPage('asyncAwait','b is holding', b);
}

function arrayIncludes() {
	const logElementId = 'array.Include';
  let arr = ['react', 'angular', 'vue']
  logToPage(logElementId,'setup the array', arr);
  // Correct
  logToPage(logElementId,'trying: arr.includes("react")');
  if (arr.includes('react')) {
    logToPage(logElementId,'Can use React')
  } else {logToPage(logElementId,'Cannot use React..bad answer')}
}

function objectEntries() {
	const logElementId = 'object.entries';
  let obj = {a: 1, b: 2, c: 3}
  logToPage(logElementId,'Object we created and its properties below:',obj);
  let output = JSON.stringify(Object.entries(obj));
  logToPage(logElementId,'Object properties:',output)
}
function objectValues() {
	const logElementId = 'object.values';
  let obj = {a: 1, b: 2, c: 3}
  logToPage(logElementId,'Object we created and its property values below:',obj);
  let output = JSON.stringify(Object.values(obj));
  logToPage(logElementId,'Object property values:',output)
}
function objectGetOwnPropertyDescriptors() {
	const logElementId = 'object.propDescriptors';
  let azatsBooks = {  
    books: ['React Quickly'],
    get latest () {
      let numberOfBooks = this.books.length
      if (numberOfBooks == 0) return undefined
      return this.books[numberOfBooks - 1]
    }
  }
  logToPage(logElementId,'Object we created as source:',azatsBooks);
  let target = {"testProp":"testValue"};
  logToPage(logElementId,'Object we created as target:',target);
  logToPage(logElementId,'Source objects "getOwnPropertyDescriptors":',Object.getOwnPropertyDescriptors(azatsBooks));
  Object.defineProperties(
    target,
    Object.getOwnPropertyDescriptors(azatsBooks)
	)
  logToPage(logElementId,'Target object after using Object.defineProperties with sources property descriptors:',target);  
  
  const newTarget = Object.create(
 ...