“JavaScript Fundamentals — Working with Objects”
When starting with JavaScript for the first time (or anything for that matter), it is essential to understand the basics. Though you may be anxious to dive into web development headfirst, you should know a few fundamental things that can set you up for success.
JavaScript ( A high-level programing language that can perform the most complex Web Development solutions) can be very tricky to grasp in the beginning. There are enough Event delegations, Array Methods, and Arrow functions to keep you busy forever. In this article, though, we will be going over something little less complicated, Objects.
Well, what is an Object?
Well, as simple as it sounds, you and I are objects.
Like any object in JavaScript, we have properties (name, age, height, etc.) and methods(run, speak, dance). But not any two people are the same — though they may have some of the same similarities, other things may differ. Objects are containers that hold data. But why are Objects important?
I wanted to create two people, where each person (person and person2) has a Name, Age, Job, and a Mood. The easiest way would be to place these items in an array, or so you would think. But there are plenty of things that can go wrong here. First, these items inside the collection (Jack, Software Development Coach, etc.) have no logical order — there is no clean-cut way to call any item UNLESS you know for a fact where each item is. If I wanted to grab the name for person2, it would be person2[0]. But what if I couldn’t see the data, and I tried to grab the Ages of person and person2? Oh, the turmoil.
introObjects — First things first — unlike an Array, Objects use the curly braces (‘{}’) instead of the square brackets(“[]”). Secondly, everything within those braces has a Key/Value pair (name: “Rei,” mood: “Ready for Blogs.”). Maybe think “dictionary” where this item has thousands of Key/Value pairs(words and definitions) Lastly, unlike an Array — there is no Order! There is no first, second, or third order. It doesn’t matter how these items are stored; as long as they have a key/value pair, you have ACCESS!
Well, if I now have access? How can I now grab an element that is inside of my object?
There are two primary ways we can grab items out of our newly developed object: bracket and Dot Notation. Like pictured above using bracket notation, if I wanted to grab Rei’s name, I would first write the item or object that I created (person) and within square brackets the key I tried to access (“name”). The idea behind dot notation is the same (Object.Key).
Now there are plenty of ways to misuse these notations, and for clarity’s sake, I want to leave you with some examples of when these two solutions.
First up — there are 2 situations in which dot notation will not work.
If you somehow find yourself down this path of dot notation — it would be super important to note that if your key or item has space or starts with a number, it may be a much better solution to use bracket notation. If your key has space after the dot notation, it will only ready the item before the space (instead of accessing the elements first name — they just grabbed “first,” and name as an error.)
It is valuable to note that you would have to use bracket notation if you wanted to look up a variable. Above, the variable string is equal to the name. If you tried to It is valuable to note that you would have to use bracket notation if you wanted to look up a variable. Above, the variable string is equal to the name. If you tried to use dot notation to grab that string, it would solely look for string, unlike bracket notation, which will grab the string, evaluate its value, and return the name or property.
Finally, let’s look at how to update the object.
First, let’s create a second object called “person2” with its appropriate key/value pairs. The next step would be to grab the item you want to make a change to and use the dot/bracket notation that we learned above to update that value.
Whether we use dot notation or bracket notation — it’s pretty easy to access items and to update our object.
Objects can be very useful and are an essential part of JavaScript. Learning the ends and outs of using objects can make performing tasks more simple and your code less complex. There is much more to learn about Objects — where this article touches on the fundamental idea of objects, they can become way more robust, so I listed, so references below to keep you busy.
References.
