JS Function Arguments

JavaScript Function Parameters and Arguments

You may have noticed that we frequently talk about parameters and arguments. Both terms are commonly used to describe the information that is passed into a function, but they have a distinct difference in JavaScript:

• Parameter: A variable listed inside the parentheses in the function definition. It defines the scope of the function.
• Argument: The actual value that is passed to the function when it is invoked (called).

Basic Parameters and Arguments

Parameters are declared when you write the function:

function myFunc(param1, param2) {
    // code of the function;
}

A practical example could be a function that takes x and y as parameters and adds them together. Depending on the arguments you call the function with, the outcome changes, making the function a very powerful and flexible building block.

function addTwoNumbers(x, y) {
    console.log(x + y);
}

// Calling the function with different arguments
addTwoNumbers(3, 4);     // Outputs: 7
addTwoNumbers(12, -90);  // Outputs: -78

Default or Unsuitable Parameters

What happens if we call our addTwoNumbers() function without providing any arguments?

addTwoNumbers();

Some programming languages might crash, but not JavaScript. JavaScript simply gives the missing variables a default value of undefined. And as we know, undefined + undefined equals NaN (Not a Number).

Setting Default Parameters

To prevent NaN errors, we can tell JavaScript to use specific default parameters. This is done by assigning a value directly in the function definition:

function addTwoNumbers(x = 2, y = 3) {
    console.log(x + y);
}

addTwoNumbers();       // Outputs: 5 (uses defaults: 2 + 3)
addTwoNumbers(6, 6);   // Outputs: 12 (overrides defaults: 6 + 6)
addTwoNumbers(10);     // Outputs: 13 (x becomes 10, y uses default 3)

Extra Arguments Note: If you call a function with more arguments than parameters (e.g., addTwoNumbers(1, 2, 3, 4)), JavaScript will not crash. It simply executes the function using the first arguments that map to parameters and ignores the rest.

Arrow Functions

Arrow functions are a special, shorthand way of writing functions in JavaScript. They are fantastic for writing quick implementations on the spot, such as passing a function as an argument.

Arrow Function Syntax

• Two or more parameters: (param1, param2) => body of the function;
• No parameters: () => body of the function;
• One parameter (parentheses are optional): param => body of the function;
• Multiline body: (param1, param2) => { /* multiple lines of code */ };

// Traditional Function
function doingStuff(x) {
    console.log(x);
}

// Equivalent Arrow Function
let doingArrowStuff = x => console.log(x);
doingArrowStuff("Great!"); // Outputs: Great!
// Arrow function with multiple parameters
let addNumbers = (x, y) => console.log(x + y);
addNumbers(5, 3); // Outputs: 8

Using Arrow Functions with Built-in Methods

Arrow functions are commonly combined with built-in array methods like forEach(). This allows us to execute code for every element in an array without writing a complicated for loop.

const arr = ["squirrel", "alpaca", "buddy"];
arr.forEach(e => console.log(e));

The Spread Operator (...)

The spread operator consists of three dots (...) used before a referenced array or string. It literally "spreads out" the elements of an array.

This is highly useful for merging arrays or passing an array of numbers as individual arguments into a function.

// Merging Arrays
let spread = ["so", "much", "fun"];
let message = ["JavaScript", "is", ...spread, "and", "very", "powerful"];

console.log(message); 
// Outputs: ['JavaScript', 'is', 'so', 'much', 'fun', 'and', 'very', 'powerful']
// Passing array elements as arguments
function addFourNumbers(x, y, z, a) {
    console.log(x + y + z + a);
}
let arr1 = [5, 9];
let arr2 = [6, 7];
addFourNumbers(...arr1, ...arr2); // Outputs: 27

This operator saves you from manually referencing each array index (e.g., arr[0], arr[1]), reducing code complexity.

The Rest Parameter (...)

The rest parameter looks exactly like the spread operator (...), but it is used inside the function parameter list instead of during invocation.

While the spread operator unpacks an array into single elements, the rest parameter gathers single elements into an array. This is extremely useful when you do not know exactly how many arguments will be passed into your function.

function someFunction(param1, ...param2) {
    console.log("Parameter 1:", param1);
    console.log("Rest of parameters:", param2);
}

// We pass three arguments, but the function definition uses the rest parameter
someFunction("hi", "there!", "How are you?");

In the example above, "hi" becomes param1, and every other argument passed afterward is bundled up into a brand new array called param2.