近頃の Javascript の関数の書き方メモ

関数定義

アロー関数だと this が空

const funcs = {
  foo: function({a, b}) {
    console.info(`${a} ${b}!!!1`)
    console.dir(this)
  },
  bar({a, b}) {
    console.info(`${a} ${b}!!!2`)
    console.dir(this)
  },
  baz: ({a, b}) => {
    console.info(`${a} ${b}!!!3`)
    console.dir(this)
  },
}

funcs.foo({a: 'OK', b: 'Google'})
funcs.bar({a: 'Hey', b: 'Siri'})
funcs.baz({a: 'Hello', b: 'Youtube'})

// OK Google!!!1
// { foo: [Function: foo],
//   bar: [Function: bar],
//   baz: [Function: baz] }
// Hey Siri!!!2
// { foo: [Function: foo],
//   bar: [Function: bar],
//   baz: [Function: baz] }
// Hello Youtube!!!3
// {}

追加と上書き的なやつ

const funcs2 = Object.assign(funcs, {
  qux({a, b}) {
    if (b.toLowerCase() === 'google') {
      this.bar({a: 'Amazon', b: 'Alexa'})
      return
    }
    console.info(`${a} ${b}!!!4`)
    console.dir(this)
  }
})

funcs2.qux({a: 'Hey hey', b: 'Dr.'})
funcs2.qux({a: 'OK', b: 'Google'})

// Hey hey Dr.!!!4
// { foo: [Function: foo],
//   bar: [Function: bar],
//   baz: [Function: baz],
//   qux: [Function: qux] }
// Amazon Alexa!!!2
// { foo: [Function: foo],
//   bar: [Function: bar],
//   baz: [Function: baz],
//   qux: [Function: qux] }