Learning to Code: Day 49 — Basic JavaScript Part 14

Good morning all, let’s catch up with the last post from yesterday, taking a deeper dive into JavaScript Objects. Thanks to FreeCodeCamp for the lessons.

Updating Object Properties

Okay, so we’ve learnt how to set the properties of an object, now we want to update them, this is simply done using either Dot or Bracket Notation, as shown here:

-FreeCodeCamp

As we can see here, on line 8 we are using Dot Notation for this example to access the keyname” in the (object) variable myDog. We then rename the value from “Coder” to “Happy Coder”.

Adding New Properties to JavaScript Objects

Suppose we want to add an extra property (containing a key and a value) to an object, how would we do that? Well, we would go about it like this:

-FreeCodeCamp

For sake of variety I’m using Bracket Notation on line 8 to add the keybark” to the object myDog, with it’s value set to “bow-wow” (very creative, FreeCodeCamp).

Deleting Properties from JS Objects

A very simple user-friendly way to delete a property from an object is by simply writing “delete” before the objectName.objectKey; declaration:

-FreeCodeCamp

Using Objects For Lookups

Think of a dictionary, we can use JS Objects in a similar manner, as a sort of key/value storage. This taps into my OCD and definitely ticks my boxes! So let’s see how that looks, note the recall strategies, by a sort of array recall method or the variable method:

-FreeCodeCamp

We see here that the keys are set as numbers, and then those property values are recalled in an array style of objectName[keyName] or later on as value = 2 (2 now holds the value of “value”) then recalling alpha[value] which is the same as using Bracket Notation of value = alpha.[2]; to give us it’s valueY”.

Testing Objects for Properties

If we want to check an object for a certain property, in an object potentially containing thousands of properties, we can use the .hasOwnProperty() method, where the property in question is inserted into the brackets:

-FreeCodeCamp

Note: The .hasOwnProperty() method returns a true or false answer if the property is present or not.

Here is another look at the same idea, where we create a function to test future objects for a specific property search:

-FreeCodeCamp

Let’s break this down so we can understand it. As we can see, on line 1, we have three things, the name of the function: checkObj, the name of the object: obj, and the collective name specifying all the current property keys inside the object: checkProp.

Next, on line 2, we create an if/else statement which says, if the object(obj) which is passed to the function(checkObj) contains ( or .hasOwnProperty() ) a specific property key(checkProp) which is at present in the stored database, then return (on line 3) it’s corresponding value, which is the Bracket Notation obj[checkProp], (or objectName[keyName], also read as the route destination of the value itself). Otherwise, on line 5, return “Not Found”.

When we put this into action, we replace the obj with our object, and the checkProp with the property in question for our search, for example:

checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "gift")

should return "pony".

Note: The object is presented in {} (curly brackets), then there is a comma, then the checkProp property key name in question which in this case is “gift”. The checkObj program says “Okay, do we have a property key called “gift” in the obj… yes we do”, and we have programmed the function to return obj[checkProp], or the name of the value attached to that specific property key called “gift”, which is “pony”.

Here’s an example where the property key in question is not present:

checkObj({city: "Seattle"}, "district")

should return "Not Found".

Here, we see that the property key “district” metadata does not exist in the object which contains one property city: “Seattle”. So the program returns “Not Found”, the else statement we set above. The only outcome of the above example where the property key would be stated is:

checkObj({city: "Seattle"}, "city")

should return "Seattle".

Manipulating Complex Objects

It’s best to store data in a flexible Data Structure. This can be viewed like in HTML where we have an element with nested elements inside. The same thinking applies here. According to FreeCodeCamp:

A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of strings, numbers, booleans, arrays, functions, and objects. -FreeCodeCamp

Let’s take a look at a complex data structure, notice that it is an array with one object inside, and a nested array within itself called “formats”:

-FreeCodeCamp

As we saw above in the last Note, the object is presented in curly brackets, and we can see one set of curly brackets here so we know that here there is only one object. The object itself is nested within an array (appearing as the [] brackets) and is the “top-level” array. The total properties together are collectively known as metadata. Let’s add an album now, an additional object inside the top-level array:

-FreeCodeCamp

You can now see the second object in the top-level array within the highlighted curly brackets.

Note: It’s very important to write the comma after the first object on line 12 which indicates that there is another object to come, and the second object and it’s metadata won’t register without it.

Accessing Nested Objects

Sub-properties of objects can be accessed using Dot or Bracket Notation as follows:

-FreeCodeCamp

Remember: In the first notation, we see that Bracket Notation was used in the sub-property “top drawer” as there is a space in that property name.

Notice how when we read along the notations, we are moving through the object’s properties, going downward then along the property from key to value, and the value itself is the Dot/Bracket Notation (or path to that value).

Let’s look at an example where we use Dot and Bracket Notation to associate a variable to a key value:

-FreeCodeCamp

We have to go through several levels of object properties to get to our key value “maps” on line 4. That path is written out on line 13 as object(myStorage) -> the first property(car) -> the first sub-property(inside) -> then to the correct key(glove box).

Note: Bracket Notation is used for “glove box” because it contains a space and cannot work through dot notation as that would incur an error.

Accessing Nested Arrays

Objects can contain nested objects and nested arrays. Remember that when you want to select from a list in arrays, the first metadata is [0], the second in the list is [1] and so on. Let’s take a look here what’s going on:

-FreeCodeCamp

As we can see at the bottom there, we have the Array Bracket Notation that is set out in a way I wrote here to understand, as: variableObject[objectNumber].propertyKeyName[valueArrayNumber] .. so now we can work through each notation to see how the resulting value was found.

Aaand I think that’s more than enough for today don’t you? See you guys next time! Cheers.

--

--

--

Step by step, learning to code with FreeCodeCamp

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Things you may not know you can do with Vue

Vue.js Logo

Add Segment & Google Analytics to your TypeScript Next.js App

Logos for NextJS, Typescript, Segment & Google Analytics

What to Expect When Expecting React

Updating the data using Omniscripts and Data Raptors

Top 5 things to consider when creating an Angular library

Ant Design component customization

ICON Workshop — ICONex Web Connect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

Best YouTube Channels to Learn JavaScript

How To Create Instances With Associations In Sequelize

First Day of Something New

JavaScript Basics — Part 1