This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Yogesh Chavan
The question goes like this:
Explain to me what the below line of JavaScript code does:
const [{ isoCode: firstCode = '' } = {}] = allStates;
If you're new to array and object destructuring, then this question might sound complicated. But it's actually not.
So to be able to answer this question, you first need to know some basics of array and object destructuring.
So let's revise that.
If you have an array like this:
const numbers = [10, 20];
Then to access values 10 and 20 we can use array destructuring like this:
const [a, b] = numbers;
console.log(a); // 10
console.log(b); // 20
If we want to access only the first element from the array, we do it like this:
const [a] = numbers;
console.log(a); // 10
Now, If we have an object like this:
const user = { name: 'Mike', age: 30 };
Then to access the name and age, we can use object destructuring like this:
const { name, age } = user;
console.log(name); // Mike
console.log(age); // 30
So now, If we have an array of objects like this:
const allStates = [Â
{isoCode: 'IN', name: 'India'},Â
{isoCode: 'CA', name: 'Canada'}
];
then we can access the first element of the array using array destructuring like this:
const [firstObject] = allStates;
console.log(firstObject); // Â {isoCode: 'IN', name: 'India'}
And If we want to access the isoCode property from the first object of the array we can use object destructuring inside array destructuring like this:
const [ {isoCode} ] = allStates;
console.log(isoCode); // IN
But If the isoCode property itself does not exist in the first object of the array, then we will get undefined as the result.
The property might not exist because the
allStatesarray data might come from API which might not have theisoCodeproperty.
So to avoid getting undefined, we can assign a default value while destructuring itself like this:
const [ {isoCode = ''} ] = allStates;
console.log(isoCode); // IN
However, as the isoCode property already exists in our case, we get isoCode as IN.
But If we have an array like this:
const allStates = [Â
{ name: 'India' },Â
{ name: 'Canada' }
];
Then the value of isoCode will be an empty string like this:
const [ {isoCode = ''} ] = allStates;
console.log(isoCode); // ''
But what If the allStates array itself is empty and it does not contain any object like this:
const allStates = [];
Then the below code will throw an error.
const [ {isoCode = ''} ] = allStates;
console.log(isoCode); // Cannot read properties of undefined (reading 'isoCode')
We're getting an error because we're destructuring the isoCode property from the first element of the array but the first element itself does not exist.
So to avoid getting that error, we can assign an empty object during object destructuring itself like this:
const [ {isoCode = ''} = {} ] = allStates;
console.log(isoCode); // ''
Here, we get empty string as the isoCode value because destructuring an empty object will return undefined like this:
const obj = {};
const { name } = obj;
console.log(name); // undefined
And as we're also using default value of an empty string, If the property is undefined, we will get empty string as the result for the above isoCode.
Also, If we don't want to use the isoCode property name, we can use renaming syntax during object destructuring like this:
const allStates = [
{isoCode: 'IN', name: 'India'},
{isoCode: 'CA', name: 'Canada'}
];
const [ {isoCode: firstCode} ] = allStates;
console.log(firstCode); // IN
So, now you have all the knowledge to answer the initial question asked.
// Explain to me what the below line of JavaScript code does.
const [{ isoCode: firstCode = '' } = {}] = allStates;
Answer:
In the above code, we're using array destructuring syntax to destructure the first element of the allStates array.
And from the first element of the array which is an object, we're destructuring the isoCode property to find out its value.
If the isoCode property itself does not exist then we're assigning an empty string to be its value.
And If the allStates array comes as empty, then to avoid getting a JavaScript error, we're also assigning an empty object during object destructuring.
And finally, we're using renaming syntax to rename the isoCode property to firstCode.
So If we have an array like this:
const allStates = [
{isoCode: 'IN', name: 'India'},
{isoCode: 'CA', name: 'Canada'}
];
Then we will get IN as the result as shown below:
const [{ isoCode: firstCode = '' } = {}] = allStates;
console.log(firstCode); // 'IN'
And If we have an array like this:
const allStates = [
{name: 'India'},
{name: 'Canada'}
];
Then we will get an empty string as the result as shown below:
const [{ isoCode: firstCode = '' } = {}] = allStates;
console.log(firstCode); // ''
And If we have an array like this:
const allStates = [];
Then we will again get an empty string as the result as shown below:
const [{ isoCode: firstCode = '' } = {}] = allStates;
console.log(firstCode); // ''
But we will never get an error If the allStates is an empty array.
Closing points
Knowing destructuring is very important as a JavaScript/React developer as it greatly simplifies your code.
If you want to learn all ES6+ features in depth in an easy-to-understand way, do check out my Mastering Modern JavaScript book.
You can also check out the free preview of the book content in this freeCodeCamp article.
In this ebook, you will also learn all the prerequisites you should know before starting to learn React.js.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Yogesh Chavan
Yogesh Chavan | Sciencx (2023-02-17T05:12:33+00:00) Tricky JavaScript Interview Question Using Array And Object Destructuring Combined. Retrieved from https://www.scien.cx/2023/02/17/tricky-javascript-interview-question-using-array-and-object-destructuring-combined/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.