Note 4 : Object

-

  • Previously we have seen all types of primitive types. now let see reference types.

Object:
  • It is the collection of highly related variables or can say a group of highly related variables is known as an object.
  • here is the basic syntax of an object.

  • If we want to access any property of an object we can use DOT. like here for example, if we want to access name we can simply write "person.name".
  • another way is to access any property of an object is using Bracket Notation. like person["name"].
Something Advance about the Objects:
  • so we can encapsulate highly related key-value pairs together in an object. we can declare an object with object literal syntax. and inside them, we can add one or more key-value pairs.
  • in the object, we store highly related properties. in the object, we have key-value pairs. and in the value, we can store anything we want so I can say value can be anything. it can be a number, a string, a boolean or it can be null, it can be undefined, it can be an array or in can be another object or function.

  • as here circle object is declared. here in object radius key have 1 value. location key stores an object which has two more kyes x:1,y:2.  isActive stores boolean value. and draw stores a function. 
  • so we can see in the object value of the key can be anything. As we know it is an object so we can access their properties with DOT notation.

  • we can see here properties we have declared here are accessible by using DOT property.
  • whatever you have been seen here we can refer this as an Object-Oriented style of programming.
  • Object-oriented programming is basically a style of programming where we see a program as a collection of objects that talk to each other to perform some functionality.
  • so here we have a circle object. and this object has some properties and a function. in object-oriented programming terms if a function is a part of an object we call that function a method.
  • so as per these terms rather than saying the draw function we can say draw method of circle object. This is the difference between function and method.
  • Object literal syntax is the easy way to create an object but as our application became more complex we need different ways to create an object.
Factory Function:


  • here we are not going to return this circle any more because we are working with a function. so we have to remove this and also for better accessibility and purey focus on the factory function approach removed location, isAccessible properties. 
  • and we cant hard-code radius with 1 value so we are passing this in the parameter. and put as the value of radius key property.
  • we can do more shorter because in modern JavaScript if the key-value pair name is the same we can simply remove the value and simply adding the key.

  • we can do more shorter this code by changing the draw() function. rather than telling draw as key and function() as the function, we can simply.

  • so we have a factory function so we can call it to create circle objects.

  • we can call the draw method like this.

  • the beauty of the factory function is we have defined our logic in one place. so, by giving different arguments we will have different circle objects but we have defined the draw() method in a single place. so in case, we have a bug in the circle method in the future we can fix it from here.
  • we have 2 different circles objects and a single definition of the draw method.
Constructor Function:
  • naming notation of the construction function is different than a factory function. in the factory function, we declare a function with camel notation(createCircle)
  • [camel Notation: the first letter of the first word is in lower case after than each letter of a word will be in upper case.]
  • [pascal Notation: the first letter of each word will be uppercase]
  • by declaring the Constructor function we use Pascal notation in the name. also instead of returning an object, we do different approaches.
  • in JavaScript, we have a keyword "This" and "This" is a reference to the object that is executing in this piece of code. right now You can imagine that This keyword refers to an empty object.and with Dot notation we can read a property or set a property. 


  • so in a new empty object, we store new radius property. in JavaScript our objects are dynamic so we can add additional properties letter or remove it. the same approach we will use to create a new draw() method here. 

  • to create an object of factory function we write : var circle = createCircle(10).
  • and to create an object using Constructor function: var circle = new Circle(3).[Here we have used new keyword]
Dynamic Nature of an Object
  • The nature of an object in javascript is dynamic. which means you can add or remove any new property or change the property anytime anywhere. 


  • here one thing notices that we have use circle as a constant and then we do this stuff. it might be confusing because we have to use the cost keyword. but it is nothing confusing in it because we can add-remove property here but we are not reassigning the circle object anymore.
  • if we do this it will throw an error like this.

Constructor property of an object:






Functions are objects :

  • every object In javascript has its own constructor properties and that references the function that was used to create an object.

  • Circle.name returns the name of the function and Circle.length returns the number of arguments required to that function.
  • so these are the members of the circle object or function. her purple icons are the methods like call bind and apply and blue icons are the properties like caller, name, length.




  • there are some built-in methods here. like call method we can use this by "Circle. call"
  • with the call we can call this function in the first argument is this argument here, we have to pass an empty object{} and this will refer to that object and then we can pass the arguments explicitly.

  • one thing notices here that when we use a new operator. the new operator will internally create an empty object and pass them as the first argument into the call method and this object will determine with the Contax with this(keyword).
  • and if we don't use this keyword this(keyword) will refer to the global object i.e. window.
  • as same we have another method named as applying it is exactly the same as the call method but different is that rather than passing argument explicitly we pass them as an array.




Value VS Reference Type :



  • one thing we have to notice that Functions and Array are also Objects in Java-Script. In so nutshell, we can say we have value types and objects in javascript.

  • here x, y are independent of each other. this is a simple example of value types. let see what happened if we convert to them as an object

  • when we use an object that object is not stored in this variable that object is stored somewhere else in the memory and the address of that memory location will store inside that variable. so here we copy y =x. the value doesn't copy. it copies the address of the x and stored into y.
  • in other words, both x and y are referencing the same object in memory.

  • so if we do change in one variable the change will imminently visible to the other variable. so here conclusion...

let's understand an example.


  • here in the example, we increment the number by 1 but we can see the scope of the function is limited to {}. so after then, the number variable will go out of scope. so if we are printing a number in the console so basically we are dealing with the first number written in the line 2.(primitive are copy by their value)  
  • now let's change a little bit and understand this as an object way.

  • this happened because we call increase() and pass obj will pass by its reference to the local parameter we have declared on line 2 will refer to the same object. so in this case we are not dealing with two dependent copies we have two variables that are pointing to the same object so any change to apply to this object will apply to another automatically.
Enumerating Properties of an Object:






  • if we take closer look above [Object.keys(circle)]. so earlier we learn Object is a built-in constructor function so whenever we create an object with object literal syntax internally that translates into a call to this constructor function. so when we create an object.


  • as same we have Object.entris. it will return each key-value pair as an array.






  • the easiest way to iterate an object is a for-in loop. we can also iterate this with help of for of loop along with [Object.keys] and [Object.entries].
  • and finally to check the properties are available in an object we can use an operator.
Cloning an object :


    

  • There are various ways to cloning an object we can iterating by keys with help of for in loop and etc. but the easiest way is to use spread operator({...}). here at line number 15 is the example of the spread operator it will basically take all the properties and the methods of circle object and put between 2 curly brackets.
Garbage collection in JavaScript.?
  • when we create an object the memory will automatically allocate to them and when we next we will use them and when we are done with it we don't have to deallocate the memory.
  • So, our JavaScript engine has what we call  The Garbage Collector, The Job of the garbage collector is to find the variables or the constants which are no longer use and then deallocate the memory which was allocated to them. 
  • we don't need to worry about this this will happens automatically behind the scene and we don't have control over them.
Some Practicals :
  • create an object with Factory function and Constructor function and call them respectively.
  • an example to check both objects is the same or Equal.
  • create a post object with various properties like title, body, author, views, comments with the author of the comment, and body of comment and post is live or not.
  • creating the same post with the help of the constructor function.


Comments

Post a Comment

Popular posts from this blog

NOTE 1: JavaScript introduction

-
Image
 what is JAVA Script.?     It is the most powerful and widely use language right now. we can create websites, mobile apps, and games with javascript. where does Java script code run.? Java script was originally designed to run only in the browser, each browser has its own Javascript engine that runs the JS. In 2009 a very claver engineer known as Rayan dawn took the open-source JS engine from chrome known as V8 and embedded inside c++ program. and that program is known as a NODE. so, Node is a C++ program that includes google's v8  JS engine. so, now with help with it, we can run JavaScript code outside of the browser. so we can pass our JavaScript code with Node for the execution, so it means we can treat JS like treating in backend service as well as mobile application services. So, a nutshell Javascript code runs inside to the browser or node. browser and node provides runtime environment for our Javascript code. what is the difference between Javascript and ECMAS...
Read more

Note 5: Arrays.

-
Image
Sometimes we have to deal with a list of objects. for example a list of products in shopping carts or selected color from the list. In this kind of situation, we use arrays to store that list. so here is our array of 3 elements if we expend them we will also have an index of each element. and that index determines the position of that element. so, the index of the first element will be 0. next of that will be 1, and so on... and also if we want to access the element of the array we can use index. here in the example, we have selected the first index element which is "Red". As we know JavaScript is a dynamic language so if we change the value of the array the element with different dataType it will change accordingly. and the same rules also apply to the array. also, the objects in the array are dynamic. in other programming languages, we can store the element in the array of the same type but in JavaScript, we can store any type of object in the array. so now we have three st...
Read more

Note 6 : Functions

-
Image
It is a fundamental building block of JavaScript. it is basically a set of statements to perform some tasks and calculate the value. while declaring any function we don't need to add semicolumn at the end like we have declared any variables before. but the functions are more than rather only declaring and calling we can make this more interesting by passing arguments and call that function. Here one thing we have to notice that when we pass in anything in the function call is known as an argument. like here in the above example printMessage('This is the message') the sting here in 'This is the message' is an argument. and a message is written in the function printMessage(message) is a parameter here in printMessage function. the main fundamental things here to work like this is we can reuse the printMessage function. a function may have multiple parameters. the default value of the parameter is undefined. Types of function : or we can write this like this. the funct...
Read more