พื้นฐาน ES2015 (ES6) สำหรับการเขียน JavaScript สมัยใหม่

1// โค๊ดที่เปลือยเปล่าไร้ semicolon ของฟังก์ชัน applyMiddleware ใน Redux
2export default function applyMiddleware(...middlewares) {
3  return (createStore) => (reducer, initialState, enhancer) => {
4    var store = createStore(reducer, initialState, enhancer)
5    var dispatch = store.dispatch
6    var chain = []
7
8    var middlewareAPI = {
9      getState: store.getState,
10      dispatch: (action) => dispatch(action),
11    }
12    chain = middlewares.map((middleware) => middleware(middlewareAPI))
13    dispatch = compose(...chain)(store.dispatch)
14
15    return {
16      ...store,
17      dispatch,
18    }
19  }
20}

1function foo(isValid) {
2  if (isValid) {
3    var x = 1
4    return x
5  }
6
7  return x
8}
9
10// มีค่าเท่ากับ
11function foo(isValid) {
12  var x // ดีดตัวเองมาอยู่ใกล้จุดประกาศฟังก์ชัน
13  if (isValid) {
14    var x = 1
15    return x
16  }
17
18  return x
19}

1// พิมพ์ 2 ออกมาทั้งสองครั้ง
2for (var i = 0; i < 2; i++) {
3  // เนื่องจากในจังหวะที่ console.log ทำงาน loop ได้วนไปจนครบแล้ว
4  // ทำให้ในขณะนั้่นค่า i มีค่าเป็น 2
5  // อย่าลืมว่า i ประกาศโดยใช้ var มันจึงผลักตัวเองออกจาก for
6  // หรือพูดง่ายๆคือ i นั้นเป็นตัวแปรตัวเดียวทุกครั้งที่วนลูปก็เพิ่มค่าใส่ตัวแปรเดิม
7  setTimeout(function () {
8    console.log(i)
9  }, 100)
10}
11
12// ผลลัพธ์ได้ 0 และ 1
13// ใช้ let ประกาศตัวแปรทำให้ตัวแปรเป็น block-scoped
14// พูดง่ายๆคือ i จะเกิดขึ้นทุกครั้งที่วนลูป
15// และไม่ซ้ำกับ i ก่อนหน้า
16// เนื่องจากเป็น block-scoped มันจึงมีช่วงชีวิตอยู่แค่ใน {}
17for (let i = 0; i < 2; i++) {
18  setTimeout(function () {
19    console.log(i)
20  }, 100)
21}

1let a = 0
2a = 1
3
4const PI = 3.14
5PI = 1 // "PI" is read-only เปลี่ยนค่าไม่ได้อีกแล้วนะ
6
7// obj เก็บ address หรือที่อยู่ของ { a: 1 }
8// เราเปลี่ยน address ไม่ได้ เช่น obj = {} แบบนี้คือเปลี่ยน memory address ทำไม่ได้
9const obj = { a: 1 }
10// แต่การเปลี่ยนค่าภายใน object ไม่ได้ทำให้ memory address เปลี่ยนไป
11obj.a = 2
12console.log(obj) // { a: 2 }

1export default (state = initialState, action) => {
2  switch (action.type) {
3    case LOAD_PAGES_SUCCESS:
4      // ลดการเรียกชื่อยาวๆด้วยการประกาศตัวแปรมารองรับ
5      // มั่นใจ 100% ว่า pages นี้ไม่เปลี่ยนแปลงแน่นอนเลยใช้ const ซะเลย
6      const pages = action.result.entities.pages
7      return { ...state, loading: false, items: pages }
8    default:
9      return state
10  }
11}

1export default (state = initialState, action) => {
2  switch (action.type) {
3    case LOAD_PAGES_SUCCESS:
4      const pages = action.result.entities.pages
5      return { ...state, loading: false, items: pages }
6    case LOAD_PAGE_SUCCESS:
7      // ประกาศแบบนี้พังทันที นั่นเป็นเพราะ const เป็น block-scoped
8      // ทำให้ scope ของมันอยู่ภายใต้ {} ของ switch
9      // ใน case ก่อนหน้าเราประกาศ pages ไปแล้วจึงชนกัน
10      // ควรย้ายการประกาศตัวแปรที่ทำซ้อนแบบนี้ออกไปข้างนอก
11      const pages = action.result.entities.pages
12      return { ...state, loading: false, items: [pages[0]] }
13    default:
14      return state
15  }
16}

1// dog.js
2export const DEFAULT_COLOR = 'white'
3export function walk() {
4  console.log('Walking...')
5}
6
7// main.js
8// เลือกนำเข้าเฉพาะ DEFAULT_COLOR
9import { DEFAULT_COLOR } from './dog.js'
10
11// main.js
12// นำเข้าทุกสรรพสิ่งที่ export จาก dog
13// แล้วตั้งชื่อใหม่ให้ว่า lib
14import * as lib from './dog.js'

1// circle.js
2// สังเกตคำว่า default
3export default class Circle {
4  area() {}
5}
6
7// main.js
8import Circle from './circle.js'

1// dog.js
2export const DEFAULT_COLOR = 'white'
3export function walk() {
4  console.log('Walking...')
5}
6
7// main.js
8// เลือกนำเข้าเฉพาะ walk
9import { walk } from './dog.js'
10walk()
11
12// ผลลัพธ์สุดท้ายจะเป็น...
13// สังเกตว่าไม่มี DEFAULT_COLOR ติดมาด้วย
14function walk()
15  console.log('Walking...')
16}
17walk()

1import _ from 'lodash'
2
3_.map([1, 2, 3], (item) => item * 2)
4
5// จากตัวอย่างนี้เรา import ทุกสิ่งที่ lodash มีมาใส่ตัวแปร _
6// ทั้งๆที่ความจริงเราใช้แค่ map
7// วิธีนี้จะทำให้ไฟล์ผลลัพธ์ของเรามีขนาดใหญ่ เพราะอุดมไปด้วยของที่ไม่ใช้
8// วิธีต่อไปนี้จึงเหมาะสมกว่า
9
10import map from 'lodash/map'
11map([1, 2, 3], (item) => item * 2)

1// ถ้าเพื่อนๆใช้ Webpack1 แม้เราจะเลือกเฉพาะสามตัวนี้ให้ import เข้ามา
2// แต่ด้วยความที่ Webpack1 แปลงเป็น CommonJS ก่อน
3// import ที่เราทำจึงกลายเป็นการ import ทุกสิ่งเข้ามาในไฟล์อยู่ดี
4// เพียงแต่มี map, filter และ reduce ที่เรียกใช้งานได้
5import { map, filter, reduce } from 'lodash'
6
7// ควรเปลี่ยนแปลงเป็นสิ่งนี้
8import map from 'lodash/map'
9import filter from 'lodash/filter'
10import reduce from 'lodash/reduce'

1System.import('module_name')
2  .then(module => { ... })
3  // จัดการ error ในนี้
4  .catch(error => ...)

1let person = {
2  age: 24,
3  gender: 'male',
4  name: {
5    firstName: 'firstName',
6    lastName: 'lastName',
7  },
8}
9
10// ถ้าเราต้องการค่าเหล่านี้ออกจากอ็อบเจ็กต์ ต้องมาประกาศตัวแปรแบบนี้
11let age = person.age
12let genger = person.gender
13let name = person.name
14let firstName = name.firstName
15let lastName = name.lastName
16
17// หากใช้ Destructuring จะเหลือแค่นี้
18let { age, gender, name } = person
19let { firstName, lastName } = name
20
21// แต่ในความเป็นจริงแล้ว name เป็นเพียงแค่ทางผ่าน
22// เราไม่ต้องการมัน เราต้องการแค่ firstName และ lastName
23// จึงใช้ Destructuring ซ้อนเข้าไปอีกครั้ง
24// เพียงเท่านี้ตัวแปร name ก็จะไม่เกิดขึ้นมาให้รำคาญใจ
25let {
26  age,
27  gender,
28  name: { firstName, lastName },
29} = person

1let obj1 = { a: 1, b: 2 }
2let obj2 = { c: 3, d: 4 }
3console.log({ ...obj1, ...obj2 }) // {"a":1,"b":2,"c":3,"d":4}
4
5let arr1 = [1, 2, 3]
6let arr2 = [4, 5, 6]
7console.log([...arr1, ...arr2]) // [1,2,3,4,5,6]

1// ES5
2function(arguments) {
3
4}
5
6// ES2015
7(arguments) => {
8
9}

1function Dog() {
2  this.color = 'white'
3
4  setTimeout(function () {
5    // this ตัวนี้หมายถึง this ใน context ของฟังก์ชันนี้
6    // จึงไม่มีการพิมพ์อะไรออกไป เพราะในฟังก์ชันนี้ this ไม่มีค่าของ color
7    console.log(this.color)
8  }, 100)
9}
10
11new Dog()
12
13// ถ้าต้องการให้พิมพ์ค่า color ออกมาต้องแก้ไขใหม่เป็น
14function Dog() {
15  this.color = 'white'
16  let self = this
17
18  setTimeout(function () {
19    // เรียกผ่านตัวแปร self แทน
20    console.log(self.color)
21  }, 100)
22}
23
24// หรือใช้ arrow function ดังนี้
25function Dog() {
26  this.color = 'white'
27
28  setTimeout(() => {
29    // this ของ arrow function นี้จะหมายถึง
30    // this ตัวบน
31    console.log(this.color)
32  }, 100)
33}

1const fn = () => 3
2
3console.log(fn()) // 3

1const arr = [1, 2, 3]
2// มีค่าเท่ากับ arr.map((x) => x * x)
3arr.map((x) => x * x)

1// ES5
2function foo(genger) {
3  gender = gender || 'male;
4}
5
6// ES2015
7function foo(gender = 'male') {
8
9}

1// ES5
2function request(options) {
3  var method = options.method || 'GET'
4  var ssl = options.ssl || false
5  console.log(method)
6}
7request({})
8
9// ES2015
10function request({ method = 'GET', ssl = false }) {
11  console.log(method)
12}
13request({})

1// ES5
2function request(options) {
3  options = options || {}
4  var method = options.method || 'GET'
5  var ssl = options.ssl || false
6  console.log(method)
7}
8request()
9
10// ES2015
11// กำหนดค่าเริ่มต้นเป็น {}
12function request({ method = 'GET', ssl = false } = {}) {
13  console.log(method)
14}

1// ไม่ว่าจะส่งตัวเลขเข้ามากี่ตัว ตัวแรกจะเป็น initial
2// ส่วนตัวอื่นจะเก็บอยู่ในอาร์เรย์ชื่อ rest
3function sum(initial, ...rest) {
4  return rest.reduce((prev, cur) => prev + cur, initial)
5}
6
7console.log(sum(10, 1, 2, 3)) // 16

1// ES5
2const obj = {
3  foo: function () {},
4}
5
6// ES2015
7const obj = {
8  foo() {},
9}

1// ES5
2const foo = 'foo'
3const bar = 'bar'
4
5const obj = {
6  foo: foo,
7  bar: bar,
8}
9
10// ES2015
11const foo = 'foo'
12const bar = 'bar'
13
14const obj = {
15  foo,
16  bar,
17}

1const name = 'Nuttavut Thongjor'
2console.log(`สวัสดีชาวโลก ผมชื่อ${name}`)
3
4// นอกจากนี้ template string ยังเอื้อต่อการทำ multiline string ด้วย
5const longString = `
6  Lorem Ipsum is simply dummy text of the printing
7  and typesetting industry.
8  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
9  when an unknown printer took a galley of type and scrambled
10  it to make a type specimen book.
11`

1// ประกาศคลาสผ่านคีย์เวิร์ด class
2class Person {
3  constructor(name, age) {
4    this.name = name
5    this.age = age
6  }
7
8  static species = 'Homo sapiens sapiens'
9
10  walk() {
11    console.log("I'm walking...")
12  }
13
14  print() {
15    console.log(`My name is ${this.name}`)
16    console.log(`I'm ${this.age}'`)
17  }
18}
19
20const person = new Person('MyName', 99)
21person.walk() // I'm walking...
22person.print() // My name is MyName \n I'm 99'
23
24// static method เรียกตรงผ่านคลาสได้เลย
25console.log(Person.species) // Homo sapiens sapiens
26
27// สำหรับการทำ inheritance สามารถใช้คีย์เวิร์ด extends ดังนี้
28class Female extends Person {}

1;[1, 2, 3].includes(1)
2'Hello World'.startsWith('Hello')