A thing or two about Objects in JavaScript.

Objects are fundamental blocks in JavaScript. Understanding how objects work will definitely make your life a lot easier working with JavaScript.

what are objects? and why do we need them?

As a very simple definition, objects are nothing but collection of different types of data. When it comes to object oriented programming, its based on 4 core concepts.

For now, we will only look into how JavaScript deals with encapsulation parts and get back to the rest when we explain other concepts.

Encapsulation is a process of bundling different properties into one single reference variable. Objects are mainly used in places where we need to target multiple properties and methods(functions) under one roof. lets look into an example.

say we need to store a specific set of properties of all students in a class. Properties being name, age, marks in 3 subjects and a function which calculates the sum of the 3 subject marks obtained.

if this has to be done in a non object way(Procedural way), we should go about creating name variables for all the students, likewise do the same for their age property and marks property and have a function which takes in the all the subject marks as parameters and gives you a total.

Now lets look at object oriented approach.

In the above example we can keep creating more student objects by calling the student constructor function, with the required parameters.

Even though this was a very simple example to understand objects in JavaScript, we are likely to encounter more such similar problems in our every day work. structuring our code become a lot simpler when you we take the object way over the procedural way.

Now we that we have known why we need objects, let see the different ways we could create one.

How to create an object?

We created the above object using an object constructor function. There are other ways of creating objects.

Different ways of creating an object.

2. factory function.

3. Constructor functions.

when to use which method is entirely based on each ones use cases and preferences. But there are certain key distinct points that you can consider before choosing one option.

Weighing down these points its totally upto the user to make a calculated decision on which method he wishes to settle for.

Ways of accessing/modifying Objects properties.

An object once created can be accessed, modified, new properties can be added, deleted with ease.

we can either do this using dot(.) notation or by square brackets[].

lets look into an example.

in the code section above student1 variable will have access to all the properties of Student object and can access it either by,

these two ways behave the same way in most of the cases where the key is a single word. In the above example when we say student1.section, the section is the key and the output(Rahul) is the value. suppose say there is a key by the name no of rooms in this case the dot notation would and we would be left with only square brackets to access the value of that particular key.

In above example the house object is created with keys no of rooms, color and type. We would be able to access the color property and type by using either dot(.) notation or square brackets, but if we need to access the no of rooms then we will have to use only the square brackets with key wrapped within quotes.

To conclude we can say, whatever expression is put inside the square brackets will be evaluated to have a string(key) present in the object, whereas in dot notation it blindly checks if the key after the dot is present in the object.

Similarly modifying/deleting object properties becomes straightforward just like accessing, using either dot notation/ square brackets.

note: would suggest trying out all the operations with different edge cases and try understanding how object gets modified or behave in a particular way.

When Objects behave differently compared to primitive datatypes?

In javascript there are 5 primitive datatypes,

these tend to behave differently when compared over objects. We shall specifically try focusing on pass by reference and pass by value with objects and primitive datatypes as one such distinction.

This topic can be better understood with an example.

All primitive datatypes when passed as an argument or when copied to another variable is passed by value, which means each variable will hold just the value and any modifications done to one variable will not affect other variables which holds the same value.

The object newObj gets modified even though it was just passed to a function, and the modification was done on the modifiedObj variable name. The reason behind this behaviour is that all objects when passed as an argument to a function or copied to a variable, is passed by reference. which means all variables will be pointing to the same object reference and any modifications done to the object using these reference variable will reflect to all the variables pointing to this object.

Conclusion.

These are some shallow concepts on how Objects work in JavaScript. A much more in-depth journey towards Objects would be seen in upcoming posts. Happy coding!! Comments and feedback are most welcome.

Related posts:

It was about seven years ago when I got my first real job in a warehouse working the graveyard shift. My daily routine was to sleep during the day, eat then go to work starting at 11 p.m. Working…

Qualifying groups are divided in order of POINT from the top. A→B→C→D→D→E→F→G→G→F→E→D→C→B→A】 and repeatedly adds player to those groups. Combinations within the tournament after grouping will be…

For 16 years of my life I have done ballet, and throughout the majority of those years I thought that I was simply learning how to dance. However, particularly in high school, I came to realize that…