Square brackets surrounding parameter in function definition

Question

I came across the following code in the Ember CLI website:

export default Ember.Helper.helper(function([value]) {
  return value.toUpperCase();
});

What confuses me is the square brackets surrounding the value parameter. I can understand it in a function call, but why in function definition?

Answer 1

This is a destructuring assignment. The behavior described by @recursive is correct, but it may help to know that it is not limited to the first element. If it had been written with three elements:

function xyz([a, b, c]){...}

Then a, b, and c will all be declared variables available within the function scope, and in this case, would be equal to the first three elements of the array. Further - if the array passed as an argument doesn't have at least three elements, then the remaining elements specified in the parameter (a, b, and c) will exist as being declared, but will have the value of undefined:

// Example
function destructureThis([a, b, c]){
  console.log(a, b, c);
}

var shortArray = [1, 25];
destructureThis(shortArray);

// Prints to console:
// 1 25 undefined

Likewise, if the argument array is larger, additional elements are just ignored, as already noted.

var longerArray = [1, 5, 9, 50, 60];
destructureThis(longerArray);

// Prints to console:
// 1 5 9

Also... this is a recent enough addition to the ECMAScript spec that it should be tested in all your target environments (looking at you IE) if not using Babel or equivalent to transpile it for backwards compatibility.

Answer 2

This is all very surprising to me, but it appears to be valid javascript, according to the ECMAScript 2017 language specification, the formal parameter in a function declaration can any "binding element", including an array binding.

https://tc39.github.io/ecma262/#prod-BindingElement

The actual behavior of this feature seems to mean that the argument to the function should be an array, and value will take on the value of the first element in the array.