JavaScriptでの関数の引数名の重複が許容される場合とそうでない場合がある

2020-3-24

jsの関数の宣言方法によっては、引数名の重複を許容する場合とそうでない場合があります。

普通の関数の場合

普通の関数は、引数名の重複を許容します。

function myFunc(x, x) {
    console.log(x)
}

myFunc('foo', 'bar')

同じxという名前の引数がありますが、後のほうのxが適用され、コンソール上にはbarが表示されます。

bar

無名関数は、普通の関数と同じく引数名の重複を許容します。

const myFunc = function(x, x) {
    console.log(x)
}

myFunc('foo', 'bar')

無名関数の場合も、普通の関数と同じ結果になります。

bar

普通の関数と無名関数は引数名の重複を許容しますが、アロー関数は引数名の重複を許容しません。

const myFunc = (x, x) => {
    console.log(x)
}

myFunc('foo', 'bar')

これを実行すると、エラーになります。

SyntaxError: Duplicate parameter name not allowed in this context

普通の関数と無名関数は引数名の重複を許容していましたが、Strictモードにした場合は引数名の重複を許容しなくなります。

'use strict'

function myFunc(x, x) {
    console.log(x)
}

myFunc('foo', 'bar')

これを実行すると、エラーになります。

SyntaxError: Duplicate parameter name not allowed in this context

TypeScriptを使っていたりlintツールを使っていたりすれば、引数名が重複しているとエラーになってくれると思うので、正直気にしなくてもいいものだと思います。ただ、jsがこのような仕様になっているのを最近知ったので記事にしました(仕様なのかバグなのかは調べてませんが仕様だと思ってます)。