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!

Parameter default dalam JavaScript

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan mandar ke dunia magis parameter default dalam JavaScript. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengorbit Anda dalam perjalanan ini. Jadi, ambil wands virtual Anda (papan ketik), dan mari kita buat mantra kode!

Sintaks Parameter Default

Di zaman kuno JavaScript (sebelum ES6), menetapkan nilai default untuk parameter fungsi agak seperti mencoba mengajarkan kucing untuk mengambil - mungkin, tapi tidak very elegan. Kita harus menggunakan trik seperti ini:

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

Tapi sekarang, dengan ES6 dan seterusnya, kita memiliki cara yang jauh lebih bagus untuk melakukan ini:

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

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

Dalam contoh ini, jika kita tidak memberikan argumen ke greet(), itu menggunakan nilai default 'Anonymous'. Itu seperti memiliki penjaga pintu yang sopan yang menggunakan salam umum jika dia tidak tahu nam Anda!

Mensampaikan ekspresi sebagai nilai default parameter

Parameter default tidak terbatas pada nilai sederhana. Mereka juga bisa ekspresi! Mari kita lihat contoh:

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

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

Di sini, jika kita tidak menyediakan lebar, itu menggunakan nilai panjang. Itu seperti membuat penyusun yang malas - jika Anda hanya memberikan satu sisi, dia menganggap Anda ingin persegi!

Kita bisa menjadi lebih keren:

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. (atau setiap nomor acak)

Fungsi ini menghasilkan nomor keberuntungan acak setiap kali dipanggil tanpa salam khusus. Itu seperti kue nasib, tapi lebih ramah!

Mensampaikan Argumen Undefined

Ini adalah perilaku aneh yang perlu diingat:

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

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

Mengirimkan undefined sama seperti tidak mengirimkan apa-apa, jadi itu memicu nilai default. Tetapi null dianggap nilai valid, jadi itu menimpa default. Itu seperti undefined mengatakan "Saya tidak tahu, Anda yang memutuskan," sedangkan null mengatakan "Saya membuat pilihan, dan pilihan saya adalah nihil!"

Ekspresi fungsi sebagai parameter default

Kita bahkan bisa menggunakan ekspresi fungsi sebagai parameter default. Cek ini:

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

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

Ini memungkinkan kita untuk menyesuaikan tidak hanya nilai, tetapi perilaku parameter default. Itu seperti memiliki robot salam yang dapat disesuaikan!

Parameter Opsional Fungsi

Sekarang, mari bicarakan tentang parameter opsional. Dalam JavaScript, semua parameter secara default adalah opsional. Jika Anda tidak menyediakan mereka, mereka menjadi undefined. Tetapi dengan parameter default, kita bisa memberikan nilai fallback:

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' }

Dengan cara ini, kita bisa membuat beberapa parameter diperlukan (seperti nama dan umur) dan yang lain opsional (seperti negara). Itu seperti mengisi formulir di mana beberapa bidang ditandai dengan bintang merah, dan yang lain hanya nice-to-have!

Berikut adalah tabel yang menggabungkan metode yang kita diskusikan:

Metode	Deskripsi	Contoh
Parameter Default Dasar	Menyediakan nilai fallback jika tidak ada argumen yang diberikan	function greet(name = 'Anonymous')
Ekspresi sebagai Default	Menggunakan ekspresi untuk menghitung nilai default	function calcArea(length, width = length)
Perilaku Undefined	undefined memicu default, null tidak	showMessage(undefined) vs showMessage(null)
Fungsi sebagai Default	Menggunakan fungsi untuk menghitung nilai default	function greet(name, getGreeting = () => 'Hello')
Parameter Opsional	Membuat beberapa parameter opsional dengan nilai default	function createUser(name, age, country = 'Unknown')

Ingat, para padawan muda, parameter default adalah seperti jaring keselamatan dalam kode Anda. Mereka menangkap Anda saat Anda jatuh (atau lupa mengirimkan argumen), memastikan bahwa fungsi Anda selalu memiliki sesuatu untuk bekerja. Gunakan mereka bijaksana, dan may the code be with you!

Credits: Image by storyset