JavaScript - Default Parameters

Hello there, future JavaScript wizards! Today, we're going to dive into the magical world of default parameters in JavaScript. As your friendly neighborhood computer teacher, I'm excited to guide you through this journey. So, grab your virtual wands (keyboards), and let's cast some code spells!

Default Parameters Syntax

In the olden days of JavaScript (before ES6), setting default values for function parameters was a bit like trying to teach a cat to fetch - possible, but not very elegant. We had to use tricks like this:

function greet(name) {
  name = name || 'Anonymous';
  console.log('Hello, ' + name + '!');
}

But now, with ES6 and beyond, we have a much nicer way to do this:

function greet(name = 'Anonymous') {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Anonymous!
greet('Alice'); // Output: Hello, Alice!

In this example, if we don't pass an argument to greet(), it uses the default value 'Anonymous'. It's like having a polite doorman who uses a generic greeting if he doesn't know your name!

Passing an expression as a default parameter value

Default parameters aren't limited to simple values. They can be expressions too! Let's look at an example:

function calculateArea(length, width = length) {
  return length * width;
}

console.log(calculateArea(5)); // Output: 25
console.log(calculateArea(5, 3)); // Output: 15

Here, if we don't provide a width, it uses the length value. It's like a lazy square-maker - if you only give it one side, it assumes you want a square!

We can get even fancier:

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
  console.log(greeting);
}

getRandomGreeting('Bob'); // Output: Hello, Bob! The lucky number is 42. (or any random number)

This function generates a random lucky number every time it's called without a custom greeting. It's like a fortune cookie, but friendlier!

Passing Undefined Argument

Here's a quirky behavior to keep in mind:

function showMessage(message = 'Default message') {
  console.log(message);
}

showMessage(undefined); // Output: Default message
showMessage(null); // Output: null

Passing undefined is the same as not passing anything at all, so it triggers the default. But null is considered a valid value, so it overrides the default. It's like undefined is saying "I don't know, you decide," while null is saying "I've made my choice, and my choice is nothing!"

Function expression as a default parameter

We can even use function expressions as default parameters. Check this out:

function greet(name, getGreeting = () => 'Hello') {
  console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // Output: Hello Alice!
greet('Bob', () => 'Hi there'); // Output: Hi there Bob!

This allows us to customize not just the value, but the behavior of our default parameter. It's like having a customizable greeting robot!

Function Optional Parameters

Now, let's talk about optional parameters. In JavaScript, all parameters are optional by default. If you don't provide them, they become undefined. But with default parameters, we can give them fallback values:

function createUser(name, age, country = 'Unknown') {
  return {
    name: name,
    age: age,
    country: country
  };
}

console.log(createUser('Alice', 30)); // Output: { name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // Output: { name: 'Bob', age: 25, country: 'USA' }

This way, we can make some parameters required (like name and age) and others optional (like country). It's like filling out a form where some fields are marked with a red asterisk, and others are just nice-to-have!

Here's a table summarizing the methods we've discussed:

Method	Description	Example
Basic Default Parameter	Provides a fallback value if no argument is passed	function greet(name = 'Anonymous')
Expression as Default	Uses an expression to compute the default value	function calcArea(length, width = length)
Undefined Behavior	undefined triggers default, null doesn't	showMessage(undefined) vs showMessage(null)
Function as Default	Uses a function to compute the default value	function greet(name, getGreeting = () => 'Hello')
Optional Parameters	Makes some parameters optional with defaults	function createUser(name, age, country = 'Unknown')

Remember, young padawans, default parameters are like safety nets in your code. They catch you when you fall (or forget to pass an argument), ensuring your functions always have something to work with. Use them wisely, and may the code be with you!

Credits: Image by storyset