JavaScript

Last Updated: 12/14/2022

Objects

  • Objects are collections of key value pairs
  • If you have variables that are highly related, you can encapsulate them inside of an object
  • Property values can be any type in JavaScript, it can be a number, a string, a boolean, null, undefined, it can even be another object. or an array, or a function.
  • Purpose of an object is to group related variables.
  • You can also have functions that should operate on these variables. If you have functions that are highly related to the variables and instead of defining these functions, in a standalone way, it's better to put these functions, inside an object.

OOP

  • Object oriented programming (OOP) is basically a style of programming where you see a program as a collection of objects that talk to each other to perform some functionality.
  • An object is made up of multiple members. Each member has a name and a value
  • When a member contains data, it is called as property
  • When a member contains function, it is called as method
  • Object contains properties and methods
const circle = {
    radius: 5,
    location: {
        x: 10,
        y: 10
    },
    draw: function() {
        console.log("draw circle")
    }
}

Dynamic nature of objects

  • In JavaScript, objects are dynamic which means once you create them you can always add new properties or methods or remove existing ones.
const circle = {
    radius: 10,
    draw: function() {
        console.log("draw")
    }            
};

circle.color = "blue";
circle.move = function() {
    console.log("move");
}

console.log(circle);
delete circle.color;
delete circle.move;
console.log(circle);

Factory Function

  • Factory function, just like a factory producing products, these factory functions produce objects.
  • Use camelCase notation for factory function
function createCircle(radius) {
    return {
        radius: radius,
        draw() {
            console.log("draw circle");
        }
    }
}

In modern JavaScript if the key and value are the same, you can make our code shorter by removing a value and simply adding the key

function createCircle(radius) {
    return {
        radius,
        draw() {
            console.log("draw circle");
        }
    }
}

Constructor Function

  • The job of Constructor function is to construct or create an object
  • Use Pascal Notation for Construction Function
  • this is a reference to the object that is executing this piece of code
  • When you use the new operator, 3 things happen, new operator first creates an empty object, set this to point the object and finally it will return that object from this function
function Circle(radius) {
    this.radius = radius;
    this.draw = function() {
        console.log("draw");
    }
}

const circle = new Circle(10);

Constructor

  • Every object in JavaScript has a property called constructor and references the function that was used to construct or create that object
  • Built in constructor function
    • String
    • Boolean
    • Number
    • Function

Object Constructor Function

When you create an object using object literal syntax, internally the JavaScript engine uses the Object constructor function

const person = {
	name: "ganesh",
	age: 30
}

const person = new Object();
person.name = "ganesh";
person.age = 50;

Object.keys

  • Returns an array of a given object's property names.
for(let  key  of  Object.keys(person)) {
	console.log(key);
}

Object.values

  • Returns an array of a given object's own property values.
for(let  value  of  Object.values(person)) {
	console.log(value);
}

Object.entries

  • Returns an array of a given object's own property key-value pairs.
for(let entry of Object.entries(person)) {
    console.log(entry);
}

in

  • Returns true if the specified property is in the specified object
console.log("name" in person);
Previous
Next