JavaScript function parameter

Published on: 25th Aug 2023

Overview

There is some secret feature that lies in the function parameter. One of them is the default value and another one is the destructuring parameter.

Default value for the function parameter

You may assign a default value for the function parameter like the following function.

function test0 (a = 1, b = 2) {
    console.group('test0()');
    console.log('a=', a);
    console.log('b=', b);
    console.log('');
    console.groupEnd();
}

Here's the result when you call it with different values.

test0();
//output:
// test0()
//   a= 1   //<<==========uses default value.
//   b= 2   //<<==========uses default value.

test0(3);
//output:
// test0()
//   a= 3   //<<==========uses the value from the caller.
//   b= 2   //<<==========uses default value.

test0(null, 5);
//output:
// test0()
//   a= null    //<<==========watch out! null means null value!
//   b= 5
  
test0(undefined, 8);  
  
//output:
// test0()
//   a= 1      //<<==========undefined means use the default value!
//   b= 8

Basically, if the parameter value is undefined, it will fallback to the default value. null is a valid value and it will be passed into the function for processing.

Most of the time we write our function parameters without the need of default value.

Use cases

You need a function that rounds the result to the nearest $1 and removes all decimal points. On the other hand, you also want to make this function flexible in case some programs want to have 2 of decimal points (rounding to the nearest of $0.01).

function round_amount(value, no_of_digit = 0) {..}

Destructuring function parameter

Destructuring function parameters is like declaring an object in the function parameter. As a result, the function itself cannot access any field that has not been declared. This is good for telling the caller on which field will be used in the function.

For example, you have a function that takes x (an Object type) parameter where x has these fields: a, b, c and d.

function test1 (x) {
    console.group('test1()');
    console.log(arguments[0]);
    console.log(x.a, x.b, x.c, x.d);    //<===test1 function can access 'd'.
    console.log('');
    console.groupEnd();
}

Let's say, the test1 function does not need to know x.d. You may declare the parameter like this: {a, b, c} instead of x. This hides the d value from the function.

function test1 ({a, b, c}) {
    console.group('test1()');
    console.log(arguments[0]);
    console.log(a, b, c);               //<===test1 function cannot access 'd' any more.
    console.log('');
    console.groupEnd();
}

When you call the test1 function with a different object, you will see different results (as shown below).

// 'b' field name is missing in the object.
test1({ a: 1, c:3 });
// output:
// test1()
//   { a: 1, c: 3 }
//   1 undefined 3

test1({ a: 1, b: 2, c:3 });
// output:
// test1()
//   { a: 1, b: 2, c: 3 }
//   1 2 3

Use cases for destructuring parameter

If the friend's object looks like this,

function friend_obj(friend_id, birth_date) {
    this.friend_id = friend_id;
    this.birth_date = birth_date;
    this.age = (new Date()).getFullYear() - birth_date.getFullYear();
}

The following function will send a birthday email to the friend who was born in the given month. It does not need to access the age field. So, we hide it.

function send_birthday_email(given_month, { friend_id, birth_date }) {..}

The following function checks the permission to join the party and it is required to meet the minimum age value. In this case, it does not need to access the birth date. So, we hide the birth_date field.

function can_join_party(minimum_age, { friend_id, age }) {..}

References

Jump to #JAVASCRIPT blog

Author

Lau Hon Wan, software developer.