Freecodecamp: Accessing Objects Properties with Variables Puzzling?

/cc @FreeCodeCamp/moderators
Can anyone help in triaging if the instructions need some more clarification? I might be biased but they seem straight to me.

@ChrisKissoon Bracket notation is useful when you have to access a property whose name is collected dynamically during the program execution.
e.g.

var obj = {
  propName : "John"
}

function propPrefix(str) {
  var s = "prop";
  return s + str;
}

var someProp = propPrefix("Name")

console.log(obj[someProp]) // -> "John"

We could explain this concept in the description, if it's not too verbose

Thanks @Emt-Ant, do we need to update the instructions for more clarification? Your opinion?

@raisedadead @Em-Ant,
I can understand the confusions, imho updating with more clarification sounds like a good idea.

For newer people with an example like this:

var someProp = "propName";
var myObj = {
  propName: "Some Value"
}
myObj[someProp]; // "Some Value"

it is easy to think, "Why not just do myObj.propName since we are doing the same thing"

Again, the second example:

var myDog = "Hunter";
var dogs = {
  Fido: "Mutt",
  Hunter: "Doberman",
  Snoopie: "Beagle"
}
var breed = dogs[myDog];
console.log(breed);// "Doberman"

does the same thing. It just attaches the value to a variable. Why do we even need a variable?? I definitely think that we should add like what @Em-Ant said, an example where the variable is changed dynamically. Because if you are just setting a variable equal to a string and using the variable, it does not make any sense. It would be more practical to just use dot notation. The challenge makes no sense unless you explain why we would ever need to use a variable in the first place instead of dot notation. So my vote is to add another example and clarify on why to use a variable.

@IsaacAbrahamson thanks.

Contributors need to refactor this challenge along with Updating Object Properties as well. Please comment below with suggested refactoring for both before making a pull request.

/cc @erictleung thoughts?

Also please check @systimotic' https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12125#issuecomment-269246606

Hi @raisedadead ,
By reading all the issues related to object notations i understood it's not obvious for a beginner. They seemed straight to me. In order to make it even simpler how about making these changes.

Accessing Objects : (https://github.com/FreeCodeCamp/FreeCodeCamp/issues/12141)

var currency = {
   USA  : "dollar",
   London : "euro",
   India : "rupee",
}
function getCurrency(country){
 return country +" currency is "+currency[country] +" ";
}
getCurrency("USA") // "USA currency is dollar" 

I don't see any issue with Updating Objects . Correct me if i'm wrong.
Even i'm thinking to add Nested Objects challenge. Let me know how i can help to make this improve.

@raisedadead let's see if I can address this object issue.

Contributors need to refactor this challenge along with Updating Object Properties as well. Please comment below with suggested refactoring for both before making a pull request.

So for the initial challenge on objects, "Build JavaScript Objects", the sample object has all the properties being strings. Maybe we can add in another sample object with different typed properties, like

var sampleObject = {
  property_1: "Green",
  2: "Hal",
  "property_3": "Lantern"
};

This _might_ be more confusing but it does explore the possibilities of objects, which may prompt campers to investigate a bit. Plus, the seed code for "Accessing Objects Properties with Variables" has numbers as properties, which hasn't been shown in the three previous challenges on objects.

I read that square brackets should be used only when there is a space in the property you need to access.

This could be fixed by changing how they are bracket notation is described in "Accessing Object Properties with Bracket Notation". The instructions

If the property of the object you are trying to access has a space in it, you will need to use bracket notation.

could be changed to something like

If the property of the object you are trying to access has a space in it, you will need to use bracket notation. However, you can still use bracket notation on properties without spaces.

And then we can modify the sample object to show you can also have properties without spaces.

var myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
myObj["NoSpace"];    // USS Enterprise

For "Accessing Object Properties with Variables", I like @Em-Ant's suggestion to replace, say, the first example, namely removing

var someProp = "propName";
var myObj = {
  propName: "Some Value"
}
myObj[someProp]; // "Some Value"

and moving the dogs object example as the first example and have something like

var obj = {
  propName : "John"
}

function propPrefix(str) {
  var s = "prop";
  return s + str;
}

var someProp = propPrefix("Name");
console.log(obj[someProp]); // "John"

as the second example.

How about saying that bracket notation is a more dynamic form of manipulating objects. You can use strings that can step outside of most of the JavaScript rules of declaration, like beginning with numbers and using string a with spaces as property names. You can also place variables inside of square brackets allowing properties to be assigned on the fly or via some side effect. Say for example you have an object in your program and you are not sure what the properties need to be during creation so you allow the program to assign them during run-time.