Getting started with JavaScript : The Definitive Guide : Week2

#javascript #webdev #beginners #devlife

Topics Covered in this blog are Objects!

Computer works in a very simple way. It takes input from user, processes it and then provides us with an output. This seems like work of intelligence! It is indeed. But I've to break it to you, computer is a dumb machine it cannot do anything by itself.

Computer programs are what makes computer an Intelligent Machine and how does computer program do these things? It manipulates values, the kind of values that are known as types and are one of the fundamental characteristics of a programming language. Also there values are stored within the memory with the help of variable. We will see more about this as we advance through this chapter :

JavaScript types can be divided into two categories

1.Primitive types
2.Object types

Basically everything in JavaScript is an Object including the Primitive types. And every object has two compulsory characteristics properties and values. The third characteristic one is optional as it is methods (which basically are nothing but functions related to a particular set of object) because some might require them and some might not.

JavaScript's primitive types include
1.Numbers
2.Strings
3.Boolean
4.Null
5.Undefined

Primitive types are basically immutable objects, which means an object whose state cannot be modified after it is created and are predefined within the language.
You can check the type of the variables or objects using typeof operator in JavaScript.

Now let's jump to understand more about Objects. A mutable object is an object whose state can be modified after it is created. A JavaScript program can change the values of object properties and array elements.

Let's look at an example I've given here:

Let Me show you the type person now belongs to:

See now we know about objects. More interesting part over here is I can even change the whole object. See this

But But But!!!!! take a look at the declaration. I've used let to define my object person. Which means we can change the whole object in a single command. But the thing to keep in mind here is that when we declare a object using const keyword it is not that easy to change the object. Look how the same code threw an Error over here:

So now the question that would pop-up into your mind would be would it make this person(object) immutable?

The answer to the above question is NO.

I'd explain it to you in a simple way. Just suppose yourself as a object with const declaration. You have some properties which will remain as they are for your entire life such as your name mentioned on your birth-certificate(unless you decide to change it) or the colour of your hair or simply who gave you birth. These things won't change. But yes you can have different age, different hairstyle, different favourite song!

You can still change the properties of the Obj with const declaration but not all of them together. Here is how you can do it:

We can do this by reassigning each object property individually.
You can study more about how let, const and var works in JavaScript in this link.
I want to bring your focus to one more thing over here. When we define functions within an particular object they are called methods. Take this for an example:

Here fullName is function declared within person object and hence will be called as method of person.

Now, let's move forward and see how we can create new objects,
but before we dive deep, it is important to note that JavaScript is an object-based language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have an inheritance of properties and their values.

We can create objects in the following ways given:

1.Creation of an object using constructor

Constructor is nothing but a function and with help of new keyword, constructor function allows to create multiple objects of same blueprint as shown below:

A class is a blueprint for similar type of objects, in OOPs it has two major components, certain parameters and few member functions. In this method we declare a function similar to a class, there are three parameters, brand, designer and country (the this keyword is used to differentiate brand, designer and country of the class to the brand, designer, country of the arguments that are being supplied.). We then simple create an object tshirt of the type clothes and initialize it. We can see that tshirt object now has properties as of clothes i.e. brand, designer and country.

2.Creation of objects using Object literals.

Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces as shown below:

As shown in the above code we created a simple object named tshirt with the help of object literal, having properties like brand, designer, country. Then we make use of the property accessor methods(Dot notation, Bracket notation) to console.log the values.
Now let’s see how we can add more properties to an already defined object:

3.Creating object with Object.create() method.

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

4.Using es6 classes.

ES6 supports class concept like any other Statically typed or object oriented language. So, object can be created out of a class in javascript as well as shown below: