DEV Community: kamlesh-21

Constructor Functions Explained with MASALA DOSA

kamlesh-21 — Sat, 18 Mar 2023 14:51:09 +0000

If you've ever been to a South Indian restaurant, you'll know that the variety of dishes available can be overwhelming. From dosas to idlis, each dish has its own unique flavor and texture. But did you know that constructor functions in JavaScript can be used to create objects in a similar way to how a South Indian restaurant creates its dishes?

Imagine that the South Indian restaurant is like a constructor function. Just like the restaurant has a set of predefined recipes and ingredients, a constructor function has a set of predefined properties and methods. For example, a dosa constructor function may have properties such as the type of dosa, the ingredients used, and the cooking time, while its methods may include functions for flipping the dosa and adding toppings.

Here's an example of a dosa constructor function in JavaScript:

function Dosa(type, ingredients, cookingTime) {
  this.type = type;
  this.ingredients = ingredients;
  this.cookingTime = cookingTime;

  this.flip = function() {
    console.log(`Flipping the ${this.type} dosa!`);
  }

  this.addToppings = function(toppings) {
    console.log(`Adding ${toppings} to the ${this.type} dosa!`);
  }
}

In this example, the Dosa constructor function has three properties: type, ingredients, and cookingTime. It also has two methods: flip and addToppings.

To create a new dosa object using the Dosa constructor function, we can use the new keyword and pass in the relevant arguments, as seem below:

const masalaDosa = new Dosa({
  type: 'Masala', 
  ingredients: ['potatoes', 'onions', 'spices'], 
  cookingTime: '10 minutes'
});

In the above example, we create a new masalaDosa object with the property type set to 'Masala', property ingredients set to ['potatoes', 'onions', 'spices'], and property cookingTime set to '10 minutes'.

Now, We can then call the flip and addToppings methods on the masalaDosa object:

masalaDosa.flip(); // Output: Flipping the Masala dosa!
masalaDosa.addToppings('chutney and sambar'); // Output: Adding chutney and sambar to the Masala dosa!

In JavaScript, we use the this keyword to refer to the current object being created or modified. In the Dosa constructor function, we use this to set the values of the type, ingredients, and cookingTime properties, as well as to define the flip and addToppings methods.

So, next time you visit a South Indian restaurant, take a moment to appreciate the way each dish is created using a set of predefined ingredients and cooking methods, just like how a constructor function creates objects in JavaScript.

From Pizza to Samosas: Understanding Object Properties and Methods in JavaScript

kamlesh-21 — Sat, 18 Mar 2023 13:00:04 +0000

Have you ever wondered what "object properties" and "methods" mean in JavaScript? These terms might sound confusing at first, but they are actually just ways to describe the characteristics and actions of objects in the language. To help you understand these concepts better, Let's take a look at some everyday examples that you can relate to.

We'll start with a familiar food item: pizza. A pizza can be thought of as an object in JavaScript, with different properties that describe its size, toppings, and crust type. For example, a large pepperoni pizza with a thin crust would have the following properties:

const pizza = { size: 'large', toppings: ['pepperoni'], crustType: 'thin' };

But a pizza can also have methods that allow you to perform actions on it. For example, you can cut a slice of pizza or eat a slice of pizza. These methods use the properties of the pizza object to perform the action. Here's an example:

const pizza = {
  size: 'large',
  toppings: ['pepperoni'],
  crustType: 'thin',
  slice: function() {
    console.log('You have cut a slice of pizza.');
  },
  eat: function() {
    console.log('You have eaten a slice of pizza.');
  }
};

pizza.slice(); // Output: You have cut a slice of pizza.
pizza.eat(); // Output: You have eaten a slice of pizza.

In this example, the slice() and eat() methods are like actions that you can perform on the pizza object. They use the properties of the pizza, like its size and toppings, to perform the action.

Now let's move on to a different type of food: samosas. A samosa is a popular Indian street food that is shaped like a triangle and filled with spiced potatoes. Like pizza, a samosa can be thought of as an object in JavaScript, with different properties that describe its filling, spiciness, and shape. Here's an example:

const samosa = {
  filling: 'potatoes',
  spiciness: 'medium',
  shape: 'triangular',
  bite: function() {
    console.log('You have bitten into the samosa.');
  },
  dip: function() {
    console.log('You have dipped the samosa in chutney.');
  }
};

samosa.bite(); // Output: You have bitten into the samosa.
samosa.dip(); // Output: You have dipped the samosa in chutney.

In this example, the bite() and dip() methods are like actions that you can perform on the samosa object. They use the properties of the samosa, like its filling and spiciness, to perform the action.

So, as we can see, object properties and methods in JavaScript are just ways to describe the characteristics and actions of objects, using examples that you can relate to in your everyday life.

And remember, when it comes to JavaScript objects and food, the possibilities are endless. Just don't try to eat your code!

The Toast Sandwich and the Magic of Callback Functions

kamlesh-21 — Tue, 14 Mar 2023 07:17:08 +0000

This was a tough topic for me to wrap my head around, but finally, I understood it. Let me tell you a story that will help you understand callbacks and asynchronous programming.

You are in the mood for a yummy toast sandwich with cheese and vegetables. There are two steps to it:

1.First, make two bread toasts ( function toastBread() )
2.Make the sandwich ( function makeSandwich() )

You start by putting the bread in the toaster and setting the timer for two minutes. But what should you do during those two minutes? You decide to start preparing the fillings for the sandwich by chopping up some vegetables and cheese.

Now, here's the problem: How will you know when the bread is done toasting? You don't want to burn it! This is where asynchronous programming comes in.

When you put the bread in the toaster, you also tell the toaster what to do once the bread is done toasting. This is where the callback function comes in. When you put the bread in the toaster, you also tell the toaster what to do once the bread is done toasting. This is the callback function that you pass as an argument to the toastBread() function. In our case, the callback function is the second step of making the sandwich: makeSandwich().

function **toastBread**(here we have to tell this function what to do after bread is done toasting _as a parameter_ - lets call this as _callback_) 

function toastBread(callback) {

  // Put the bread in the toaster
  // Set the timer for 2 minutes
  // Start the timer
  // When the timer is done, call the callback function
  setTimeout(() => {
    callback();
  }, 2000);
}

function makeSandwich() {
  // Assemble sandwich with toasted bread and fillings
}

// Make the toast first, and then make the sandwich
toastBread(makeSandwich);

Now, here's the important part: the toastBread() function is an example of an asynchronous function. It means that the function doesn't block the rest of the code from executing. Instead, it starts a timer and lets the code continue executing. When the timer is done, the callback function is called.

So, while the bread is toasting, you can continue preparing the fillings for the sandwich, without waiting for the toastBread() function to complete.

When the 2 minutes are up, the toaster calls the callback function, which in our case is makeSandwich(). This function is now executed, and the sandwich is assembled using the toasted bread and the fillings you prepared earlier.

So, in summary, the callback function is a way to tell a function what to do once a certain task is complete. It allows you to execute code in a specific order, and helps to avoid situations where you have to wait for one task to complete before moving on to the next one.

And that, my friends, is how you can make a sandwich. So next time you're hungry and in a hurry, remember to toast your bread with a callback function!