概念

javascript的特性

• single thread
• single process
• event driven

什麼是event driven?

所有的東西都是由
「事件」組成

請盡量避免blocking

// bad
var foo = "bar";

// better
let foo = 'bar';

// great
const foo = 'bar'

變數命名

var foo = 'foo';

...
...
...

var foo = 'bar';

關於var

let foo = 'foo';

...
...
...

// failed, SyntaxError: Identifier 'foo' has already been declared
let foo = 'bar';


// pass
foo = 'bar'

關於let

三者比較

• var 完全無法追蹤，建議不要使用
• let 可以用在需要reassign的場景
• 任何變數宣告請使用 const

// bad
function foo () {
}

// good
const foo = () => {
}

函式命名

Why? 為什麼?

提升(hoisting)

在執行任何程式碼前，JavaScript 會把函式宣告放進記憶體裡面，這樣做的優點是：可以在程式碼宣告該函式之前使用它。

// Output: foo
foo()

function foo () {
  console.log('foo')
}

For Example

解構式

// destruct object
const foo = { bar: 1 }
const { bar } = foo

// Output: 1
console.log(bar)

// destruct array
const foo = [1, 2, 3]
const [element1, element2, element3] = foo

// Output: 1, 2, 3
console.log(element1, element2, element3)

// destruct nested object
const foo = { foo1: { bar: 1 } }
const { foo1: { bar } } = foo

/// Output: 1
console.log(bar)

解構式要注意...

const foo = { foo: { bar: 1 } }

// TypeError: Cannot destructure property `foo2` of 'undefined' or 'null'.
const { foo1: { foo2 } } = foo

// You should...
const { foo1: { foo2 } = {} } = foo

其他的，像是style...

主流的js coding style

• StandardJS
• Airbnb Standard

關於Promise

const fs = require('fs')

fs.readFile('foo1', (errFoo1, binaryFoo1) => {
  fs.readFile('foo2', (errFoo2, binaryFoo2) => {
    fs.readFile('foo3', (errFoo3, binaryFoo3) => {
    
    })
  })
})

古早的callback

const fs = require('bluebird').promisifyAll(require('fs'))

fs.readFile('foo1')
  .then(dataFoo1 => {
    return fs.readFile('foo2')
  })
  .then(dataFoo2 => {
  })

...
...
...

換成Promise後