DEV Community

Cover image for Function with duplicate parameters. Your turn, JS!
Andrey Smolko
Andrey Smolko

Posted on • Edited on

Function with duplicate parameters. Your turn, JS!

Assertion: We are in parallel universe where all weird code snippets may exist and be used.

Let's imagine the simplest function declaration with 2 parameters... but both parameters have the same name:

function f(a,a){
  console.log(a)
}
Enter fullscreen mode Exit fullscreen mode

What reaction would you expect from JS?

Probably there are 2 options:
1) throw some error (we are lucky if it's not runtime error);
2) create valid function f

Of course we may just run the code and check but it is too simple.
Instead, I propose to find the origin of truth and open ES specification ๐Ÿ“•๐Ÿ“—๐Ÿ“˜

Inside the ES spec

As in the snippet we try to create a function, so go to Function Definitions section in the spec. Inside we may find the following:

FunctionDeclaration : function BindingIdentifier ( FormalParameters ) { FunctionBody }
FunctionExpression : function BindingIdentifieropt ( FormalParameters ) { FunctionBody }

  • If the source code matching this production is strict code, the Early Error rules for StrictFormalParameters : FormalParameters are applied.

It means if you try to create a function as function declaration or function expression in "strict mode" some additional Early Error(errors on code parsing stage) rule is applied:

StrictFormalParameters : FormalParameters

  • It is a Syntax Error if BoundNames of FormalParameters contains any duplicate elements.

In that context BoundNames are just parameter names.

So the spec says that if you try to create a function as function declaration or function expression in "strict mode" and use the same name for function parameters then JS returns Syntax Error!

function f(a,a){
  'use strict'
  console.log(a)
}
Enter fullscreen mode Exit fullscreen mode

Just copy and paste the above snippet in your browser console and check the error:

Uncaught SyntaxError: Duplicate parameter name not allowed in this context

Rather obviously, right?

Ok cool, but what about non-strict mode?

In non-strict mode mentioned Early Error rules is not applied to the function declaration or function expression and JS just creates a valid function which you may call later without any errors:

function f(a,a){
  console.log(a)
}

f(0,100)
// 100 in console
Enter fullscreen mode Exit fullscreen mode

JS freedom is one love!

Ok cool, but what about arrow function definition?

Let's check the arrow function parameters syntax in the spec:

ArrowFormalParameters :
( StrictFormalParameters )

It means that duplicate parameters Early Error rule is always applied to arrow function definition even if 'strict mode' is not defined explicitly.


Instead of conclusion:

  • Function declaration and function expression with duplicate parameters in 'strict mode' throw Syntax Error;
  • Function declaration and function expression with duplicate parameters in 'non-strict mode' create a valid function;
  • Arrow function definition with duplicate parameters always throws Syntax Error;
  • Keep calm and read specs :) ๐Ÿ“•๐Ÿ“—๐Ÿ“˜

P.S

The ES6 spec contains Annex C - list of the strict mode restriction and exceptions. There is a point about our topic in that list as well.

Top comments (0)