Undefined

Undefined is a special value in JavaScript that indicates the absence of a value or an uninitialized variable. In other words, it is a variable that has been declared but has not been assigned a value. It is one of the six primitive data types in JavaScript, along with null, boolean, number, string, and symbol.

Purpose and usage

Undefined is used in JavaScript to indicate that a variable has not been assigned a value. It is often used as a default value for function arguments or object properties that are not initialized. It is also commonly used to check whether a variable has a value or not, using the typeof operator.

Default value for function arguments

function greet(name) {
  name = name || 'World';
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, World!
greet('John'); // Hello, John!

In the above example, the greet function takes an argument name and logs a greeting message to the console. If no argument is provided, the name variable will be undefined, which is falsy in JavaScript. Therefore, the expression name || 'World' will evaluate to the string 'World', which will be used as the default value.

Default value for object properties

const person = {
  name: 'John',
  age: undefined
};

console.log(person.name); // John
console.log(person.age); // undefined

In the above example, the person object has two properties, name and age. The name property has a value of 'John', while the age property has a value of undefined. By default, object properties that are not initialized will have a value of undefined.

Checking for undefined values

let x;
console.log(typeof x); // undefined

if (x === undefined) {
  console.log('x is undefined');
} else {
  console.log(`x has a value of ${x}`);
}

In the above example, the x variable is declared but not assigned a value. When its typeof is checked, it returns 'undefined'. The if statement checks whether x is equal to undefined and logs a message to the console if it is.

Differences between undefined and null

Undefined and null are often used interchangeably in JavaScript to indicate the absence of a value. However, they have different meanings and use cases.

Undefined is used to indicate that a variable has not been assigned a value. It is a primitive type that represents the absence of a value. On the other hand, null is used to indicate that a variable has no value or that an object property is intentionally empty.

let x;
console.log(x); // undefined

let y = null;
console.log(y); // null

In the above example, the x variable is undefined because it has not been assigned a value. The y variable is assigned the value null, which indicates that it has no value.

Another difference between undefined and null is that undefined is a primitive type, while null is an object. This is a quirk of the JavaScript language that has caused confusion among developers.

console.log(typeof undefined); // undefined
console.log(typeof null); // object

In the above example, the typeof operator returns 'undefined' for undefined and 'object' for null.

Common pitfalls with undefined

One of the common pitfalls with undefined is that it can be overwritten. In other words, a variable can be explicitly assigned the value undefined, which can lead to unexpected behavior.

let x = 1;
console.log(x); // 1

x = undefined;
console.log(x); // undefined

In the above example, the x variable is initially assigned the value 1. However, it is later assigned the value undefined, which overwrites its previous value.

Another pitfall with undefined is that it can be used in comparisons. Since undefined is falsy in JavaScript, it can be mistakenly used in place of null.

let x = null;
if (x == undefined) {
  console.log('x is undefined'); // This will be logged
} else {
  console.log('x is not undefined');
}

In the above example, the x variable is assigned the value null. However, it is compared to undefined, which will evaluate to true because null == undefined in JavaScript.