Epiphany from "Testing Objects for Properties"?

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Tell us what’s happening:

So this Challenge, “Testing Objects for Properties,” has got me thinking about the nature of a string that’s passed into a function.

See, normally there’s no difference between dot notation and bracket notation when it comes to objects – except if the property being referenced is more than one word, in which case bracket notation is required…and, it would appear, in the case of this Challenge, where a string is passed in…

So I’m wondering:

Is return myObj.checkProp incorrect because checkObj("gift") passes a string along with its quotes and therefore winds up rendering as myObj."gift"??? Whereas myObj[checkProp] works because it renders as myObj["gift"]…IOW, are quotation marks passed in, in JavaScript???

THANKS FOR ALL INSIGHT!!!

Your code so far


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

function checkObj(checkProp) {
  if (myObj.hasOwnProperty(checkProp)) return myObj[checkProp]
  return "Not Found"
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties

return myObj.checkProp is incorrect because when using dot notation, you’re not looking up regular variables. Instead you’re looking up a property in myObj that’s literally called checkProp. This fails because myObj only has the properties gift, pet, and bed. Whatever the value of the checkProp variable (or whether even it exists or not) has no effect here.

Your reasoning for bracket notation is spot on. Bracket notation expects a plain old string, which you can store in variables.

1 Like

Hmm, thanks, this should be in the Hints section of this Challenge:

when using dot notation, you’re not looking up regular variables. Instead you’re looking up a property

myObj.checkProp is the same as myObj["checkProp"] - it takes the exact value

1 Like

But why are the two equivalent?? That’s what I don’t get.

Your fellow mod, “kevcomedia,” noted that dot notation has a different application than bracket notation…but I’ve never heard of this…can you confirm?

The two are often taught as if functionally equivalent (including right here at FCC!!) so I’ve always wondered why there’s such redundancy in the language…but if they’re actually not equivalent, then that would make sense why there are two different ways of referring to the data in objects and arrays.

dot notation is used when you have exactly the name of the property, and also without spaces inside it

you need bracket notation f the property name has spaces, or if you are using a variable, or if the property name has some special characters

checkProp is a variable, "checkProp" is a string

You can think of dot notation as a special shorthand for property access where the property name contains only letters, numbers or underscores. Bracket notation would work equally well in those cases, but many people would use dot notation if possible because it looks less noisy.

They are in cases where the key is a string and a valid identifier allowed by JS (starts with a letter or underscore, no spaces, only contains a-zA-Z0-9_). If the key is not a string (either an integer or a Symbol), or the string is non-standard (ie has spaces), or needs to be evaluated to a string (ie it’s a variable), need brackets.

The square brackets say “evaluate what is in the brackets to a string before looking up the key”.

With do notation you kinda bypass the evaluation – you are saying “look up this key immediately on the object”

This is easier to demonstrate. Imagine you didn’t have bracket notation, only dot notation. How could you get the value of property 1? It would be impossible

var example = {
  "property 1": 1,
}

example.property 1 is the key “property” on “example”, followed by the number 1, syntax error.

And again in this example. Assume there is only for notation, what gets looked up here:

function lookup(foo) {
  var lookupTable = {
    foo: 1,
    bar: 2,
  };

  return lookupTable.foo;
}

Anyway

Dot notation is easier to write and read, and fits the most common use case (you have an object, you look up a property on it with a name you already know).

Having those two ways to access object-like data structures is also common across programming languages – there will be a simple way to look up directly then a way to look up dynamically that normally needs a little bit more syntax.