A longer session today. We have tried to remain disciplined, but couldn’t due to work commitments.

So we learned about “Objects” today. I have worked with them before with C++. But learnt how they are treated in JS like. So the key takeaways were:

PART I:

JS is a prototype based object oriented programming language.
In JS we generally work with objects. These objects have properties, which are features that give this object meaning
Objects in JS are very similar to objects in real life(but written in a programming language)
Each object is a unique instance of an object prototype
Objects have common properties that describe the prototype of a unique object( he took example of a backpack)
Prototype of an object is basically a template that enables you to create multiple objects of the same type
Methods are the the property changing enablers. They act on the values of these properties and have the power to alter them
One object can contain another object
JavaScript objects are collections of data and functionality stored as properties and methods that describe the object and what it can do
A variable holds the object

To create an object we use the “const” keyword. Objects are typically CONSTANTS (but properties inside of objects can be altered)

This means that the variable backpack is now assigned to an object, this keyword cannot be reused elsewhere to define some different variable and also cannot be changed to be called something else, for e.g.- backpack = “bag”

const backpack = {};

Curly brackets mean that this is a JS object

const backpack{
    name: "Everyday backpack",
    colour: "black",
    chains: 4,

    changeColour: function(newColour){
      this.colour = newColour;
    },
};

Above is an object that has properties name, colour and number of chains. It also contains a method that changes the colour of the backpack
Methods are properties containing functions
“this” keyword refers to the current object being spoken about
Properties are defined as a colon separated name value pair
Only alphabets, digits, $, _ are allowed to be used as property names. No other symbols
Objects can be accessed by directly calling them by name in the console window

PART II

console.log(“______”) is the print function of JS. It is a console method
properties of object can be accessed by 2 notations: i) dot notation ii)bracket notation
Generally -dot notation is used. Bracket notation is used when you want to do more things( the example that I could think of was if you were to fetch something for the user and if that label was to become the name of a property, you would take that input using bracket notation

console.log("Name of the car is", backpack.name);   // dot notation
var query = colour;
console.log("Colour of the car is:", backpack[query]);  //bracket notation

method is similar to any other language like C. There is a parameter and there is an action taking place

changeColour: function(newColour){
      this.colour = newColour;
    }

the function keyword is not necessary. It can also be declared like: changeColour(newColour){}
Method is also treated like a property of the object while calling it using the dot or bracket notation

PART III:

Classes are blueprints or templates of an object
Many objects that have the same characteristic properties but different combination of values can be called objects of a template, i.e., a class
An object can now be defined as an instance of a class
A new object belonging to a class inherits all the properties of that class

                           // creating class car

class Car {
  constructor(

    name,                    // parameters
    colour,
    ignitionStatus
  ) {
                                // properties
    this.name = name;
    this.colour = colour;
    this.ignitionStatus = ignitionStatus;
  }

  toggleIgnition(newStatus) {
    this.ignitionStatus = newStatus;
  }

  changeColour(newColour) {
    this.colour = newColour;
  }
}

This is a complete class, with a constructor method, properties, other methods
Constructor method is used to literally construct the object of that class
Constructor method defines the properties that are going to be associated with the class

const car1 = new Car("BMW", 2002, "navy blue", 4, true);
const car2 = new Car("Lambo", 2004, "black", 2, false);

new keyword is used to create an object of a class
you can see now, we can create multiple similar objects easily without having to describe the properties repeatedly
A Class should always be defined before using it
Classes are the best place to use Modules(import classes from different files at the beginning of our main JS file
Object Constructor functions can be used to create objects
Very similar to a class, only in Object Constructor functions the methods are defined inside the function, whereas in a class other methods of the class are declared outside the main constructor function

function Backpack(
  name,
  volume,
  color,
  lidOpen
) {
  this.name = name;
  this.volume = volume;
  this.color = color;
  this.lidOpen = lidOpen;

  this.toggleLid = function (lidStatus) {
    this.lidOpen = lidStatus;
  };

}

Class is still the preferred way of making objects

If you find any discrepancies in my blog. Please do let me know. See you in the next blog. Cheers!

Learning JavaScript: Day 4 (Objects, Methods & Classes)

Table of contents

PART I:

PART II

PART III: