JS Bites: Could not read something of undefined
Tags: javascript, tutorial, errors
Published: 2019-09-21 02:18:57

---
title: JS Bites: Could not read something of undefined
published: true
description: What does it mean when you get the error that the interpreter could not read a property "of undefined."
tags: Javascript, tutorial, errors
---

![Error that reads "Cannot read property 'color' of undefined"](https://thepracticaldev.s3.amazonaws.com/i/k9hankvp6p9bjc7y3a52.JPG)

I tutor and mentor new developers in Javascript. By and large, the most common error they come across is "Cannot read some_property of undefined." An experienced developer will usually understand instantly what's gone wrong, but for new developers it can lead to sometimes _hours_ of frustration.

### So, what does it really mean?

In the most simple terms, this error means that a thing you are trying to access the properties on either does not exist or is not what you think it is.

Here are a couple of examples

```javascript
const result = await axios.post(API_URL, user);

console.log(result.data.user.name + " has been added to the database!");
```
In the above example, the front end team thought the back end would return a copy of the new user data in its response. In reality, the back end was just returning "Success." This results in the `console.log()` returning an error that it `Cannot read name of undefined.`

```javascript
let cats = [
    {
        name: "Grumpy",
        color: "Grey"
    },
    {
        name: "Heathcliff",
        color: "Orange",
    },
    {
        name: "Felix",
        color: "Black"
    }
  ];

console.log(cats.grumpy.color);
```

In the above example, a new developer did not properly understand how to work with objects, particularly arrays of objects. 

### What to do when you see this error?

Any time you are working with data, you should `console.log()` the data before you start working with it, even when you are sure you know what it is. Once you see the data, it's often immediately clear what is going wrong.

If I am passing data from one place to another (back end to front end, through React props, from one function to another, etc), I like to log out the data before it's passed and after. This allows me to confirm that things are passing through the way that I expect them to.

You can also use an extension like Quokka, which allows you to see live code coverage and your `console.log()`s right in your editor.

The most important thing, though, is just keep coding. The more errors you see, the more errors you will eventually know how to fix. _People who have the answers have them because they once had the questions._


----------- ------------------------------------------------------------------
     JS Bites

     Have you ever need a quick solution to a problem, but when you search 
     Google you are met with pages of tutorials and detailed instructions that 
     bury the information you need? That's what JS Bites attempts to solve. 
     Each post is a small, bite-sized primer on a very specific JS topic. The 
     aim is to provide enough detail to boost understanding, but not so much that 
     you become overwhelmed or lost.