今回はJavaScriptのアロー関数の使い方と、今回ハマった箇所をサンプルコードを交えて、簡単に解説しています。
詳細はMDNの下記に詳しく書いています。
MDN:アロー関数式
アロー関数の使い方
アロー関数を使用すると、普通に関数を書くよりもシンプルに関数を書くことができます。
下記は「Hello, World!」という文字列を返すだけの関数です。
function showHello () {
return 'Hello, World!'
}
これをアロー関数で書き直すと、下記のようになります。
const showHello = () => {
return 'Hello, World!'
}
シンプルに値を返すだけのものなら、中括弧({})とreturnを省略することが可能です。
returnは中括弧({})を省略した時だけ省くことが可能です。
const showHello = () => 'Hello, World!'
console.log(showHello()) // 「Hello, World!」が出力される
複数行の処理を書く場合は、中括弧が必要になります。
引数のあるアロー関数
次に引数のある場合のアロー関数を見ていきます。
下記のaddNumber関数は、2つの引数で渡された数値を足して返す関数です。
function addNumber(a, b) {
return a + b
}
console.log(addNumber(7, 8)) // 「15」が出力される
これをアロー関数で書く場合は、下記のように記載します。
const addNumber = (a, b) => {
return a + b
}
console.log(addNumber(3, 8)) // 「11」が出力される
丸括弧(())と中括弧({})の間にアローを書いています。
引数は丸括弧(())の中に書いて、処理は中括弧({})の中に書きます。
ハマりどころ(thisの使用について)
アロー関数は通常の関数とは挙動が違う箇所がいくつかあるようです。
今回ハマったのがオブジェクトの中でthisを使う場面です。
window.onload時に下記オブジェクトを定義して、オブジェクトのメソッドを呼んでみました。
const userObject1 = {
name: 'taro',
age: 23,
showName: function () {
console.log('名前:' + this.name)
}
}
userObject1.showName() // 「名前：taro」が出力される
showNameを呼ぶとオブジェクトのnameプロパティの値が出力されます。
この時、thisは作成したuserObject1オブジェクトを指しています。
これをアロー関数にすると、意図した挙動になりませんでした。
const userObject2 = {
name: 'jiro',
age: 18,
showName: () => {
console.log(this)
console.log('名前:' + this.name)
}
}
userObject2.showName() // 「名前：」が出力される
この時、thisはWindowオブジェクトを指していました。
このようにアロー関数を使用した場合には、自身を指すときに挙動が異なるので気をつけた方が良さそうです。
さらに身近でハマった例として、Vue.jsのOptions APIを使用して、下記のようなスクリプトを記載した場合です。
このmethodsのtotalValueはthisを使用して、priceとtaxを参照していますが、undefinedになってエラーになります。
export default {
data() {
return {
price: 100,
tax: 1.1,
}
},
methods: {
totalValue: () => {
return Math.round(this.price * this.tax)
}
}
}
この場合は、通常通りにfunctionで関数を書くべきでした。
methods: {
totalValue: function () {
return Math.round(this.price * this.tax)
}
}
終わりに
今回はアロー関数の書き方と、個人的にハマった箇所を1点あげてみました。
アロー関数を使うと、シンプルに関数が書けるので良いなと思いますが、挙動が違う箇所もあるということを踏まえて使っていくと良さそうです。
コメント