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
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.
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>
B: 110 is displayed in actual output? It should be B: undefined instead
a.toString() on single-element array will return the only value
a as 110 which is a number thus 110 is shown for b, but as a is a number it not an array thus a[0] is undefined.