Testing Objects for Properties (Dot vs Bracket Notation)

JavaScript
1

Tell us what’s happening:

Can anyone explain why it’s required that we utilize the bracket notation instead of the dot notation to get a valid return from the if statement?

return myObj.checkProp; returns an unidentified value but return myObj[checkProp]; works.

To my understanding, the dot and bracket notation works the same except for object properties with two words where you are required to use bracket notation.

Your code so far


// Setup
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};

function checkObj(checkProp) {
  // Your Code Here
  if (myObj.hasOwnProperty(checkProp) == true) {
    return myObj.checkProp;
  } else {
    return "Not Found";
  }
}

// Test your code by modifying these values
checkObj("gift");
2

If myObj had a property called checkProp, it would return that. When using variables, you have to use bracket notation.

1 Like
3

This article may interest you:

1 Like
4 
const myObj = {
  foo: 1
}

myObj.foo is 1. That is saying "look up the property literally called foo on myObj.

If I have a variable, like

const myVar = "foo"

If I do myObj.myVar, that is saying "look up the property literally called myVar on myObj. But there isn’t a property called myVar.

If I do myObj[myVar], that is saying "evaluate the value in the square brackets to a string, and once that’s done, look up the property with that string value on myObj.

myObj[myVar]
// evaluate myVar
myObj["foo"]
// now same as
myObj.foo
1 Like
5

Wow. This article explains it so clearly. Thank you for this!

This is from the article you shared with me:

When working with bracket notation, property identifiers only have to be a String. They can include any characters, including spaces. Variables may also be used as long as the variable resolves to a String.

This means there are fewer limitations when working with bracket notation. We can now have spaces in our strings, and can even start strings with numbers.

Perhaps most importantly, we can now use variables to access properties in an object. It’s important the variable you are using references a String.

Take a look at this variable example. It might be a little confusing at first, so bear with me:

let obj = {
cat: 'meow',
dog: 'woof'
};

let dog = 'cat';
let sound = obj[dog];

console.log(sound);
// meow

The above example is similar to a previous example we’ve already seen. The main difference is we’re now using bracket notation to pass in a variable. Be careful, it may look like we are looking for the dog property in our obj , but that’s not entire correct. dog is a variable with a value of 'cat' . Since we’re using brackets, the string value is passed in and we search for the 'cat' property — obj["cat"] . Thus, meow is logged to the console.

Below, we’ll try doing the same thing, but with dot notation:

let obj = {
cat: 'meow',
dog: 'woof'
};

let dog = 'cat';
let sound = obj.dog;

console.log(sound);
// woof

Right off the bat you should notice that we’re getting back woof . This is very different from the other example and it’s because we can’t use variables with dot notation. Attempting to lookup obj.dog will actually just look for the string value of 'dog' within our object instead of using the variables value. Thus, obj.dog returns woof .