meallhour
meallhour

Reputation: 15589

Default array displaying undefined value

The following Javascript function is displaying undefined value when it should display the actual value:

<script>
    function addArrayNew(a = [101], c) {
        document.write('A: ' + a[0] + '<br>');
        document.write('B: ' + a + '<br>');
        document.write('C: ' + c + '<br>');
    }

    addArrayNew(110);
</script>

Actual Output:

A: undefined
B: 110
C: undefined

Expected Output:

A: 101
B: 101
C: 110

Upvotes: 1

Views: 79

Answers (2)

palaѕн
palaѕн

Reputation: 73926

This is happening as the function description for addArrayNew has a as first argument and c as second argument. So, whatever you pass at first value for addArrayNew(110) that will be set for a only and if you pass addArrayNew(110, 100) that would be set for a first and then c. If you want to send 2nd parameter only and want a to set as default then you can pass undefined like:

function addArrayNew(a = [101], c) {
  document.write('A: ' + a[0] + '<br>');
  document.write('B: ' + a + '<br>');
  document.write('C: ' + c + '<br>');
}

addArrayNew(undefined, 110);

By passing undefined, we are actually forcing a to use the default value instead. But good practice is to always use optional parameters are last, so that by default they are set to undefined like:

function addArrayNew(c, a = [101]) {
  document.write('A: ' + a[0] + '<br>');
  document.write('B: ' + a + '<br>');
  document.write('C: ' + c + '<br>');
}

addArrayNew(110);

Here, using addArrayNew(110) or addArrayNew(110, undefined) will give you same result. But you can really understand the importance of using default values at last when you will have a large number of params to a function like:

function addArrayNew(a, b=1, c=2, d=3, e=4, f=5) {
  document.write(`${a} - ${b} - ${c} - ${d} - ${e} - ${f}`);
}

addArrayNew(110);

As you see by putting the optional values at last, we have only call function like addArrayNew(110) instead of doing addArrayNew(undefined,undefined,undefined,undefined,undefined, 110) if a was at last.

Upvotes: 2

mickl
mickl

Reputation: 49975

In your example 110 gets passed as first (and only) argument so it overwrites a insted of c (which will become undefined). It's better to put optional parameters as the last ones and then you can pass more or less arguments to your function:

<script>
    function addArrayNew(c, a = [101]) {
        document.write('A: ' + a[0] + '<br>');
        document.write('B: ' + a + '<br>');
        document.write('C: ' + c + '<br>');
    }

    addArrayNew(110);
</script>

Upvotes: 2

Related Questions