JavaScript Function Parameters & Return

Introduction

Functions are a fundamental part of JavaScript, allowing you to write reusable and modular code. However, to make functions truly powerful, you need to understand two key concepts: parameters and return values.

  • Parameters allow you to pass data into a function
  • Return values allow a function to send data back

These concepts are essential for building dynamic applications, handling user input, processing data, and performing calculations.

In this guide, you’ll learn everything about JavaScript function parameters and return values, including syntax, types, examples, real-life use cases, common mistakes, and interview questions.

What are Function Parameters?

Parameters are variables listed in the function definition. They act as placeholders for the values (arguments) passed into the function.

📖
Best Practices:
  • Always use return when needed
  • Use default parameters
  • Use meaningful parameter names
  • Keep functions simple

Example:


function greet(name) {
   console.log("Hello " + name);
}
greet("John");

Output:

Hello John

In the above example, name is a parameter and “John” is an argument.

Types of Parameters

There are many types of Parameters.

1. Default Parameters

Default parameters allow you to set a default value if no argument is provided.


function greet(name = "Guest") {
   console.log("Hello " + name);
}

greet(); // Hello Guest

Output:

Hello Guest

2. Rest Parameters

Rest parameters allow you to handle multiple arguments as an array.

Example:


function sum(...numbers) {
   return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Output:

10

3. Destructured Parameters

You can extract values from objects or arrays directly.

Example:


function displayUser({ name, age }) {
   console.log(name, age);
}

displayUser({ name: "John", age: 35 });

Output:

John 35

4. Optional Parameters

JavaScript functions allow missing arguments.

Example:


function add(a, b) {
   return a + b;
}

console.log(add(5)); // NaN

Output:

NaN

Passing Functions as Parameters

Functions can accept other functions as parameters.


function process(callback) {
   return callback(5);
}

process(function(x) {
   return x * 2;
});

Output:

10

Function Returning Another Function

You will see a function return another function.

Example:


function multiplier(factor) {
   return function(num) {
       return num * factor;
   };
}

let double = multiplier(2);
console.log(double(5)); // 10

Output:

10

Parameter vs Argument

Feature Parameter Argument
Definition Variable in function Value passed
Example function(a) add(5)

Common Mistakes

You will see common mistakes in the example below.

1. Forgetting Return

When Beginners forget to return.


function add(a, b) {
   a + b;
}

2. Using Return After Code


function test() {
   return "Hello";
   console.log("World"); // never runs
}

Conclusion

Understanding function parameters and return values is essential for mastering JavaScript. These concepts allow you to create flexible, reusable, and efficient functions.

By using parameters effectively and returning meaningful values, you can build powerful applications and improve your coding skills.

Related JavaScript Tutorials