How to javascript function parameters

JavaScript Function Parameters

A JavaScript function does not perform any checking on parameter values (arguments).

Function Parameters and Arguments

Earlier in this tutorial, you learned that functions can have parameters:

Function parameters are the names listed in the function definition.

Function arguments are the real values passed to (and received by) the function.

Parameter Rules

JavaScript function definitions do not specify data types for parameters.

JavaScript functions do not perform type checking on the passed arguments.

JavaScript functions do not check the number of arguments received.

Default Parameters

If a function is called with missing arguments (less than declared), the missing values are set to undefined .

Sometimes this is acceptable, but sometimes it is better to assign a default value to the parameter:

Example

Default Parameter Values

ES6 allows function parameters to have default values.

Example

If y is not passed or undefined, then y = 10.

Function Rest Parameter

The rest parameter (. ) allows a function to treat an indefinite number of arguments as an array:

Example

function sum(. args) <
let sum = 0;
for (let arg of args) sum += arg;
return sum;
>

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

The Arguments Object

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:

Example

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() let max = -Infinity;
for (let i = 0; i < arguments.length; i++) if (arguments[i] > max) max = arguments[i];
>
>
return max;
>

Or create a function to sum all input values:

Example

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() let sum = 0;
for (let i = 0; i < arguments.length; i++) sum += arguments[i];
>
return sum;
>

If a function is called with too many arguments (more than declared), these arguments can be reached using the arguments object.

Arguments are Passed by Value

The parameters, in a function call, are the function’s arguments.

JavaScript arguments are passed by value: The function only gets to know the values, not the argument’s locations.

If a function changes an argument’s value, it does not change the parameter’s original value.

Changes to arguments are not visible (reflected) outside the function.

Objects are Passed by Reference

In JavaScript, object references are values.

Because of this, objects will behave like they are passed by reference:

If a function changes an object property, it changes the original value.

Changes to object properties are visible (reflected) outside the function.

Источник

Let’s Master JavaScript Function Parameters

A function is a cohesive piece of code coupled to perform a specific task. The function accesses the outer world using its parameters.

To write concise and efficient JavaScript code, you have to master the function parameters.

In this post, I will explain with interesting examples of all the features that JavaScript has to efficiently work with function parameters.

Before I go on, let me recommend something to you.

The path to becoming good at JavaScript isn’t easy. but fortunately with a good teacher you can shortcut.

Take «Modern JavaScript From The Beginning 2.0» course by Brad Traversy to become proficient in JavaScript in just a few weeks. Use the coupon code DMITRI and get your 20% discount!

A JavaScript function can have any number of parameters.

Let’s define functions that have 0, 1 and 2 parameters:

The 3 functions above were called with the same number of arguments as the number of parameters.

But you can call a function with fewer arguments than the number of parameters. JavaScript does not generate any errors in such a case.

However, the parameters that have no argument on invocation are initialized with undefined value.

For example, let’s call the function sum() (which has 2 parameters) with just one argument:

The function is called only with one argument: sum(1) . While param1 has the value 1 , the second parameter param2 is initialized with undefined .

param1 + param2 is evaluated as 1 + undefined , which results in NaN .

If necessary, you can always verify if the parameter is undefined and provide a default value. Let’s make the param2 default to 0 :

But there is a better way to set default values. Let’s see how it works in the next section.

The ES2015 default parameters feature allows initializing parameters with defaults. It’s a better and more concise way than the one presented above.

Let’s make param2 default to value 0 using ES2015 default parameters feature:

In the function signature there’s now param2 = 0 , which makes param2 default to 0 if it doesn’t get any value.

Now if the function is called with just one argument: sum(1) , the second parameter param2 is initialized with 0 .

Note that if you set undefined as the second argument sum(1, undefined) , the param2 is initialized with 0 too.

3. Parameter destructuring

What I especially like in the JavaScript function parameters is the ability to destructure. You can destructure inline the parameter’s objects or arrays.

This feature makes it useful to extract just a few properties from the parameter object:

< name >is a parameter on which was applied to the destructuring of an object.

You can easily combine the default parameters with destructuring:

< name = 'Unknown' >= <> defaults to an empty object.

You can use all the power of combining the different types of destructuring. For example, let’s use the object and array destructuring on the same parameter:

The destructuring of parameter [< name >] is more complex. It extracts the first item of the array, then reads from this item the name property.

Another nice feature of JavaScript functions is the ability to call the same function with a variable number of arguments.

If you do so, it makes sense to use a special object arguments , which holds all the inocation arguments in an array-like object.

For example, let’s sum the arguments of a function:

arguments contains the arguments the function was called with.

arguments is an array-like object, so you cannot use all the fancy array methods on it.

Another difficulty is that each function scope defines it’s own arguments object. Thus you might need an additional variable to access the outer function scope arguments :

There’s a special case: arguments is not available inside the arrow functions.

arguments is not defined inside the arrow function.

But this is not a big problem. You can use more efficiently the rest parameters to access all the arguments inside the arrow function. Let’s see how to do that in the next section.

The ES2015 rest parameter lets you collect all the arguments of the function call into an array.

Let’s use the rest parameters to sum the arguments:

. numbers is a rest parameter that holds the arguments in an array [5, 6] . Since numbers is an array, you can easily use all the fancy array methods on it (contrary to arguments that is an array-like object).

While the arguments object is not available inside the arrow functions, the rest parameters work without problem here:

If not all the arguments should be collected inside the rest parameter, you can freely combine regular parameters with the rest parameter.

multiplier is a regular parameter that gets the first argument’s value. Then the rest parameter . numbers receives the rest of the arguments.

Note that you can have up to one rest parameter per function. As well as the rest parameter must be positioned last in the function parameters list.

Beyond the basic usage, JavaScript offers lots of useful features when working with function parameters.

You can easily default a parameter when it’s missing.

All the power of JavaScript destructuring can be applied to parameters. You can even combine destructuring with default parameters.

arguments is a special array-like object that holds all the arguments the function was invoked with.

As a better alternative to arguments , you can use the rest parameters feature. It holds as well the arguments list, however, it stores them into an array.

Plus you can use regular parameters with rest parameter, the latter, however, must always be last in the params list.

What parameters feature do you use the most? Feel free to write a comment below!

Источник