Updated April 14, 2023
Introduction to JavaScript Default Value
JavaScript default values are said to be values which are assigned by JavaScript compiler. If it is function parameter then the default value is “undefined”. Anyway as we have development scope we can set any value to this function parameter. Previously this default value is used to test parameter values in the function body and assigned any value if they are undefined.
Real Time Example: If we want to multiply 2 numbers through function but while calling if we pass only one number than we go result as NaN because we have passed only one value and second value automatically undefined so number*undefined becomes NaN (Not a Number).
How does Default Value work in JavaScript?
Its working is based on required values and values to be assigned through the function. Let suppose function expects 5 parameters but if we assign only 3 then rest of the values assigned by JavaScript compiler that is undefined.
Syntax:
function functionName(a,b,c,d) {
return a*b*c*d;
}
functionName(1,2,3,4) // 24
functionName(1,2,3) // NaNExamples of JavaScript Default Value
Given below are the examples mentioned:
Example #1
Addition default function parameters.
Code:
<!DOCTYPE html>
<html>
<title>Default Value</title>
<!--CSS Styles-->
<style>
p
{
border: ridge 8px red;
font-size: 20px;
color: navy;
text-align: justify;
}
h1
{
color: gray;
text-align:center;
}
</style>
<body>
<div>
<h1>Introduction on Default Value in JavaScript</h1>
<p>JavaScript default values are said to be values which are assigned by JavaScript compiler. If it is function parameter then the default value is "undefined". Anyway as we have development scope we can set any value to this function parameter. Previously this default value is used to test parameter values in the function body and assigned any value if they are undefined.</p>
<p>Real Time Example: If we want to multiply 2 numbers through function but while calling if we pass only one number than we go result as NaN because we have passed only one value and second value automatically undefined so number*undefined becomes NaN (Not a Number).
</p>
</div>
<!--JavaScript Logic-->
<script>
function getAddition(a,b,c) {//function definition
return a+b+c;
}
var add1=getAddition(1,2,3);//Passing all 3 values
var add2=getAddition(1,2);//Passing 2 values and one more undefined
document.write("<h2 style='color:red'>Function addition is :</h2>"+add1);//displaying the output in the browser
document.write("<h2 style='color:red'>Function addition is :</h2>"+add2);//displaying the output in the browser
</script>
</body>
</html>Output:
Example #2
Addition default function parameters set to user value.
Code:
<!DOCTYPE html>
<html>
<title>Default Value</title>
<!--CSS Styles-->
<style>
p
{
border: solid 4px blue;
font-size: 20px;
color: fuchsia;
text-align: justify;
}
h1
{
color: red;
text-align:center;
}
</style>
<body>
<div>
<h1>Introduction on Default Value in JavaScript</h1>
<p>JavaScript default values are said to be values which are assigned by JavaScript compiler. If it is function parameter then the default value is "undefined". Anyway as we have development scope we can set any value to this function parameter. Previously this default value is used to test parameter values in the function body and assigned any value if they are undefined.</p>
<p>Real Time Example: If we want to multiply 2 numbers through function but while calling if we pass only one number than we go result as NaN because we have passed only one value and second value automatically undefined so number*undefined becomes NaN (Not a Number).
</p>
</div>
<!--JavaScript Logic-->
<script>
function getAddition(a,b) {//function definition
b = (typeofb !== 'undefined') ? b : 1
return a+b;
}
var add1=getAddition(1,2);//Passing all 2 values
var add2=getAddition(1);//Passing 1 value and one more undefined
//if value undefined then it automatically set it to 1
document.write("<h2 style='color:green'>Function addition is :</h2>"+add1);//displaying the output in the browser
document.write("<h2 style='color:green'>Function addition is :</h2>"+add2);//displaying the output in the browser
</script>
</body>
</html>Output:
Example#3
Multiplication function parameters with some values.
Code:
<!DOCTYPE html>
<html>
<title>Default Value</title>
<!--CSS Styles-->
<style>
p
{
border: dashed 4px gray;
font-size: 20px;
color: fuchsia;
text-align: justify;
}
h1
{
color: red;
text-align:center;
}
</style>
<body>
<div>
<h1>Introduction on Default Value in JavaScript</h1>
<p>JavaScript default values are said to be values which are assigned by JavaScript compiler. If it is function parameter then the default value is "undefined". Anyway as we have development scope we can set any value to this function parameter. Previously this default value is used to test parameter values in the function body and assigned any value if they are undefined.</p>
<p>Real Time Example: If we want to multiply 2 numbers through function but while calling if we pass only one number than we go result as NaN because we have passed only one value and second value automatically undefined so number*undefined becomes NaN (Not a Number).
</p>
</div>
<!--JavaScript Logic-->
<script>
function getMultiplication(a,b=2,c=1) {//function definition
return a*b*c;
}
var mul1=getMultiplication(1,2,3);//Passing all 3 values
var mul2=getMultiplication(1,2,undefined);//Passing 2 values and one more undefined value passed
document.write("<h2 style='color:blue'>Function multiplication is :</h2>"+mul1);//displaying the output in the browser
document.write("<h2 style='color:blue'>Function multiplication is :</h2>"+mul2);//displaying the output in the browser
</script>
</body>
</html>Output:
Recommended Articles
This is a guide to JavaScript Default Value. Here we discuss how does it work? and examples respectively. They are assigned by JavaScript compiler. If function does not have any value then compiler automatically assigned default value. You may also have a look at the following articles to learn more –
