Learning to Code: Day 48 — Basic JavaScript Part 13

Hello all! Hope you are all keeping well, I took a little hiatus to get my head together with where-am-I-going-reconfiguration.. and I can now say I will be doing the Bootcamp I mentioned in the last post! I got accepted and it’s all a go go so I can’t wait to get onto that next month.

Righto, let’s dive back into JavaScript. I was actually working on a password creator the last few days but I seem to have worked myself into a web, I can’t quite figure out how to configure the goals I’m aiming for in terms of the JS lingo, so I’ll come back to it later. For now, let’s focus on more JS terminology and more basic principals.. Today we’ll finish up on operators and be taking a look into JavaScript Objects.

Thanks as always to FreeCodeCamp for these lessons.

Cast your minds back a bit, we had a big day of comparison operators such as “==” which always return a true or false value, however, this isn’t always used and instead people use an if/else statement which is longer to type out, when we can shorten the if/else statement as a comparison operator, for example:

-FreeCodeCamp

This can be shortened to:

-FreeCodeCamp

Note: We have removed the if/else statement completely and replaced it with a strict equality operator which in this case gives the same conditions of the if/else statement.

When the return statement is reached, the function is stopped at that point of the current function and control is returned to the calling function.

-FreeCodeCamp

From this exercise I had to carry out, as you can see the code will be stopped on line 4 because we come to our first return statement, and the following return statement on line 7 is not carried out.

Remember: We are using the logical Or operator on line 3 in the if statement’s condition where we say that a is smaller than 0 or (“||”) b is smaller than 0.

At last, we are onto something different! As we crash through our 70th chapter of JavaScript, we’re looking at objects, which are like arrays, but instead of being shaped inside square brackets of containing and index, they nicely structured information and can be about real-world objects, like a cat in this case:

-FreeCodeCamp

Note: There is also a cheeky little comma between the multiple property statements and the last property contains an array.

Important: The metadata within the objects are accessed through properties, which in full are read as “key:value” and appear within the curly brackets of the variable.

As we see, these properties above are all strings, but you can also use single words without quotes, or numbers:

-FreeCodeCamp

Note: JS typecasts the non-string properties of the objects as strings.

Just as we would move through an array with Bracket Notation to access it’s indices (for example the second entry of an array is arrayName[1], the third is arrayName[2] and so on), when we look at objects, we can either use Bracket Notation or Dot Notation.

Imagine how the postman finds your door from a postcard, he looks to the city, then the street, then the door. This path is like how Dot Notation works. We’re rounding in on something through several levels of focus, like so:

-FreeCodeCamp

Here, our two variables (or path to destination) prop1val and prop2val are achieved by going through the variable myObj, then the property key prop1 or prop2, to reach the property value val1 or val2.

myObj is like the city, prop1 is the street and val1 is the door. You follow me?

If the properties have a space in them for example “Space Name” (see example below) then use Bracket Notation:

-FreeCodeCamp

Note: Look at the quotes around the property names at the end, take note of what to use when there are spaces present or otherwise.

Yet another use of Bracket Notation on objects is to access a property key which is stored as the value of another variable. Take a look:

-FreeCodeCamp

Let’s work through this piece by piece. First we have the variable (or object) set to “dogs”. Then we have three keys associated to that object, those are Fido, Hunter, Snoopie. The value of each are “Mutt”, “Doberman” and “Beagle” respectively.

Next we set a variable myDog referring to the object property key “Hunter”. Remember that JS typecasts the properties as strings. Then we set the variable myBreed (which is what our ‘destination’, like the postcard analogy) which is a path of “dogs”(the object),myDog(which is the previously defined variable, and is not in quotes) and then we console.log (which means we “print the answer into the console”) the variable myBreed, which gives us Doberman, because that’s the destination seen in the preceding variable, which is now the revised path of dogs -> Hunter -> Doberman.

Another way to apply this thinking is when you collect the property’s name dynamically during the execution of the program:

-FreeCodeCamp

Note that we do not use quotes around the variable name when using it to access the property because we are using the value of the variable, not the name.

— FreeCodeCamp

As far as I know from the quote above, we don’t write someObj[“someProp”] like we did in the previous chapter “Bracket Notation with Objects”, as that points to the name of the variable someProp, here we’re referring to it’s value instead. *insert confused emoji*

Aaaand let’s call it there. That last one was a bit of a brain mush for me right now, I’m sure with time that’ll become more clear to understand, but for now it’s too fresh! Catch ya next time!

Step by step, learning to code with FreeCodeCamp