Hi guys, today we will solve an annoying error when working with JavaScript ES6, It is “Cannot destructure Property of Undefined” in JavaScript. Before going into the main section, let’s learn about destructuring in ES6.
What is destructuring in ES6?
Destructuring Assignment is a syntax that allows us to separate the data stored inside objects or arrays and assign them to separate variables. Let’s take a look at the simple example below to understand:
const bookmark = {
learn: 'learnshareit.com',
relax: 'youtube.com',
music: 'spotify.com',
};
// Using destructuring
const { learn, relax, music } = bookmark;
console.log(learn); // learnshareit.com
console.log(relax); // youtube.com
console.log(music); // spotify.comWhen does the error “Cannot destructure Property of Undefined” in JavaScript appear?
This problem occurs when you try to use destructuring on an object whose value is undefined. Or you use destructuring for a function’s parameter, but when calling the function, you miss the function’s argument. Look closely at the two examples below to understand the problem better.
Example 1:
let bookmark; // bookmark is undefined
const { learn, relax, music } = bookmark;Output:
Error: Cannot destructure property 'learn' of 'bookmark' as it is undefined.Example 2:
function destruct({ learn, relax, music }) {
console.log(learn);
console.log(relax);
console.log(music);
}
// Function call but missing argument
destruct();Output:
Cannot destructure property 'learn' of 'undefined' as it is undefined.How to fix this error?
The cause of the error is that we use destructuring on an undefined object, so to avoid this error, we need to check if an object is undefined before using destructuring. In addition, we can also use the default value to handle this error.
Check if the object is undefined or not
If the object is undefined, we will log a message to recheck the object, and if the object is not undefined, we are allowed to use destructuring. Like this:
let bookmark1;
let bookmark2 = {
learn: 'learnshareit.com',
relax: 'youtube.com',
music: 'spotify.com',
};
function canDestructuring(obj) {
// Check undefined
if (obj === undefined) {
console.log('This is undefined object, please check again!');
return false;
}
return true;
}
if (canDestructuring(bookmark1)) {
const { learn, relax, music } = bookmark1;
console.log(learn); // This code is not executed
}
if (canDestructuring(bookmark2)) {
const { learn, relax, music } = bookmark2;
console.log(learn); // learnshareit.com
}Output:
This is undefined object, please check again!
learnshareit.comAssign default value to variables
In this way, we will use a new operation in ES6, which is the nullish coalescing operator.
Syntax:
expression1 ?? expression2
Description:
Nullish coalescing operator will return expression2 if expression1 is undefined or null.
Based on the description, we need to put a value in expression2 to avoid the undefined value. And we use the assignment operator for variables inside curly braces to assign a default value. Observe the code sample below:
let bookmark1;
let bookmark2 = {
learn2: 'learnshareit.com',
relax2: 'youtube.com',
music2: 'spotify.com',
};
// Assign default value to left side
let {
learn1 = 'default learn',
relax1 = 'default relax',
music1 = 'default music',
} = bookmark1 ?? {}; // Using nullish coalescing
console.log(learn1); // Expected output: default learn
// Assign default value to left side
let {
learn2 = 'default learn',
relax2 = 'default relax',
music2 = 'default music',
} = bookmark2 ?? {}; // Using nullish coalescing
console.log(learn2); // Expected output: learnshareit.comOutput:
default learn
learnshareit.comAs you can see, we no longer see the “Cannot destructure Property of Undefined” error. Instead, it is the default value: ‘default learn’.
Summary
The article is already quite long. To summarize briefly, just remember not to use destructuring on undefined objects, and you can avoid the error “Cannot destructure Property of Undefined” in JavaScript. If you find the article useful, don’t forget to share it with your colleagues!
Maybe you are interested:
- “Cannot find module ‘lodash’” in Javascript
- “Cannot find module ‘date-fns’” in Javascript
- “Cannot Read Property ‘FindIndex’ Of Undefined” In JavaScript – How To Solve It?
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
