DEV Community: Sandeep Nautiyal

Understanding Lexical Scope and Closure in JavaScript

Sandeep Nautiyal — Mon, 29 Apr 2024 15:20:17 +0000

Intro:

In programming, scoping refers to the accessibility of variables and functions within different parts of your code. It essentially defines where you can use a certain variable or function and where you can't.

Lexical scope:

Lexical scope is a specific way of determining this accessibility based on the physical location of the code.

To put it simply scoping means which variable or functions can be accessed in which part of your code understanding this will help you to write better code. Js Uses lexical scoping during execution to check if the variable we are calling in our function or if the function we are trying to call is even accessible or not. there are three types of scope in js

Global Scope.
Local Scope.
Block Scope.

Global Scope.

Variables and functions declared outside of any function or a block {} are in global scope and can be accessed by any method.

var a = 10;
function sum(b){
return a+b;
}
console.log(sum(20))
//print's 30 as a is declared in global scope it can be accessible by any Method.

Local Scope

If a variable is being declared inside a function then it can only be accessed inside that function that is a local scope or a functional scope.

function sum(b){
     var a = 10;
 // will give you 10 as it will first check for 
 // local context where it will get it's value 
 // then it will be printed
     console.log(a)
     return a+b;
}
sum(10)
console.log(a) // it will give you an err as console.log will check for the variable in global context as it is not inside the function.

Block Scope

Now let's talk about block Scope in ES6 two new keywords were introduced const and let these two goes one step further in scoping as these two are block scope what I mean by that is if you declare any variable with these two keywords inside a block {} they will be discoverable inside that block only.

to give you a better understanding here is a code snippet.

if(true){
    var a = 10;
    let b = 20;
// this will print 10 20
    console.log(a,b);
}
// throws err saying b not defined.
console.log(a,b)

I hope this will help you understand better what Scopes are in js.

Scope Accessibility Summary:

Global Scope: Variables and functions declared outside of any function are accessible from anywhere in the code.

Local Scope (Function Scope): Variables declared within a function are only accessible within that function.

Block Scope (let & const): Variables declared with let or const within a block (like if statements or loops) are only accessible within that block.

Closure

In JavaScript, closures allow inner functions to access variables from their enclosing function's scope, even after the outer function has finished executing. This happens because the inner function remembers the reference to the outer function's variables at the time it's created. It's like the inner function "closes over" the outer function's scope, hence the term "closure."

function createUserInfo(name) {
  let userName = name; // Local variable to `createUserInfo`

  function greetUser() {
    console.log("Hello, " + userName + "!");
  }

  return greetUser;
}

const greetJohn = createUserInfo("Sandeep");
greetJohn(); // Output: Hello, Sandeep!

const greetJane = createUserInfo("Aarush");
greetJane(); // Output: Hello, Aarush!

createUserInfo takes a name as input and creates a local variable userName.

An inner function greetUser is defined that uses userName.

The outer function returns the greetUser function, effectively hiding the userName variable.

Now, calling createUserInfo with different names ("John" and "Jane") creates separate closures. Each closure remembers its own private copy of userName. This way, you can greet different users without worrying about variable conflicts.

And there you have it! By mastering lexical scope and closures, you'll be well on your way to crafting clean, maintainable, and organized JavaScript code. These concepts empower you to safeguard variables from accidental changes, establish privacy within functions, and build modular, reusable code blocks.

So next time when you met an err with a variable you know exactly what went wrong.....

Hope this helps! 😁😁

Polyfills Explained: Making Modern JavaScript Work Everywhere 🤯🤯

Sandeep Nautiyal — Fri, 26 Apr 2024 18:52:51 +0000

Ever written code that works flawlessly on your machine, only to have it crumble when a user with an older browser tries to access it? That's where polyfills come in!

Understanding Polyfills

In simpler terms, a polyfill is a piece of code that fills the gaps between modern JavaScript features and older browsers that don't support them yet. Imagine it like a translator, taking modern code and converting it into something older browsers can understand.

A Case for Polyfills

Let's say you built a fantastic web app that uses the reduce method to efficiently calculate the sum of numbers in an array. But what if someone using an outdated browser tries to access it? Boom! 💥💥 Your app might malfunction because that browser doesn't recognize reduce. Here's where polyfills come to the rescue!

Polyfills to the Rescue!

Polyfills mimic the behavior of new features for browsers that lack them. They essentially act as translators, converting modern code into a language older browsers can understand. This ensures your app functions smoothly for everyone, regardless of their browser version.

Putting Polyfills into Action: A Simple Example

Remember our reduce method example? We can use a polyfill to ensure it works even in older browsers. Here's a simplified version of how it might look:

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function (callback, initialValue) {
    // console.log(this,"arr");
    let accumulator = initialValue !== undefined ? initialValue : this[0]; // Use initialValue or first element as accumulator

    for (
      let index = initialValue !== undefined ? 0 : 1;
      index < this.length;
      index++
    ) {
      accumulator = callback(accumulator, this[index], index, this); // Pass all 4 arguments to callback
    }

    return accumulator;
  };
}
const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((acc, curr) => acc + curr, 0); // Initial value of 0
console.log(sum); // Output: 10

How Does the Polyfill Work?

Conditional Check: The code first checks if the reduce method already exists on the Array.prototype object. If not, it proceeds to define the reduce method.

Accumulator and Loop: The reduce method takes two arguments: a callback function and an optional initial value. It sets up an accumulator variable to store the ongoing result and iterates through the array using a for loop.

Callback Execution: Inside the loop, the callback function is called for each element in the array, passing four arguments: the current accumulator value, the current element, the current element's index, and the entire array itself.

Returning the Result: After iterating through all elements, the final value of the accumulator is returned, representing the accumulated result of the callback function applied to each element.

The Power of Polyfills

By incorporating polyfills, you ensure your web app functions flawlessly for a wider audience, regardless of their browser version. It's a win-win situation: you get to leverage the latest JavaScript features while maintaining compatibility with older browsers. Polyfills are a valuable tool for any developer who wants to create future-proof and user-friendly web applications.

So, the next time you're coding with modern JavaScript features, remember the power of polyfills. They'll help you bridge the gap between cutting-edge development and real-world user experience!

Prototypal Inheritance in JS 🤔🤔 what's that ?

Sandeep Nautiyal — Thu, 25 Apr 2024 18:55:16 +0000

Inheritance in General

Before jumping into prototypal inheritance, let's talk about inheritance in general. Inheritance refers to the ability of an object (child) to inherit properties and methods from another object (parent). This is a fundamental concept in object-oriented programming (OOP).

Analogy: A classic example of inheritance is a child inheriting traits from its parents.

JavaScript and Inheritance:

While many OOP languages use classes for inheritance, JavaScript takes a different approach: prototypal inheritance.

Prototypal Inheritance

In JavaScript, instead of relying on classes, inheritance is achieved through prototypes. A prototype is a special object that serves as a template for creating new objects. It defines the properties and methods that will be inherited by these new objects.

Let's understand this with some code:

// Define an Employee prototype (the master chef) using a constructor function
function Employee(empId, name, department) {
  this.empId = empId;
  this.name = name;
  this.department = department;
}

// Add a greet method to the prototype (a signature recipe)
Employee.prototype.greet = function() {
  console.log(`Hello, ${this.name} Welcome to xyz`);
};

// Create new Employee objects (the apprentices) using the Employee constructor
const emp1 = new Employee(30, "Alice", "QA");
const emp2 = new Employee(25, "Bob", "IT");

emp1.greet(); // Output: "Hello, Alice Welcome to xyz"
emp2.greet(); // Output: "Hello, Bob Welcome to xyz"

Fun Fact: The class syntax we use in JavaScript is actually syntactic sugar over a more fundamental concept – prototypes. Under the hood, classes create constructor functions and prototypes.

Everything in JavaScript is Connected!

Here's a mind-blowing secret: almost everything in JavaScript is connected to a prototype! You can verify this in your console:

let a = 10;
console.log(a.__proto__); // This will show you a whole object – that's the prototype!

The Power of Prototypal Inheritance

One of the benefits of prototypal inheritance is its flexibility. Unlike class-based inheritance, you can modify prototypes even after objects have been created. This allows you to add new methods or properties to existing objects dynamically.

Example: Adding a Custom Method to the Array Prototype

Array.prototype.myReduce = function() {
  // Implement your custom reduce functionality here
};

Note: While prototypal inheritance offers flexibility, it can sometimes lead to less structured code compared to traditional class-based inheritance. However, with a good understanding of prototypes and the prototype chain, you can become a master of object-oriented programming in JavaScript!

In the next article, we'll explore how to implement your own reduce method using prototypal inheritance, Until then, happy coding!

I hope this helps! 😁😁

What are Classes and How to Use Them in JavaScript ? 🤔🤔

Sandeep Nautiyal — Wed, 24 Apr 2024 06:33:02 +0000

JavaScript, prior to ES6 (ECMAScript 2015), relied on constructor functions to mimic object-oriented concepts. These functions act as blueprints for creating objects, but lack some of the features and structure offered by modern classes.
Let's see a basic implementation of a constructor function for reference...

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}
const person1 = new Person("Sandeep");

person1.greet(); // Output: "Hello, my name is Sandeep"

Now the question is if we already have something like this why to introduce something new, why to introduce classes, well thing is these functions have some limitations for example:-

No Inheritance: While you can mimic inheritance patterns using prototypes, it's less straightforward compared to classes.
Verbosity: Defining methods within the constructor function can lead to repetitive code, especially for complex objects.

that is why Classes were introduced in ES6 to addressed these shortcomings by providing a more structured and concise way to define objects and their behaviour.

Well Now enough with why they were introduced and let's jump into how to use them properly.

To create a class all you have to do is use a keyword to define it which is called (wait for it, wait for it, drum roll please 🥁 🥁) "class" lol 🤣🤣. Here is a code snippet of a class in action.

class Person{
    constructor(name){
        this.name=name;
    }
    greet(){
        return `Hello, my name is ${this.name}`
    }
}

const sandeep = new Person("sandeep");

console.log(sandeep.greet()); 
//Output:'Hello, my name is sandeep'

Here are some key benefits of using classes in JavaScript:

Reusability: Classes allow you to create multiple objects with the same structure and functionality, reducing code duplication.
Maintainability: Code is easier to understand and modify when it's organised into classes. Each class encapsulates its own data and logic, making it more self-contained.
Object-Oriented Patterns: Classes facilitate the use of common object-oriented design patterns like inheritance and polymorphism ✨

Now your next question will be "Sandeep, we got it, why classes were introduced and how to implement them, but where to implement them? Well, that's something we will discuss in the next article. Until then, happy coding!"

I hope this helps! 😁😁