CHAPTER 7 : EXTENSIONS OF JAVASCRIPT.

Map, Filter and Reduce : Rhymes well?

They are the Array Methods which iterates over an array and return new array as well.

What? A lot of array???

Map: It creates a new array from existing one applying function to each element of original array.

const no =[1,2,3,4]
const double = no.map(item=> item*2);
console.log(double)

Filter: It takes in each element and apply conditional statement to it. If the statement passes true, element is pushed to output array otherwise not.

const even = no.filter(item=>(item%2)==0)
console.log(even)

Reduce : It reduces value of array just down to one value.

const no =[1,2,3,4];
const sum = no.reduce(function(result ,item)
   {
return result+item
   },0);

console.log(sum); //10

CLASSES????

We all know this thing fundamentally that objects are a way to model data. If user is a object it can surely have properties and methods inside it.

In real world there can be billions of user thus leading to dupliaction and creation of multiple copies of user How can we solve this tedious task?

We can have a template for user objects to populate data.

One solution is :

function User(name , age)
   {
      this.name= name;
      this.age= age;
  }

const o1 = new User("a",10);
const o2 = new User("b",20);
const o3 = new User("c",30);

This function is nothing but a pure constructor which is called everytime during creation of object.

But ES6 came up with more flexible concept of classes :

class User
           {
             constructor(name ,age)
                   {
                          this.name=name;
                          this.age= age;
                   }
             }

const o1 = new User("a",10);

The class function basically creates a template that we can use to create objects later. The constructor() method is a special method called when an instance of the User class is created.

Like any other programming language class can contain normal as well as static methods inside it.

Remember: A static method cannot be called from an instance of the class.

GETTERS AND SETTERS

JS is an Object oriented Programming Language thus follows four pillars of it. Encapsulation is one of it. In it data should not be directly accessed or modified from outside the object.

To access or modify a property we would use a getter (access) or a setter (modify), which are specific methods we define in our class.

STAR: There is no native support for private properties in JavaScript. So all the properties we’ve declared can be directly accessed from outside the object.

JS is no more different. Similarly it follows other OOPS Concepts like Inheritance as well.

PROTOTYPE HYPE

  let person = {};
  person.name ="A";
  person.age =12;

  person.eat = function()
                {
                        console.log('eating');
                 }

Logically for different person objects we do: const o1 = person("a",10); const o2 = person("b",11);

But for millions of objects everytime a object is created a function is recreated as well. THUS MEMORY IS EATEN........

Solution could be create methods once and reuse them as reference inside object's function.

But here to modify/add new method all instances got modified. Solution is Prototype

HERE COMES THE HERO?

Prototype: Every time you create a function in JS an extra property called prototype is added by JS Engine to the created function.

 "prototype object"  = object has constructor by default 
(to point back to function)

HOW TO ACCESS?

**. prototype

.prototype.constructor **

   function person(name , age)
        {
              this.name = name;
              this.age = age;
         }
 console.log(person.prototype);
//It gives two things constructor and __proto__

So If we put all our functions into the prototype object instead of creating a separate object for those and assign them inside the function definition as follows :

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.eat = function () {
    console.log(" eating.")
}

const o1 = new Person("A",9);

In this we added methods to the function’s prototype object. There is another property in the Person instance (i.e proto), but we did not add that property to the object we created right.

Basically, this property is the getter and setter to the function's prototype object.

So steps are: First, we defined our constructor function Person. Then we added methods to its prototype object.

When we add functions or properties (you also can add properties) to the any function’s prototype object it will be available to its instances through the prototype object.

TRUE : o1.proto === o2.proto

PROTOTYPE CHAIN

There is nothing in it, but if we expand the object we can see proto property in it. This gives us a hint that this is pointing to a some function’s prototype object.

The JavaScript engine has called this toString method in some object’s prototype object’s function in order to generate this output.

All the objects in JavaScript inherit the properties and methods from Object.prototype. This is called Prototype chaining.

PROTOTYPAL INHERITANCE

In JavaScript, objects have a special hidden property [[Prototype]] that is either null or references another object. That object is called “a prototype”:

When we read a property from object, and it’s missing, JavaScript automatically takes it from the prototype. In programming, such thing is called “prototypal inheritance”.

   let animal = {
   eats: true
       };
   let rabbit = {
   jumps: true
      };

rabbit.__proto__ = animal; // sets rabbit.[[Prototype]] = animal

Now if we read a property from rabbit, and it’s missing, JavaScript will automatically take it from animal.

For instance:

alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

Thankyou!

SakshiCodrops

SakshiCodrops

JAVASCRIPT JOURNEY-DAY 7

CHAPTER 7 : EXTENSIONS OF JAVASCRIPT.

HERE COMES THE HERO?