DEV Community: Santan Sharma

Why Most Developers Get Bad AI Output (And How I Fixed It in VS Code)

Santan Sharma — Sun, 18 Jan 2026 00:12:47 +0000

Introduction

AI tools like ChatGPT and Claude are incredibly powerful — yet many developers still get disappointing results.

The problem isn’t the model.

It’s the prompt.

Unclear, rushed, and poorly structured prompts force the AI to guess, which leads to vague or incorrect output. After running into this problem repeatedly in my own workflow, I built PromptLint.

The Real Problem: Bad Prompts

Most prompts look like this:

There’s no context.
No constraints.
No clear expectations.

The AI has to fill in the gaps — and guessing is exactly why the output falls apart.

The Solution: PromptLint

PromptLint is a VS Code extension that refactors rough prompts into clear, structured, professional instructions.

It automatically introduces:

Clear roles
Explicit tasks
Defined requirements
Constraints and edge cases
Expected output format

The result is dramatically better AI responses — without switching models or tools.

How It Works

PromptLint integrates directly into VS Code:

Refactor selected text via right-click
Use the interactive Prompt Editor panel
Choose output options:
- Replace selection
- Open in a new tab
- Copy to clipboard
Works with OpenAI, Claude, and other compatible APIs

No workflow disruption.

No extra tools to learn.

Example

Before

write code for login

After

A fully structured prompt with a defined role, clear requirements, constraints, and output expectations — producing significantly better results.

Same AI. Better input. Better output.

Who Should Use PromptLint

PromptLint is built for:

Developers who use ChatGPT or Claude daily
Engineers writing technical or system-level prompts
Anyone tired of re-prompting AI to “fix” bad answers

If you use AI seriously, prompt quality is not optional.

Final Thoughts

AI isn’t replacing developers.

Developers who use AI effectively will replace those who don’t.

PromptLint exists to make that advantage automatic.

Understanding JavaScript Closures — The Secret Behind the Magic

Santan Sharma — Sat, 26 Jul 2025 21:58:48 +0000

What is a Closure?
A closure is when a function "remembers" the variables from the place where it was created — even after that place is gone.

In simpler terms:

A closure gives you access to an outer function’s scope from an inner function.

Why Should You Care?

Closures are everywhere in JavaScript:
They power callbacks and event handlers
They're behind the scenes in setTimeout, promises, and Angular zones
They help you encapsulate data (like in OOP)
They make function factories and private variables possible

Let’s Break It Down with a Real-Life Analogy
Imagine your local tea vendor (chaiwala) 🫖. You go there every day. You give your name and he remembers your order. Even after 3 days, he says:

“Bhaiya, adrak wali chai na? Theek hai.”_

How did he remember? Did you write it down? No.
He closed over your name and chai preference. That's how closures work. 😄

function makeTea(type) {
  return function () {
    console.log(`Here is your ${type} tea ☕`);
  };
}

const gingerTea = makeTea("Ginger");
const greenTea = makeTea("Green");

gingerTea();  // Here is your Ginger tea ☕
greenTea();   // Here is your Green tea ☕

🧠 What's happening here?

makeTea("Ginger") returns a new function
That function remembers type = "Ginger" even after makeTea has finished running
That memory is the closure

Real Use Case: Button Click in Angular or Vanilla JS
Let’s say you're making a dashboard where clicking a button shows different messages. You want each button to "remember" its own message.

function setupButton(id, message) {
  document.getElementById(id).addEventListener('click', function () {
    alert(message);
  });
}

setupButton("btn1", "Dashboard loaded!");
setupButton("btn2", "Settings loaded!");

Each button now has its own closure. Without closures, all buttons would alert the same last message.

🧙 Fun Fact: Closures Make Data Private

You can use closures to simulate private variables just like in OOP.

function Counter() {
  let count = 0;
  return {
    increment: function () {
      count++;
      return count;
    },
    decrement: function () {
      count--;
      return count;
    }
  };
}

const counter = Counter();
console.log(counter.increment()); // 1
console.log(counter.decrement()); // 0

count is not accessible directly — only via the functions. A neat encapsulation trick!

Where People Get Confused

Does a closure copy the variable?

No, it remembers the reference to the variable.
Can it keep many variables?

Yes, any variables in its scope at creation are remembered.
Will it cause memory leaks?

Not usually. Modern engines manage it well unless you accidentally create long-lived references (like in DOM events).

** > Closures may sound intimidating, but they are a natural part of JavaScript — especially functional programming and frontend frameworks like Angular.**

If you understand closures, you understand how JavaScript thinks.

So next time someone talks about JavaScript being weird, just smile and say:

“It’s not weird. It’s just... closed over logic.”

🙌 Final Thought
If you liked this explanation and want more on things like async/await, this keyword, or Angular Observables in plain English — let me know! We can break the toughest nuts together 🧠🔧

What is event bubbling and event capturing in JavaScript?

Santan Sharma — Sun, 12 Mar 2023 10:26:36 +0000

Imagine you're at a party with a group of friends. You're all hanging out in the living room, but suddenly someone yells "PIZZA IS HERE!" and everyone starts rushing towards the door.

Event capturing is like your friend who heard the pizza guy outside and ran out to meet him at the front gate. He's trying to intercept the pizza before it even gets to the door, so he can get the first slice.

Event bubbling, on the other hand, is like when the pizza finally makes it to the door, and everyone in the living room rushes towards the door to get their slice. It starts with the person closest to the door, and then moves outward to include everyone else in the room.

In JavaScript, events work in a similar way. When something happens, like a button is clicked, the event starts at the top-level "document" element and then moves down to the specific element that was clicked. That's event capturing. Then, once the event has been handled by the clicked element, it starts "bubbling" back up to the top-level document element, passing through all the parent elements along the way.

I hope that helps make event bubbling and event capturing a bit more fun and memorable!

If you enjoyed this post, please consider following me for more content like this!

what is an interface and abstract class in c# and its difference?

Santan Sharma — Wed, 08 Feb 2023 06:44:26 +0000

Think of an interface as a super strict boss who gives a list of tasks to his employees (classes) and expects them to complete all of those tasks perfectly.

The boss (interface) only knows what needs to be done, but he has no idea how it should be done. So, he hands off the job description (a list of methods, properties, and events) to his employees (classes) and says "Get it done, I don't care how, just make sure you follow the instructions."

And that's exactly what classes do! They take the job description from the boss (interface), and they come up with their own ways of completing the tasks. The boss is happy as long as all the tasks are completed, and the employees are happy because they get to use their own creativity to solve the problems.

Now, let's talk about abstract classes. Imagine an abstract class as a boss who is a bit more involved in the process. He gives his employees (classes) a list of tasks to do, but also provides some guidance on how to do those tasks. He says "I have a general idea of how these tasks should be done, but feel free to use your own creativity and come up with your own solution."

The key difference between an interface and an abstract class is that an interface only defines what needs to be done, whereas an abstract class provides both the what and the how.

So, to summarize, an interface is like a boss who delegates tasks to his employees, but has no idea how they should be done. And classes are like employees who complete the tasks according to their own methods.

In technological terms:-

INTERFACE
An interface in C# is a blueprint for a class. It defines a set of properties, methods, and events that must be implemented by any class that implements the interface. Interfaces provide a way to define a contract between a class and its clients. The clients can use this contract to interact with objects of the class without needing to know the underlying implementation.

An interface contains only the signatures of methods, properties, and events, but not the implementation. The implementation of the members of an interface is provided by the classes that implement the interface.

Interfaces are useful for creating loosely-coupled systems, as the implementation of an interface can be changed without affecting the code that depends on the interface. This makes it easier to maintain and evolve the system over time.

interface <interface_name> 
{
  // properties, methods, and events
}

A class implements an interface using the "implements" keyword:

class MyClass : <interface_name>
{
  // implementation of properties, methods, and events
}

ABSTRACT CLASS
An abstract class in C# is a class that cannot be instantiated on its own, but must be derived from by another class. An abstract class provides a base implementation of properties, methods, and events that can be shared by multiple derived classes.

An abstract class can contain both abstract and non-abstract members (methods and properties). Abstract members are declared with the "abstract" keyword and do not have a body. The derived classes must implement these abstract members, providing their own implementation.

Abstract classes are useful when you want to provide a common base implementation for multiple classes, but still allow for some variation in the implementation between the classes.

abstract class <abstract_class_name> 
{
  // abstract and non-abstract members
}

A class that derives from an abstract class uses the ":” operator:

class MyClass : <abstract_class_name>
{
  // implementation of abstract members and additional members
}

In conclusion, interfaces and abstract classes are important concepts in C# that provide a way to define contracts and create reusable code. Interfaces are used to define a set of methods and properties that a class must implement, while abstract classes provide a base implementation that can be shared by multiple derived classes.

Choosing between an interface and an abstract class depends on the specific needs of your project and the relationships between the classes involved. Interfaces are best used when you want to define a contract for multiple classes to implement, whereas abstract classes are best used when you want to provide a common base implementation that can be shared by multiple derived classes.

It's important to understand the differences between interfaces and abstract classes, as well as when and how to use them effectively, in order to write maintainable, scalable, and efficient code.

Thanks for you time.
have a good day.

Learn how to use map, filter, and reduce in JavaScript.

Santan Sharma — Wed, 24 Nov 2021 13:27:01 +0000

Higher Order Functions

A higher-order function is a function that takes one or more functions as arguments or returns a function as its result.
map, filter, and reduce are all higher order functions, which take a function as an argument.

Map, Filter, Reduce Fundamentals

Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

.map()

The map() method is used for creating a new array from an existing one, applying a function to each one of the elements of the first array.

Every element of the array is passed to the callback function and returns a new array with the same length.
When to use map: If we want to perform the same operation/transformation on each element of the array and get back a new array of the same length with the transformed values.

var numbers= [1,2,3,4,5];
var doubled  = numbers.map(n => n * 2);
doubled; // [2,4,6,8,10]

.filter()

The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

Every element of the array is passed to the callback function. On each iteration, if the callback returns true, then that element will be added to the new array, otherwise, it is not added to the new array.

var numbers = [1,2,3,4,5];
var greaterThan2 = numbers.filter(n => n > 2);
greaterThan2; // [3,4,5]

.reduce()

The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

While using reduce, we need to declare the initial value of accumulator(final result). On each iteration, inside the callback we perform some operation and that will be added to the accumulator.

var numbers = [1,2,3,4,5];
var initialVal = 0;
let result=numbers.reduce((accu, val) => val + accu , initialVal);
console.log(result) // 15

Real-world example

Let’s create a real-world practical example: Conducting an Interview.

1.map: Conducting a test for multiple candidates
2.filter: Selecting candidates who passed the test
3.reduce: Creating a team from the selected candidates

var users = [{"user": "👩🏻‍💻"},{"user": "👨🏾‍💻"},{"user": "💃"},{"user": "👨🏻‍🎓"},{"user": "🧑🏻‍🏫"},{"user": "🦸‍♂️"},{"user": "🧟‍♂️"}];

let resultDetails = users.map(user => {
    let mark = Math.random() * 100;
    user.mark = mark;
    return user
});
//for me resultDetails 
/*
0: {user: "👩🏻‍💻", mark: 76.03572182106969}
1: {user: "👨🏾‍💻", mark: 71.62190728557552}
2: {user: "💃", mark: 56.21776553271223}
3: {user: "👨🏻‍🎓", mark: 25.801390164601944}
4: {user: "🧑🏻‍🏫", mark: 85.74297532451267}
5: {user: "🦸‍♂️", mark: 67.11805101358996}
6: {user: "🧟‍♂️", mark: 18.253450044782184}
*/

var selectedCandidate = resultDetails.filter(user => {
    if(user.mark > 50){
        return user;
    }
});
/* selected candidate 
0: {user: "👩🏻‍💻", mark: 76.03572182106969}
1: {user: "👨🏾‍💻", mark: 71.62190728557552}
2: {user: "💃", mark: 56.21776553271223}
3: {user: "🧑🏻‍🏫", mark: 85.74297532451267}
4: {user: "🦸‍♂️", mark: 67.11805101358996}
*/

// Create Team 

let TeamMembers = selectedCandidate.reduce((teamMembers,  user) => {
     teamMembers.push(user);
    return teamMembers;
}, []);

KEEP IT SHORT AND SWEET!

Promise & Async await in JavaScript.

Santan Sharma — Wed, 29 Sep 2021 20:30:07 +0000

Promise:
Imagine that you’re a top singer, and fans ask day and night for your upcoming song.

To get some relief, you promise to send it to them when it’s published. You give your fans a list. They can fill in their email addresses, so that when the song becomes available, all subscribed parties instantly receive it. And even if something goes very wrong, say, a fire in the studio, so that you can’t publish the song, they will still be notified.

This is a real-life analogy for things we often have in programming:

“producing code” that does something and takes time. For instance, some code that loads the data over a network. That’s a “singer”.
“consuming code” that wants the result of the “producing code” once it’s ready. Many functions may need that result. These are the “fans”.
promise is a special JavaScript object that links the “producing code” and the “consuming code” together. In terms of our analogy: this is the “subscription list”. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed code when it’s ready.

Promises are a new feature of ES6. It’s a method to write asynchronous code. They are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

How It Works.

There are 3 states of the Promise object:

1.Pending: Initial State, before the Promise succeeds or fails
2.Resolved: Completed Promise
3.Rejected: Failed Promise

Creating and Using A Promise Step by Step

Firstly, we use a constructor to create a Promise object:

const myPromise = new Promise();

It takes two parameters, one for success (resolve) and one for fail (reject):

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

Finally, there will be a condition. If the condition is met, the Promise will be resolved, otherwise it will be rejected:

const myPromise = new Promise((resolve, reject) => {  
    let condition;  

    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

So we have created our first Promise. Now let's use it.

then( ) for resolved Promises:

myPromise.then();

The then( ) method is called after the Promise is resolved. Then we can decide what to do with the resolved Promise.

For example, let’s log the message to the console that we got from the Promise:

myPromise.then((message) => {  
    console.log(message);
});

catch( ) for rejected Promises:
However, the then( ) method is only for resolved Promises. What if the Promise fails? Then, we need to use the catch( ) method.

Likewise we attach the then( ) method. We can also directly attach the catch( ) method right after then( ):

example,

myPromise.then((message) => { 
    console.log(message);
}).catch((message) => { 
    console.log(message);
});

Async functions - making promises friendly

The async functions and the await keyword, added in ECMAScript 2017.
These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards.

The Async Keyword

First of all we have the async keyword, which you put in front of a function declaration to turn it into an async function. An async function is a function that knows how to expect the possibility of the await keyword being used to invoke asynchronous code.

They allow you to write promise-based code as if it were synchronous, but without blocking the main thread. They make your asynchronous code less "clever" and more readable.

Async functions work like this:

async function myFirstAsyncFunction() {
  try {
    const fulfilledValue = await promise;
  }
  catch (rejectedValue) {
    // …
  }
}

If you use the async keyword before a function definition, you can then use await within the function. When you await a promise, the function is paused in a non-blocking way until the promise settles. If the promise fulfills, you get the value back. If the promise rejects, the rejected value is thrown.

Example: Logging a fetch
Say we wanted to fetch a URL and log the response as text. Here's how it looks using promises:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

And here's the same thing using async functions:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

It's the same number of lines, but all the callbacks are gone. This makes it way easier to read, especially for those less familiar with promises.

Adding error handling

And if you want to add error handling, you've got a couple of options.

You can use a synchronous try...catch structure with async/await. This example expands on the first version of the code we showed above:

async function myFetch() {
  try {
    let response = await fetch('coffee.jpg');

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let myBlob = await response.blob();
    let objectURL = URL.createObjectURL(myBlob);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);

  } catch(e) {
    console.log(e);
  }
}

myFetch();

The catch() {} block is passed an error object, which we've called e; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.

If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a .catch() block onto the end of the .then() call, like this:

async function myFetch() {
  let response = await fetch('coffee.jpg');
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.blob();

}

myFetch().then((blob) => {
  let objectURL = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch((e) =>
  console.log(e)
);

This is because the .catch() block will catch errors occurring in both the async function call and the promise chain. If you used the try/catch block here, you might still get unhandled errors in the myFetch() function when it's called.

Reference :- developer.mozilla.org

What is Throttling and Debouncing in JavaScript and how it works?

Santan Sharma — Sat, 04 Sep 2021 09:54:51 +0000

Event Listeners help us in binding functions which are called when that event is emitted, like scrolling or resizing.

But what if the event is called multiple times in a very short span of time? If the function called by the listener is intensive, it can severely impact performance.

Debouncing and Throttling are really useful under such scenarios.

Throttling

Imagine yourself as a 7-year-old toddler who loves to eat chocolate cake! Today your mom has made one, but it's not for you, it's for the guests! You, being spunky, keep on asking her for the cake. Finally, she gives you the cake. But, you keep on asking her for more. Annoyed, she agrees to give you more cake with a condition that you can have the cake only after an hour. Still, you keep on asking her for the cake, but now she ignores you. Finally, after an interval of one hour, you get more cake. If you ask for more, you will get it only after an hour, no matter how many times you ask her.

This is what throttling is!

Throttling is a technique in which, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval.

For instance, when a user clicks on a button, a helloWorld function is executed which prints Hello, world on the console. Now, when throttling is applied with 1000 milliseconds to this helloWorld function, no matter how many times the user clicks on the button, Hello, world will be printed only once in 1000 milliseconds. Throttling ensures that the function executes at a regular interval.

$("body").on('scroll', _.throttle(function() {
  // Do expensive things
}, 100));

Debouncing

Debouncing is delaying a certain execution to accomodate all changes before executing the final function.

It’s very similar to throttle except the time delay is refreshed every time the event is triggered.

Suppose the time delay provided is 500 milliseconds, and the event is triggered for 3 seconds, the function will only run once after 3.5 seconds.

Again the important part here is that you’re not guaranteed that the function will trigger at least once in the given delay time instead the delay time gets updated every time the function is called.

This is particularly useful in cases where the function needs to be fired only once for the final output and previous calls can be ignored in case of continuous triggers.

One example would be search input triggers. If you’re binding to the change event of the input to update the results, it is usually not preferred to send API calls for every letter that is typed. If we are rather waiting for 2 seconds before ensuring that there are no further changes from the user before sending the final request, it will significantly reduce the amount of API calls made.

$(window).on('resize', _.debounce(function() {
  // Do expensive things
}, 100));

Hope this helps! Throttle up!

Enjoyed this article?

What is Hoisting and how it works in JavaScript?

Santan Sharma — Tue, 31 Aug 2021 18:30:57 +0000

Hoisting is JavaScript concept which make JavaScript different from language Java.

In Java every variable created in code have block level scope. Means if we have create any variable that will have its visibility limited into that block in which it was declared.

So if we use variable above from the declaration it will gives error.

But in the JavaScript, the variables can be used before declared, this kinds of mechanism is called Hoisted. It’s a default behavior of JavaScript.

Hoisting is JS’s default behavior of defining all the declarations at the top of the scope before code execution. One of the benefits of hoisting is that it enables us to call functions before they appear in the code. JavaScript only hoists declarations, not initializations. You can find the official documentation Here.

Understanding what exactly is JavaScript Hoisting
Variable declaration and initialization occur in the following sequence:

Declaration –> Initialization/Assignment –> Usage

// Variable lifecycle
let x;                 // Declaration
x = “hoisting”;        // Assignment
console.log(x);        // Usage

Most importantly, you should always remember that the JavaScript declares the variable first in the background. Then, initializing them. Thus, it is also good to know that the processing of variable declarations takes place before the execution of any code. However, until the execution of code assigning them takes place the undeclared variables do not exist in JavaScript.
Therefore, when the assignment is executed, a value assigned to an undeclared variable implicitly creates it as a global variable. This specifies that all undeclared variables are global variables.

// hoisting
function Hoisting(){
  x = 100;
  let y = 200;
}
Hoisting();
console.log(x); // 100
console.log(y); // Reference Error: y is not defined

In the above code sample, there is a function called Hoisting(). Thus, we have a variable which we didn’t declare using let/var/const and a let variable y. The assigning of the undeclared variable to the global scope is done by JavaScript. But for variable y, we get a ReferenceError.

Hosting in Function scoped variable

In ES5, we consider the var keyword. Hoisting with var is somewhat different in comparison to let/const. The example with var to see how hoisting works:

var num (global)
console.log(car);    // undefined
var car = ‘Lamborgini’;

In the above code, when logging the variable name which was declared and assigned later than using it, the compiler gives an “undefined” result. This was not expected as we should have got ReferenceError as trying to use the car variable even before declaring it.
But the interpreter sees this differently, which is as follows:

//how interpreter sees the above code
var car;
console.log(car); // undefined
car = ‘Lamborgini’;

The let and const Keywords.

Variables and constants declared with let or const are not hoisted!
JavaScript Initializations are Not Hoisted
JavaScript only hoists declarations, not initializations.

var a = “volkswagon”; // Initialize a
var b = “Lamborgini”; // Initialize b
elem = document.getElementById("car"); // Find an element
elem.innerHTML = a + " " + b;       // Display a and b as volkswagon and lamborgini

In the above code, since the declaring of variables takes place before the results. As a result, the execution of the code prints the result of variable a and b.

var a = “i10”;  // Initialize a
elem = document.getElementById("car");      // Find an element
elem.innerHTML = "a is " + a + “ and b is " + b;  // Display a and b
var b = “Lamborgini”;  // Initialize b

Result:
a is i10 and b is undefined
Hence, this is because only hoisting of the declaration (var b) takes place, not the initialization (= “Lamborgini”) to the top. Because of hoisting, b has been declared before it is used, but because initializations are not hoisted, the value of b is undefined.

Hoisting classes

JavaScript classes can be classified into two classes:

*Class declarations
*Class expressions

In Class declarations
They are much like function counterparts. Therefore, this means no hoisting of JavaScript class declarations. However, they remain uninitialized until evaluation. Thus, this effectively means that you have to declare a class before you can use it.

var car1 = new car();
car1.height = 5;
car1.weight = 500;
console.log(car1);   // Output: ReferenceError: car is not defined
class car{
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}

In the above code, the reference error occurs. This is because, after initialization of the car1 variable, the defining of car class is takes place. To solve this error, we just need to define the car class before car1 initialization. This is hosting in the class declaration.

class car{
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}
var car1 = new car();
car1.height = 5;
car1.weight = 500;
console.log(car1);

Therefore, this gives the proper result.
In Class expressions
They are much like their function counterparts. Therefore, this means no hoisting of class expression.
Therefore, below is an example with the un-named or anonymous variant of the class expression:

var rect = new shapes();
rect.height = 10;
rect.width = 20;
console.log(rect); // Output: TypeError: shapes is not a constructor
var shapes = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
Thus, the correct way to do it is like this:
var shapes = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
var rect = new shapes();
rect.height = 10;
rect.width = 20;
console.log(rect);

Summary

To many developers, Hoisting is an unknown behavior of JavaScript. Many developers overlook it’s importance as well. Moreover, if a developer doesn’t understand hoisting, programs may contain bugs (errors). In order to avoid bugs, always declare all variables at the beginning of every scope. Thus, this is how JavaScript interprets the code, it is always a good rule.