DevFest WebTech CodeLab

CodeLab 과정

1. ES6와 ES7에 대해서 알아보기

2. ES8, ES9, ES10에 대해서 알아보기

3. ES6~10을 활용해 간단한 검색 기능 만들어보기 feat. RxJS(option)

ECMAScript?

ES6 & ES7에서 무엇이 달라졌나요?

ES6 → http://www.ecma-international.org/ecma-262/6.0/

Arrow functions / Arrow function expressions

// 두 함수의 생김새

// Regular Function
function generalFunction(a, b) {
  // ...
}

// Arrow Function
const arrowFunction = (a, b) => {
  // ...
}

어떻게 활용할 수 있나요?

const cats = ['ebony', 'ivory', 'harmony', 'rhythm']

// Statement body
cats.forEach((cat) => {
	console.log(cat)
  registerCat(cat)
})

// Expression body
const wrappedCats = cats.map((catName, index) => ({catName, age: index}))
const olderCats = wrappedCats.filter((cat) => cat.age > 1)
const catHarmony = olderCats.find((cat) => cat.catName === 'harmony')

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

• https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/

Classes

class nameOfClass extends existingClass {
  constructor() {
	  // ...
  }

	someFunction() {
		// ...
	}

	get someVariable() {
		// ...
	}

	set someVariable(variable) {
		// ...
	}

	static someStaticFunction() {
		// ...
	}
}

어떻게 활용할 수 있나요?

class GDGEvent {
	constructor(eventName, eventDate) {
    this.eventName = eventName
    this.eventDate = eventDate
  }

	updateEvent(eventName, eventDate) {
		// ...
  }
}

class GDGWebTechEvent extends GDGEvent {
  constructor(eventName, eventDate, focusingTopic) {
    super(eventName, eventDate)
    this.focusingTopic = focusingTopic
		this.eventPlace = GDGWebTechEvent.defaultEventPlace()
  }

  updateEvent(eventName, eventDate, focusingTopic) {
		// do something with focusingTopic
    super.updateEvent(eventName, eventDate)
  }

  get eventInformation() {
    return `${this.eventName} will be held at ${this.eventDate}
						focusing on ${this.focusingTopic}`
  }

  static defaultEventPlace() {
    return 'Google for Startups located in Seoul, Korea'
  }
}

const devFestWebTech2019 = new GDGWebTechEvent(
  'DevFest WebTech', '21 Nov 2019', 'web technologies'
)
console.log(devFestWebTech2019.eventInformation)
// 'DevFest WebTech will be held at 21 Nov 2019 focusing on web technologies'

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects#The_object_(class_instance)

Enhanced Object Literals

const exampleObjectLiteral = {
	// __proto__
	__proto__: theProtoObj,
	// Shorthand for ‘handler: handler’
	handler,
	// Methods
	toString() {
	 // Super calls
	 return "d " + super.toString()
	},
	// Computed (dynamic) property names
	[ 'prop_' + (() => 42)() ]: 42
}

어떻게 활용할 수 있나요?

const height = 30
const width = 60
const weight = '3kg'
const color = 'ivory'

const myCat = {
	height,
	width,
	weight,
	color,
	[`computed${height * width}`]: height * width
}

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals

Template Strings

어떻게 활용할 수 있나요?

// Basic literal string creation
const example1 = 'string '/n' text'

// Multiline strings
const example2 = `string text line 1
 string text line 2`

// String interpolation
const exmaple3 = `string text ${example1} string text`

// Tagged templates
const cat = 'Mambo'
const age = 8

function simpleTag(strings, catExp, ageExp) {
  const firstString = strings[0]
  const secondString = strings[1]

  return `${firstString}${catExp}${secondString}${ageExp > 7 ? 'old' : 'not old'}`
}

const catString = simpleTag`My cat ${ cat } is ${ age }`
console.log(catString)

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Destructuring

어떻게 활용할 수 있나요?

const exampleObject = {
	animal: {
		cat: ['Navy', 'Black', 'Yello'],
		dog: ['Joy', 'Sam'],
	},
	car: {
		sedan: {
			bmw: ['528i', '530i'],
			mercedes: ['E300', 'S350D'],
		},
		suv: {
			bmw: ['X3', 'X5'],
			mercedes: ['GLE', 'GLC'],
		}
	}
}

// list matching
const [a, , b] = [1,2,3]

// object matching
const { animal: a, car: { sedan: s } } = exampleObject

// object matching shorthand
const {animal, car} = exampleObject

// Can be used in parameter position
function exampleFunction({name: awesomeName}) {
  console.log(awesomeName)
}
exampleFunction({name: 'Duke'})

// Fail-soft destructuring
const [a] = []
a === undefined

// Fail-soft destructuring with defaults
const [a = 1] = []
a === 1

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Default parameters & Rest parameters & Spread Operator

어떻게 활용할 수 있나요?

// Default parameters
function interpretAge(age = 1) {
	if (age < 3) {
		return 'baby'
	}

	return '으른'
}
console.log(interpretAge())  // baby
console.log(interpretAge(1)) // baby
console.log(interpretAge(5)) // 으른

// Rest parameters
function organizeRoom(clothes, chairs, ...others) {
	console.log(clothes) // ['Jeans', 'Shirts']
	console.log(chairs) // ['a', 'b']
	console.log(others) // [['Book1', 'Book2'], ['Note1']]
}
organizeRoom(['Jeans', 'Shirts'], ['a', 'b'], ['Book1', 'Book2'], ['Note1'])

// Spread Operator
function sumNumbers(x, y, z, s) {
	return x + y + z + s
}
const numbers = [1, 2, 5, 6]
sumNumbers(...numbers) // 14

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Let & Const

어떻게 활용할 수 있나요?

// 일반 함수에서의 쓰임새
function f() {
  {
    let x
    {
      // 다른 블록 스코프라서 문제없이 실행
      const x = 'sneaky'
      // 같은 블록 스코프에서 const 변수를 재할당하므로 error
      x = 'foo'
    }
    // 이미 같은 블록 스코퍼에 동일한 이름의 let 변수가 선언되어 있어 error
    let x = 'inner'
  }
}

// 고전적이면서도 유명한 예
for (var i = 0; i < 10; i++) {
	setTimeout(() => {
		console.log(i)
	}, 3000)
}
// 열번 모두 10

// Versus

for (let i = 0; i < 10; i++) {
	setTimeout(() => {
		console.log(i)
	}, 3000)
}
// 0 ~ 9

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

• https://stackoverflow.com/questions/55030498/why-dont-const-and-let-statements-get-defined-on-the-window-object

• https://www.ecma-international.org/ecma-262/9.0/index.html#sec-declarative-environment-records

Modules

어떻게 활용할 수 있나요?

// math.js
export const sum = (x, y) => x + y

export const subtract = (x, y) => x - y

export const multiply = (x, y) => x * y

export const PI = 3.141593

export default {
	sum,
	subtract,
	multiply,
	PI,
}

// app.js
import math from 'math'
console.log('2π = ' + math.sum(math.PI, math.PI))

// or
import { sum, multiply, PI } from 'math'
console.log(multiply(sum(3, 8), sum(2, 10)) / PI) // 42.01...

<script type="module" src="app.js"></script>

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Array API: from, of, fill, find ...

어떻게 활용할 수 있나요?

// Array-like DOM Nodes를 실제 배열 타입으로 래핑
Array.from(document.querySelectorAll('*'))

Array.of(1, 2, 3)

// 7로 1번째부터 채우기
[0, 0, 0].fill(7, 1) // [0, 7, 7]

// 특정 요소 및 인덱스 찾기
[1, 2, 3].find(x => x === 3) // 3
[1, 2, 3].findIndex(x => x === 2) // 1

• https://developer.mozilla.org/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla

Promise

new Promise((resolve, reject) => { ... })

어떻게 활용할 수 있나요?

// 타이머
function timeout(duration = 0) {
  return new Promise((resolve) => {
	  setTimeout(resolve, duration);
  })
}

const promiseExample = timeout(1000)
	.then(() => {
    return timeout(2000)
	})
	.then(() => {
    throw new Error('hmm')
	})
	.catch((error) => {
		Promise.all([timeout(100), timeout(200)])
		return '마이 기다렸다..'
	})

// API를 호출하는 경우
fetch('https://awesome.com/api/cats', { method: 'GET' })
	.then((response) => response.json())
	.then(({status, data}) => {
		// ...
	})

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

ES7 → http://www.ecma-international.org/ecma-262/7.0/

Array.prototype.includes

어떻게 활용할 수 있나요?

// arrayVariable.includes(valueToFind[, fromIndex])

[1, 2, 3].includes(-1)                   // false
[1, 2, 3].includes(1)                    // true
[1, 2, 3].includes(3, 4)                 // false
[1, 2, 3].includes(3, 3)                 // false
[1, 2, NaN].includes(NaN)                // true
['foo', 'bar', 'quux'].includes('foo')   // true
['foo', 'bar', 'quux'].includes('norf')  // false

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Arithmetic Operators: Exponentiation(**)

어떻게 활용할 수 있나요?

// 5의 세제곱을 구할때 기존의 방법
Math.pow(5, 3)

// 이제는 operand ** operand 이렇게 사용할 수 있어요
5 ** 3 // 125

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation

ES8 & ES9에서 무엇이 달라졌나요?

ES8 → http://www.ecma-international.org/ecma-262/8.0/

Async function

async function asynchronousFunction() {
	return 3
}

const resultAsPromise = asynchronousFunction()

어떻게 활용할 수 있나요?

// 기본적인 사용 방법
async function getFive() {
	return 5
}

getFive().then((value) => {
	console.log(value)
})

// or

async function getFive() {
	return 5
}

async function waitForFive() {
	const value = await getFive()
	console.log(value)
}

waitForFive()

// Thenable objects를 기다릴때
async function waitForThenable() {
  const thenable = {
    then: function(resolve, reject) {
      resolve('resolved!')
    }
  }
  console.log(await thenable) // resolved!
}
waitForThenable()

// API를 호출하는 경우

// Promise로 했을때(ES6에서의 예제와 동일)
fetch('https://awesome.com/api/cats', { method: 'GET' })
	.then((response) => response.json())
	.then(({status, data}) => {
		// ...
	})

// Async function과 await을 사용했을때
async function apiHandler() {
	const response = await fetch('https://awesome.com/api/cats', { method: 'GET' })
	const { data } = await response.json()
	console.log(data)
}
apiHandler()

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

Object entries, values

Object.entries(objectVariable)
Object.values(objectVariable)

어떻게 활용할 수 있나요?

// Object.entries()
const obj = { eventName: 'DevFest WebTech', eventPlace: 'Google for Startups' }
console.log(Object.entries(obj))
// [ ['eventName', 'DevFest WebTech'], ['eventPlace', 'Google for Startups'] ]

// Object.values()
const obj = { foo: 'foo', bar: [100, 200], baz: 55 }
console.log(Object.values(obj))
// ['foo', [100, 200], 55 ]

const myStr = 'Lufthansa'
console.log(Object.values(myStr))
// ["L", "u", "f", "t", "h", "a", "n", "s", "a"]

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Trailing commas in function declarations and calls

// ES5에서도 legal한 문법이었던 trailing commas in objects
const arr = [
  1, 
  2, 
  3, 
];

const exampleObject = { 
  foo: "bar", 
  baz: "qwerty",
  age: 42,
};

// 이제는 함수의 선언부와 호출부에서도 legal!
const awesomeFunction = (
	a,
	b,
	c,
	d,
) => a + b + c + d

const a = 3
const b = 22
const c = 1
const d = 5
awesomeFunction(a, b, c, d,)

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

ES9 → http://www.ecma-international.org/ecma-262/9.0/

Object rest & spread

어떻게 활용할 수 있나요?

// Object rest
const { fname, lname, ...rest } = {
	fname: 'Hemanth',
	lname: 'HM',
	location: 'Earth',
	type: 'Human',
}

fname // "Hemanth"
lname // "HM"
rest // { location: "Earth", type: "Human" }

// Object spread
const rest = {
	location: 'Earth',
	type: 'Human',
}
const info = { fname, lname, ...rest }

info // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }

• https://medium.com/@bramus/javascript-whats-new-in-ecmascript-2018-es2018-17ede97f36d5

Promise.prototype.finally

어떻게 활용할 수 있나요?

function testFinally() {
  return new Promise((resolve,reject) => resolve())
}

testFinally()
	.then(() => console.debug('resolved'))
	.finally(() => console.debug('finally'))
// resolved
// finally

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

ES10 → http://www.ecma-international.org/ecma-262/10.0/

Array flat & flatMap

어떻게 활용할 수 있나요?

// Array flat
let arr = ['a', 'b', ['c', 'd']]
let flattened = arr.flat()
console.log(flattened)    // ["a", "b", "c", "d"]

arr = ['a', , , 'b', ['c', 'd']];
flattened = arr.flat()
console.log(flattened)    // ["a", "b", "c", "d"]

arr = [10, [20, [30]]]
console.log(arr.flat())     // [10, 20, [30]]
console.log(arr.flat(1))    // [10, 20, [30]]
console.log(arr.flat(2))    // [10, 20, 30]

// Array flatMap
const arr = [4.25, 19.99, 25.5]
console.log(arr.map((value) => [Math.round(value)]))
// [[4], [20], [26]]
console.log(arr.flatMap((value) => [Math.round(value)]))
// [4, 20, 26]

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

Object fromEntries

어떻게 활용할 수 있나요?

const myArray = [['one', 1], ['two', 2], ['three', 3]]
const obj = Object.fromEntries(myArray)

console.log(obj)    // {one: 1, two: 2, three: 3}

• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

String trimStart & trimEnd

어떻게 활용할 수 있나요?

const str = '   string   '

// ES10
console.log(str.trimStart())    // "string   "
console.log(str.trimEnd())      // "   string"

// the same as
console.log(str.trimLeft())     // "string   "
console.log(str.trimRight())    // "   string"

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd

Optional catch binding

어떻게 활용할 수 있나요?

// 이제 이렇게 catch가 어떤 Error 객체를 받던지 생략하고 필요한 작업을 수행할 수 있어요!
try {
  // 에러가 날 가능성이 있는 작업들을 수행
} catch {
  // 에러의 종류에 상관없이 필요한 작업을 수행
}

• https://github.com/tc39/proposal-optional-catch-binding

간단한 검색 기능 만들어보기 feat. RxJS

준비물

• Editor(or IDE)

• npm

• Browser(Chrome을 권장합니다)

무엇을 만드나요?

어떻게 따라하면 되나요?

• 프로젝트 폴더에 index.html, app.js, app.css 파일이 있다.

• webpack으로 app.js 파일을 빌드해서 index.html에서 불러와 사용한다.
• webpack -p --watch ./*.js

• index.html을 로컬에서 서빙한다.
• Ex) npx http-server

• 브라우저에서 로컬호스트로 접속해 웹 애플리케이션을 확인한다.

mkdir awesome-search
cd awesome-search

npm init

npm install lodash-es --save

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./app.css">
  <title>DevFest WebTech 2019 CodeLab</title>
</head>
<body>
  <div class="container">
    <header>
      Find your recipes!
    </header>
    <main>
      <input class="searchInput" type="text">
      <ul class="recipeList"></ul>
    </main>
  </div>
  <script src=""></script>
</body>
</html>

* {
  box-sizing: border-box;  
}

html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100vw;
  min-height: 100vh;
  margin-top: 20px;
}

header {
  display: flex;
  width: 450px;
  height: 50px;
  font-size: 30px;
  font-weight: bolder;
  border: 2px solid seagreen;
  align-items: center;
  justify-content: center;
}

.searchInput {
  margin-top: 30px;
  width: 450px;
  height: 40px;
  font-size: 20px;
  font-weight: 400;
  padding: 0 15px;
  border: 2px solid darkorange;
}

.searchInput:focus {
  outline: none;
}

.recipeList {
  display: flex;
  flex-direction: column;
  width: 450px;
  list-style: none;
  padding: 5px;
  height: 500px;
  overflow-y: scroll;
  border: 2px solid seagreen;
}

.recipe {
  display: flex;
  flex-direction: row;
  min-height: 300px;
  width: 100%;
  border-bottom: 2px solid gold;
  margin-bottom: 4px;
}

.recipeColumn {
  width: 270px;
  padding-left: 10px;
}

.recipeInstructions {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

// app.js

const searchInput = document.querySelector('.searchInput')
const recipeList = document.querySelector('.recipeList')

const inputHandler = (event) => {
	// ...
}

searchInput.addEventListener('input', inputHandler)

import { debounce } from 'lodash-es'

const debouncedInputHandler = debounce((event) => {
	// ...
}, 1000)

fetch('some url', {
  method: 'GET',
})
.then((response) => ...)

const apiEndPoint = 'https://www.themealdb.com/api/json/v1/1/search.php'

fetch(`${apiEndPoint}?f=${inputValue}`, {
  method: 'GET',
})
.then((response) => response.json())
.then(({ meals }) => {
  recipeList.innerHTML = meals
    .map((meal) => ...)
})

class Meal {
  constructor(mealData) {
    this.mealData = mealData
  }

  renderToString() {
    const {
      strArea,
      strCategory,
      strIngredient1,
      strMeasure1,
      strInstructions,
      strMeal,
      strMealThumb,
      strTags,
    } = this.mealData

    return `
      <li class="recipe">
        <div>
          <img
            width="130px"
            height="130px"
            src=${strMealThumb}
          >
        </div>
        <div class="recipeColumn">
          <span>${strArea}</span> <span>${strCategory}</span>
          <br />
          <span>${strMeal}</span>
          <br /><br />
          Ingredient List
          <ul>
            <li>${strIngredient1}: ${strMeasure1}</li>
          </ul>
          <br />
          Instruction
          <div class="recipeInstructions">${strInstructions}</div>
          <br /><br />
          <span>${strTags}</span>
        </div>
      </li>
    `
  }
}

export default Meal

import Meal from './meal'

fetch(`${apiEndPoint}?f=${inputValue}`, {
  method: 'GET',
})
.then((response) => response.json())
.then(({ meals }) => {
  recipeList.innerHTML = meals
    .map((meal) => new Meal(meal))
    .map((mealInstance) => mealInstance.renderToString())
    .join('')
})

let previousInputValue = ''

const debouncedInputHandler = debounce((event) => {
	if (!inputValue || previousInputValue === inputValue) {
	  return
	}

	fetch(`${apiEndPoint}?f=${inputValue}`, {
	  method: 'GET',
	})
	.then((response) => response.json())
	.then(({ meals }) => {
	  recipeList.innerHTML = meals
	    .map((meal) => new Meal(meal))
	    .map((mealInstance) => mealInstance.renderToString())
	    .join('')
	})
	
	previousInputValue = inputValue
}, 1000)

.then(({ meals }) => {
  recipeList.innerHTML = meals
    .map((meal) => new Meal(meal))
    .map((mealInstance) => mealInstance.renderToString())
    .join('')
})
.catch(() => {
  recipeList.innerHTML = '<h3>An error has occurred when fetching data...</h3>'
})

recipeList.innerHTML = '<h3>Loading...</h3>'

fetch(`${apiEndPoint}?f=${inputValue}`, {
  method: 'GET',
})
.then(({ meals }) => {
  recipeList.innerHTML = meals
    .map((meal) => new Meal(meal))
    .map((mealInstance) => mealInstance.renderToString())
    .join('')
})
.catch(() => {
  recipeList.innerHTML = '<h3>An error has occurred when fetching data...</h3>'
})

const debouncedInputHandler = debounce(async ({ target: { value: inputValue } }) => {
  if (!inputValue || previousInputValue === inputValue) {
	  return
	}

  recipeList.innerHTML = '<h3>Loading...</h3>'

  try {
    const response = await fetch(`${apiEndPoint}?f=${inputValue}`, {
      method: 'GET',
    })
    const { meals } = await response.json()

    recipeList.innerHTML = meals
      .map((meal) => new Meal(meal))
      .map((mealInstance) => mealInstance.renderToString())
      .join('')
  } catch {
    recipeList.innerHTML = '<h3>An error has occurred when fetching data...</h3>'
  }

  previousInputValue = inputValue
}, 1000)

Observable

Operator

Observer

Subscription

• http://sculove.github.io/blog/2017/10/07/rxjsbook4/

• https://rxjs-dev.firebaseapp.com/guide/observable

const inputStream = fromEvent(searchInput, 'input')

const inputStream = fromEvent(searchInput, 'input')
  .pipe(
    ...
  )

const inputStream = fromEvent(searchInput, 'input')
  .pipe(
    map((event) => event.target.value),
    debounceTime(1000),
    distinctUntilChanged(),
    tap(() => recipeList.innerHTML = '<h3>Loading...</h3>'),
    switchMap((inputValue) =>
      ajax(`${apiEndPoint}?f=${inputValue}`, { method: 'GET' })
        .pipe(
          map(({ response }) => response ? response.meals : []),
        ),
    ),
  )

inputStream.subscribe({
  ...
})

inputStream.subscribe({
  next: (meals) => {
    recipeList.innerHTML = meals
      .map((meal) => new Meal(meal))
      .map((mealInstance) => mealInstance.renderToString())
      .join('')
  },
  error: () => {
    recipeList.innerHTML = '<h3>An error has occurred when fetching data...</h3>'
  },
})

참고하면 좋은 문서

• https://en.wikipedia.org/wiki/ECMAScript

• https://en.wikipedia.org/wiki/Ecma_International

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla

• http://www.ecma-international.org/ecma-262/6.0/

• https://developer.mozilla.org/en-US/docs/Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla

• https://rxjs-dev.firebaseapp.com/guide/observable

• http://sculove.github.io/blog/2017/10/07/rxjsbook4/