Table of Contents:
- cannot read property '0' of undefined (Javascript)
- Reasons to cause this error
- How to solve this issue
- Solution One
- Solution Two
- Conclusion
You may have encountered the "cannot read property '0' of undefined” error while working with arrays in JavaScript. Reading an array using its index frequently causes this error. In addition to this, reading an array with bad values will also cause this. To solve this error we can make sure the array is assigned a proper value, we will also go over details of this issue with examples.
Cannot read property '0' of undefined (JavaScript)
To understand what the problem means, let's break down the error message. Every time you try to index an array that is not defined within that code it will throw the error "cannot read property '0' of undefined". The 'undefined' variable indicates to the array which must mean that the array is not a defined variable within that block of code. An array within that block of code either has to be created or it has to be able to access it through either the uses of imports or by having the array inside the block of code that is being operated.
![][1]
We will encounter this error when the condition variable is set to false and the code tries to index an array that is not available in its code block.
![][2]
When we run this code it will produce the following error. This is because the variable "array" is not defined in this code block (being the else statement) and therefore we can not access the first value of the array as it is undefined. However, if the condition was set to true the array would be defined as it is made a variable in the if statements code block.
Reasons to cause this error
The reasons to cause this error is when a user incorrectly defines an array or the array is inaccessible to the block of code trying to fetch the index of the array. You will see the error when the array is an undefined variable and tried to be accessed in a part of the code, this can either be when no array variable is present or when the array variable is not reachable from the code block you are working in. Furthermore, even if your variable is assigned in a different code block you will not able to access it unless the variable is being declared inside both of their codeblocks, an easy way to do this is to declare the variable at the top of the code.
How to solve this issue
This error can be solved by defining the array inside of the block of code that is operating. There is two solutions to this problem for certain use cases one being to get the array variable from a different file as the code cannot normally access variables from a different file and the other being to just define the array within the code block of where the code is trying to call it.
Solution One:
In this solution we are making sure we define the variable "array" in the active code block to make sure the "array" variable can be accessed therefore allowing it to be read and printed into the console. There are many ways to assign a variable and different type of variables a value can be assigned to however in this solution we will be using an array and assigning the variable using "var" as we want to make the variable global to the whole function, in this example the code block running will be an else statement:
![][3]
Here we will show all the places where you can define the variable of "array" in the active code block. The highlighted text is the places where you can define array and it can be accessed by the second code block.
![][4]
Once one of these positions have been used to define "array" and you have saved the file the variable "array" should be defined and therefore should work correct so, now run the code you should see the following result.
![][5]
Solution Two:
In this solution we are making sure we import the variable "array" in the active code block to make sure the "array" variable can be accessed therefore allowing it to be read and printed into the console, in this example the code block running will be an else statement:
![][6]
This is how the variable will be exported from the other file with the "array" variable. First you will have to create a new file , preferably in the same directory of the current file being worked on and then you must define array as the value wanted and export it using the "module.export" function which is a native function within JavaScript:
![][7]
Here we will show all the places where you can import the variable of "array" in the active code block, keep in mind you should only put one of these in as multiple could break it unless you are defining the variable in the if and else statement differently however a more effective way would to be just to define it at the top of the function. The highlighted text is the places where you can define array and it can be accessed by the second code block.
![][8]
Once one of these positions have been used to define "array" and you have saved the file the variable "array" should be defined and therefore should work correct so, now run the code you should see the following result.
![][9]
Conclusion:
Thanks for sticking around to read this article. When attempting to index an undefined array it will throw the "cannot read property '0' of undefined" error message. Now that you know how to correctly define your array within your code you can now use this knowledge to your advantage. For example indexing a specific value stored within an array which can be used for powerful devices such as being able to see if a user has a certain value assigned to them.