FunctionOverloading

DRAFT

Correction

Here is what's right.

There is no native function overloading in JavaScript.

If a function with the same name is defined twice in the same context, only the second definition is stored.

function foo() { console.log("First definition") }
function foo(a) { console.log("Second definition") }

foo() // "Second definition"
foo(10) // "Second definition"

Simulating function overloading starting from ECMAScript 9: rest parameter syntax

While there is not function overloading in JavaScript, it is possible to simulate the behavior of function overloading inside a single implementation of a function.

Starting from ECMAScript 9, the rest parameter syntax allows to represent an indefinite number of arguments as an array:

function foo(a, b, ...myArgs) {
  console.log(`a:${a}   b:${b}   myArgs:[${myArgs}]`)
}

foo()        // a:undefined   b:undefined   myArgs:[]
foo(1)       // a:1   b:undefined   myArgs:[]
foo(1,2)     // a:1   b:2   myArgs:[]
foo(1,2,3)   // a:1   b:2   myArgs:[3]
foo(1,2,3,4) // a:1   b:2   myArgs:[3,4]

Thanks to the rest syntax it is possible to detect how many arguments are passed to the function when it is called. It is possible to simulate function overloading by checking how many element are inside the array defined by the rest syntax:

function foo(...myArgs) {
  if(myArgs.length === 1) {
    /* First implementation */
  } else if (myArgs.length === 2) {
    /* Second implementation */
  } else {
    /* Third implementation */
  }
}

If necessary, it is also possiible to check types of the elements inside the rest parameter array:

function foo(...myArgs) {
  if(typeof myArgs[1] === "Number" && typeof myArgs[2] === "Number") {
    /* First implementation */
  } else {
    /* Second implementation */
  }
}

Simulating function overloading before ECMAScript 9: the arguments object

In JavaScript it is possible to access the list of arguments from within the function by using the Array-like object arguments:

function foo() {
	console.log(arguments.length)
}

foo(1)       // 1
foo(1,2)     // 2
foo(1,2,3)   // 3
foo(1,2,3,4) // 4

arguments is an Array-like object because it defines the property length, but does not define the Array built-in methods like forEach or map

With arguments it is possible to check how many arguments are passed to the function, and depending on the number of arguments received it is possible to change the behavior of a function:

function foo() {
  if(arguments.length === 1) {
    /* First implementation */
  } else if (arguments.length === 2) {
    /* Second implementation */
  } else {
    /* Third implementation */
  }
}

Similarly to the rest parameter syntax, it is possible to check the type of the elements in the arguments object:

function foo() {
  if(typeof arguments[1] === "Number" && typeof arguments[2] === "Number") {
    /* First implementation */
  } else {
    /* Second implementation */
  }
}

Origin

Where could this misconception come from?

Functions are objects that can be stored into variables and object’s properties. The assignment depends on the name given to the function.

Similarly to any other assignment, when a function is defined twice, the second definition overrides the first one.