Introduction to JavaScript undefined
If you want to understand the definition of undefined in JavaScript, you must know the definition of declaration and definition in JavaScript. Declaring a variable in JavaScript with keyword var said to be a declaration.
Example: var name;
- Definition: Assigning a value to a declared variable in JavaScript said to be the definition.
Example: name=10;
- Undefined: Declared variable does not define in JavaScript considered as undefined. It means we are not assigned any value to the declared variable.
Example: var name; //no value the variable name
How does undefined work in JavaScript?
As JavaScript loosely typed (a type of variable is not important), if we do not assign any value to a variable then automatically JavaScript machine assigns undefined value to it.
Syntax:
a. var book;
b. var obj={};
c. var array=[];
d. var fun=function()
{
return;
};
e. var fun=function(a)
{
return a;
}
fun();
Explanation:
- In Syntax, a variable book is not defined so JavaScript machine assigned undefined as its value.
- In Syntax b object variable obj is not defined so JavaScript machine assigned undefined as its value.
- In Syntax c array variable array is not defined so JavaScript machine assigned undefined as its value.
- In Syntax d function variable fun is not returning any value so JavaScript machine assigned undefined as its value.
- In Syntax e function variable fun is trying to return undefined value a so JavaScript machine assigned undefined as its value.
- The best way to compare value is the undefined value or not in JavaScript is by using typeof keyword.
Examples of JavaScript undefined
The examples of the following are given below:
Example #1 – Returning undefined variable
<!DOCTYPE html>
<html>
<body>
<script>
var name;
document.write("My name is : "+name);
</script>
</body>
</html>
Output:
Explanation:
- In the above code, we are trying to print an undefined variable name so, we got output as My name is: undefined.
Example #2 – Assigning a value to an undefined variable
<!DOCTYPE html>
<html>
<body>
<script>
var name;
if(typeof name==='undefined')
{
name="Amardeep";
}
document.write("My name is : "+name+" after reassing");
</script>
</body>
</html>
Output:
Explanation:
- We are checking first name variable is “undefined ” or not with typof operator
- name variable is not defined so if the condition becomes true.
- name variable reassigns to String “Amardeep”.
- Printing the reassigned value in the last line.
Example #3 – Printing undefined object value
<!DOCTYPE html>
<html>
<body>
<script>
var obj={};
document.write("My object name is : "+obj.name);
</script>
</body>
</html>
Output:
Explanation:
- In the above code, we are trying to print undefined object value name from obj so, we got undefined value as output.
Example #4 – Assigning a value to the undefined object
<!DOCTYPE html>
<html>
<body>
<script>
var x={};
if(typeof x.age==='undefined')
{
x.age=24;
}
document.write("My object value is : "+x.age+" after reassigning age");
</script>
</body>
</html>
Output:
Explanation:
- We are checking first age object is “undefined ” or not with typof operator.
- age variable is not defined so if condition becomes true.
- age variable reassigns to number 24.
- Printing the reassigned value in the last line.
Example #5 – Printing undefined array value
<!DOCTYPE html>
<html>
<body>
<script>
var x=[];
document.write("My array value is : "+x[0]);
</script>
</body>
</html>
Output:
Explanation:
- In the above code we are trying to print undefined array value of x[0] from x array so, we got undefined value as output.
Example #6 – Assigning a value to an undefined array index
<!DOCTYPE html>
<html>
<body>
<script>
var x=[];
if(typeof x[0]==='undefined')
{
x[0]="Paramesh";
}
document.write("My array value is : "+x[0]+" after reassinging");
</script>
</body>
</html>
4.5 (4,498 ratings)
View Course
Output:
Explanation:
- We are checking first x[0] value is “undefined ” or not with typof
- x[0] array value is not defined so if condition becomes true.
- X[0] variable reassigns to String “Paramesh”.
- Printing the reassigned value in the last line.
Example #7 – Returning undefined value from the function
<!DOCTYPE html>
<html>
<body>
<script>
var x=function()
{
return;
};
var output=x();
document.write("My function value is : "+output);
</script>
</body>
</html>
Output:
Explanation:
- In the above code we are trying to print undefined function value so, we got undefined value as output.
Example #8
<!DOCTYPE html>
<html>
<body>
<script>
var x=function()
{
return;
};
output=x();
if(typeof output==='undefined')
{
output="Hi"
}
document.write("My function value is : "+output+" after reassigning");
</script>
</body>
</html>
Output:
Explanation:
- We are checking first x() function value is “undefined ” or not with typof
- x() array value is not defined so if condition becomes true.
- x() function output storedin a variable name with output.
- output variable reassigns to String “Hi”.
- Printing the reassigned value in the last line.
Example #9
<!DOCTYPE html>
<html>
<body>
<script>
var x=function(number)
{
return number;
};
output=x();
if(typeof output==='undefined')
{
output="I am reassigned"
}
document.write("My function value is : "+output);
</script>
</body>
</html>
Output:
Explanation:
- First, we are defining a function with a parameter.
- We are checking first x() function value is “undefined ” or not with typof
- x() array value is not defined because number argument is not passed from x() function so if condition becomes true.
- x() function output storedin a variable name with output.
- output variable reassigns to String “I am reassigned”.
- Printing the reassigned value in the last line.
Conclusion
JavaScript all declared and not defined variables automatically assigned to undefined value through JavaScript Machine. The best way to check a variable or function is undefined or not is by using typof operator.
Recommended Articles
This is a guide to JavaScript undefined. Here we discuss how does undefined work in JavaScript along with appropriate syntax and respective examples. You can also go through our other related articles to learn more–
