8. & 9. Accessing Properties


#1


https://www.codecademy.com/en/courses/spencer-sandbox/1/4?curriculum_id=506324b3a7dffd00020bf661


Please forgive me for this elementary question; why would we save the individual dog properties into a variable? Couldn't we just access them if we wanted to use them using dot or bracket notation?


// Take a look at our next example object, a dog
var dog = {
  species: "greyhound",
  weight: 60,
  age: 4
};

var species = dog["species"];
// fill in the code to save the weight and age using bracket notation
var weight = dog["weight"];
var age = dog["age"];


#2

There are a few reasons to do that, it can help you to improve your code readability by giving more clear, shorter or meaningful names, it can even help you to save some bandwidth because the shorter your code is the fewer bytes you have to download, so javascript files are downloaded faster and javascript interpreter can parse it quicker but I guess now it should be less of a concern as JavaScript interpreters perform well nowadays and are quite fast so very small optimizations or code minification won't do any wonders, of course such things start to matter on large scale projects or mobile, tablet devices where you don't have brilliant performance or fast internet speed.

Talking about holding object's properties in variables. Let's say you have an object literal and inside that object literal you have a property that holds another object and in that object yet another object and so on... and those properties can be nested very deep it would make your code unreadable, like: dog.family.parents.mother.name.age such things look like long chains so it's easier to name deep nested properties in short more meaningful names.

By holding object's property value in a variable you can gain little performance gains but this again shouldn't be of a concern at least for now. Let's say you want to get dog.species length of a property value, you can get length property like this: dog.species.length at this point the length property would return number - 9, so whenever you directly access object's property value you will always get the current value of that property.

var dog = {
  species: "greyhound",
  weight: 60,
  age: 4
};

console.log(dog.species.length); // will output - 9
dog.species = "greyhounds";
console.log(dog.species.length); // will output - 10

as you can see if you change dog's property value and try to access it next time you will get newest or current length of that property.

Now look at the difference:

var dog = {
  species: "greyhound",
  weight: 60,
  age: 4
};

var species = dog["species"];
console.log(species.length);
console.log(dog.species.length); // looks the same as nothing is changed just yet

dog.species = "greyhounds";
console.log(dog.species.length); // will output 10, because value was changed
console.log(species.length); // will still output 9, see the difference?

Now you can see that species variable only remembers the first assigned value it doesn't make any changes or in other words it doesn't keep track of changes. So species variable can be accessed faster because it doesn't directly look at dog.species.length second time, now this value gets cached. If as I said you access property directly: dog.species.length JavaScript at this point will try to access that property, evaluate it and then retrieve it, so basically when you access property directly JavaScript does a few more things behind the scenes than just retrieving cached value from a variable.

To understand when a value changes can help you to debug hard to find errors more quickly because you know what's happening under the hood.

This is by no means a comprehensive tutorial about accessing properties it's just my quick explanation that I think will help you to understand this all better.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.