{"id":1329,"date":"2024-01-07T13:00:00","date_gmt":"2024-01-07T13:00:00","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=1329"},"modified":"2024-01-10T07:58:24","modified_gmt":"2024-01-10T07:58:24","slug":"null-vs-undefined-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/null-vs-undefined-javascript\/","title":{"rendered":"Null vs Undefined in JavaScript (4 Key Differences)"},"content":{"rendered":"\n

While null and undefined are both primitive types in JavaScript, they have distinct characteristics. In this article, we will guide you about null vs undefined in JavaScript, the key differences between them, along with some examples. Let us get started!<\/p>\n\n\n\n

What is null in JavaScript?<\/strong><\/h2>\n\n\n\n

When a variable is intentionally left without a value, it is assigned the value of null(i.e. an empty object). Null signifies the absence of value.<\/strong> It is a primitive data type and is often used to indicate that a variable or property does not have a meaningful value.<\/p>\n\n\n\n

Let us see an example to understand it better:<\/p>\n\n\n\n

\/\/declaring a variable with a null value\nvar num=null;\n\n\/\/printing the variable\nconsole.log(num);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
null<\/code><\/pre>\n\n\n\n
In this example, we have declared a variable with a Null value. We have printed the same and got the desired output. <\/p>\n\n\n\n
Let us check the type of the variable.:<\/p>\n\n\n\n
\/\/declaring a variable with a null value\nvar num=null;\n\n\/\/checking the type of variable\nconsole.log(typeof(num));<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
object<\/code><\/pre>\n\n\n\n
In this example, we have declared a variable and assigned it a null value. We checked the type of the null value using the typeof operator. The output is \u201cobject\u201d, which means that null is an empty object. We have obtained the desired result. <\/p>\n\n\n\n
You need to know how to check for null in JavaScript<\/a> when doing coding in real life.<\/p>\n\n\n\n
What is undefined in JavaScript?<\/strong><\/h2>\n\n\n\n
Undefined, in general terms, means \u201cnot-defined\u201d. In JavaScript, an undefined variable refers to a variable that has been declared but has not been assigned any value. <\/strong>When a variable is not assigned any value, it holds a garbage value. A variable is said to be undefined if it does not have a defined value. <\/p>\n\n\n\n
Undefined variables can also occur when we try to access the invalid index of an array. Let us see a few examples of the same:<\/p>\n\n\n\n
\/\/declaring a variable\nlet num;\n\n\/\/printing the variable num\nconsole.log(num);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
undefined<\/code><\/pre>\n\n\n\n
In this example, we have declared a variable \u201cnum\u201d, but we have not assigned any value to the variable, so \u201cnum\u201d does not hold a defined value. Hence, the output is undefined. We have obtained the desired output. <\/p>\n\n\n\n
Let us see another example where an undefined<\/strong> value can occur:<\/p>\n\n\n\n
\/\/declaring an array\nlet arr=[1,2,3,4,5,6];\n\n\/\/printing the 6th index value of array\nconsole.log(arr[6]);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
undefined<\/code><\/pre>\n\n\n\n
In this example, we are trying to access the value at a non-existent index of an array. The array’s length is 6 and the indexing starts from zero(0). So, the index of the last element of the array is Five (5). Therefore, accessing any index greater than five will give us an undefined value. Hence, we have got the desired output. <\/p>\n\n\n\n
You can also check for undefined in JavaScript<\/a> to find when it occurs.<\/p>\n\n\n\n
Null vs Undefined in JavaScript<\/strong><\/h2>\n\n\n\n
Null indicates the intentional absence of any object value. Undefined, on the other hand, occurs when a variable is declared but not assigned any value.<\/strong><\/p>\n\n\n\n
Now that you have a basic idea about both of them, let\u2019s discuss the key differences between null vs undefined in JavaScript:<\/p>\n\n\n\n
1) Data Types<\/strong><\/h3>\n\n\n\n
The data type of undefined is undefined, whereas the data type of null is object. We can find it using the typeof operator. For example:<\/p>\n\n\n\n
\/\/ checking the data type of undefined\nconsole.log(typeof undefined);\n\n\/\/ checking the data type of null\nconsole.log(typeof null);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
undefined\nobject\n<\/code><\/pre>\n\n\n\n
2) Arithmetic Operations<\/strong><\/h3>\n\n\n\n
When used in arithmetic operations, undefined results in NaN (Not a Number), whereas null is converted to 0 behind the scenes. Let’s consider the following examples:<\/p>\n\n\n\n
\/\/ Performing operation with undefined\nconsole.log(undefined + 1);\n\n\/\/ Performing operation with null\nconsole.log(null + 1);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
NaN\n1\n<\/code><\/pre>\n\n\n\n
In the above example, undefined + 1 returns NaN because undefined cannot be converted into a valid number. On the other hand, null + 1 results in 1 as null is converted to 0 during the addition.<\/p>\n\n\n\n
3) Falsy Values<\/strong><\/h3>\n\n\n\n
Both undefined and null are considered falsy values in JavaScript. When used in conditional logic, they will return false. For example:<\/p>\n\n\n\n
\/\/ Using conditional logic with undefined\nconsole.log(!!undefined);\n\n\/\/ Using conditional logic with null\nconsole.log(!!null);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
false\nfalse<\/code><\/pre>\n\n\n\n
4) Comparison Operators<\/strong><\/h3>\n\n\n\n
When comparing undefined and null using the JavaScript equality operators, we observe different results. Using the loose equality operator (==), null and undefined are considered equal. However, with the strict equality operator (===), they are not. <\/p>\n\n\n\n
Let\u2019s see an example to understand it better:<\/p>\n\n\n\n
\/\/ Comparing using ==\nconsole.log(undefined == null);\n\n\/\/ Comparing using ===\nconsole.log(undefined === null);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
true\nfalse\n<\/code><\/pre>\n\n\n\n
In the above examples, undefined == null returns true because the loose equality operator only compares the values. However, undefined === null returns false as the strict equality operator checks both the type and the value.<\/p>\n\n\n\n
Finally, let\u2019s compare the null vs undefined values using a tabular format:<\/p>\n\n\n\n
Basis<\/strong><\/th>null<\/strong><\/th>undefined<\/strong><\/th><\/tr><\/thead>
Assignment<\/strong><\/td>It is assigned intentionally by a developer.<\/td>Occurs when a variable is declared but no value is assigned to it.<\/td><\/tr>
Type<\/strong><\/td>null is an empty Object<\/td>undefined has a type undefined that is different from other types.<\/td><\/tr>
Usage<\/strong><\/td>Often used to represent the intentional absence of an object or value.<\/td>Typically the initial value of variables is declared but not yet assigned.<\/td><\/tr>
Property<\/strong><\/td>It is not a global Property.<\/td>It is a global Property<\/td><\/tr>
Conversion to Number<\/strong><\/td>When null is converted to a number, it becomes 0.<\/td>When an undefined variable is converted to a number, it becomes NaN.<\/td><\/tr>
JSON<\/strong><\/td>null is a valid JSON value.<\/td>undefined is not a valid JSON value.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
In JavaScript, It is essential to understand the null variables and the undefined variables to write robust and clean code. This article is a great guide to begin with for null vs undefined. While both represent the absence of a meaningful value, they are used in slightly different contexts.<\/p>\n","protected":false},"excerpt":{"rendered":"
While null and undefined are both primitive types in JavaScript, they have distinct characteristics. In this article, we will guide you about null vs undefined in JavaScript, the key differences between them, along with some examples. Let us get started! What is null in JavaScript? When a variable is intentionally left without a value, it is […]<\/p>\n","protected":false},"author":9,"featured_media":1331,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11],"class_list":["post-1329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=1329"}],"version-history":[{"count":4,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1329\/revisions"}],"predecessor-version":[{"id":1373,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1329\/revisions\/1373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/1331"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=1329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=1329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=1329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}