00. Introduction to Javascript

Notes on Javascript

JavaScript is a scripting language you can use to make web pages interactive. It is one of the core technologies of the web, along with HTML and CSS, and is supported by all modern browsers.

Why Learn JavaScript?

JavaScript is among the most powerful and flexible programming languages of the web. It powers the dynamic behavior on most websites, including this one.

JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.

Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

JavaScript and the ECMAScript specification

JavaScript is standardized at Ecma International — the European association for standardizing information and communication systems (ECMA was formerly an acronym for the European Computer Manufacturers Association) to deliver a standardized, international programming language based on JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard.

ECMAScript 6 It is the sixth edition of the ECMA-262 standard, and features major changes and improvements to the ECMAScript specification.

This edition of ECMAScript changed its name from ES6 to ES2015 because in 2015 Ecma International decided to switch to annual releases of ECMAScript. Accordingly, Ecma International also started to name new editions of the ECMAScript specification based on the year they are released. In short, ES6 and ES2015 are two different names for the same thing.

Babel A transpiler that can convert ES6 code to ES5 code.

Edge and Internet Explorer do not fully support features from the ES6 specification.

Reference

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

01. Basics of Javascript

We think we are creating the system for our own purposes. We believe we are making it in our own image... But the computer is not really like us. It is a projection of a very slim part of ourselves: that portion devoted to logic, order, rule, and clarity. - Ellen Ullman, Close to the Machine: Technophilia and its Discontents

What is JavaScript?

one thread == one call stack == one thing at a time

JavaScript was introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser. The language has since been adopted by all other major graphical web browsers. It has made modern web applications possible—applications with which you can interact directly without doing a page reload for every action. JavaScript is also used in more traditional websites to provide various forms of interactivity and cleverness.

After its adoption outside of Netscape, a standard document was written to describe the way the JavaScript language should work so that the various pieces of software that claimed to support JavaScript were actually talking about the same language. This is called the ECMAScript standard, after the Ecma International organization that did the standardization. In practice, the terms ECMAScript and JavaScript can be used interchangeably—they are two names for the same language.

A JavaScript engine

A program or interpreter that understands and executes JavaScript code.

Synonyms: JavaScript interpreter, JavaScript implementation

JavaScript engines are commonly found in web browsers, including V8 in Chrome, SpiderMonkey in Firefox, and Chakra in Edge. Each engine is like a language module for its application, allowing it to support a certain subset of the JavaScript language.

A JavaScript engine to a browser is like language comprehension to a person. If we re-visit our example of the actions “walk”, “run”, “jump”, a JavaScript engine is the part of an “entity” that actually understands what these actions mean.

A JavaScript runtime

The environment in which the JavaScript code runs and is interpreted by a JavaScript engine.The runtime provides the host objects that JavaScript can operate on and work with.

Synonyms: Host environment

Have you ever worked with the window or document host objects? The window and document objects are not actually a part of the core JavaScript language. They are Web APIs, objects provided by a browser acting as JavaScript’s host environment. For the server side, the JavaScript runtime is Node.js. Server-related host objects such as the file system, processes, and requests are provided in Node.js.

An interesting point: different JavaScript runtimes can share the same JavaScript engine. V8, for example, is the JavaScript engine used in both Google Chrome and Node.js — two very different environments.

Comments

Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.

There are two ways to write comments in JavaScript:

// Single line comment

/* for multi line comment */

Comments are mostly used to document the code for easy understading.

Reference:

• https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/

• https://github.com/lydiahallie/javascript-questions

• https://eloquentjavascript.net/00_intro.html

02. Values, Types, and Operators

We will look at four types of JavaScript values in this chapter: numbers, strings, Booleans, and undefined values.

Below the surface of the machine, the program moves. Without effort, it expands and contracts. In great harmony, electrons scatter and regroup. The forms on the monitor are but ripples on the water. The essence stays invisibly below. - Master Yuan-Ma, The Book of Programming

Inside the computer’s world, there is only data. You can read data, modify data, create new data. All this data is stored as long sequences of bits and is thus fundamentally same.

Bits are any kind of two-valued things, usually described as zeros and ones.

Values

Chunks of bits are called values. Every value has a type that determines its role. Some values are numbers, some values are pieces of text, some values are functions, and so on.

To create a value, you must merely invoke its name.

Value Types

Numbers

Values of the number type are numeric values.

Ex: 13

Use that in a program, and it will cause the bit pattern for the number 13 to come into existence inside the computer’s memory.

JavaScript uses a fixed number of bits, 64 of them, to store a single number value.

Fractional numbers are written by using a dot.

9.81

For very big or very small numbers, you may also use scientific notation by adding an e (for exponent), followed by the exponent of the number.

2.998e8

That is 2.998 × 108 = 299,800,000.

Calculations with whole numbers (also called integers) smaller than the aforementioned 9 quadrillion are guaranteed to always be precise. Unfortunately, calculations with fractional numbers are generally not. Just as π (pi) cannot be precisely expressed by a finite number of decimal digits, many numbers lose some precision when only 64 bits are available to store them

Arithmetic

The main thing to do with numbers is arithmetic. Arithmetic operations such as addition or multiplication take two number values and produce a new number from them.

Ex:

100 + 4 * 11;
(100 + 4) * 11;

The + and * symbols are called operators. When operators appear together without parentheses, the order in which they are applied is determined by the precedence of the operators.

Special numbers

• Infinity

The first two are Infinity and -Infinity, which represent the positive and negative infinities.

• NaN

NaN stands for “not a number”, even though it is a value of the number type.

When you try to calculate 0 / 0 (zero divided by zero), Infinity - Infinity, or any number of other numeric operations you will be NaN.

Strings

Strings are used to represent text. They are written by enclosing their content in quotes.

`Down on the sea`;
("Lie on the ocean");
("Float on the ocean");

You can use single quotes, double quotes, or backticks to mark strings, as long as the quotes at the start and the end of the string match.

Newlines (the characters you get when you press enter) can be included without escaping only when the string is quoted with backticks (`).

whenever a backslash () is found inside quoted text, it indicates that the character after it has a special meaning. This is called escaping the character.

When an n character occurs after a backslash, it is interpreted as a newline. Similarly, a t after a backslash means a tab character.

"This is the first line\nAnd this is the second";

Many emoji take up two “character positions” in JavaScript strings.

Strings cannot be divided, multiplied, or subtracted, but the + operator can be used on them to concatenate two strings.

Ex:

The following line will produce the string "concatenate"

"con" + "cat" + "e" + "nate";

Backtick-quoted strings, usually called template literals, can do a few more tricks.

`half of 100 is ${100 / 2}`;

When you write something inside $ in a template literal, its result will be computed, converted to a string, and included at that position. The example produces “half of 100 is 50”.

Empty values

There are two special values, written null and undefined, that are used to denote the absence of a meaningful value.

Short-circuiting of logical operators

The logical operators && and || handle values of different types in a peculiar way. They will convert the value on their left side to Boolean type in order to decide what to do, but depending on the operator and the result of that conversion, they will return either the original left-hand value or the right-hand value.

Type coercion

true and false are Boolean values. To coerce a value into a boolean means to take any value that is NOT true or false and try to convert it to either of those. In JavaScript, you can easily check what the outcome of any value is when coerced into a Boolean by typing: Boolean(value).

Boolean("Hello");
// true
Boolean("");
// false
Boolean([]);
// true
Boolean({});
// true
Boolean(undefined);
// false
Boolean(null);
// false
Boolean(42);
// true
Boolean(0);
// false

You can see that some values evaluate to true and others to false. These values are usually called truthy and falsy values.

|| operator:

will return the value to its left when that can be converted to true and will return the value on its right otherwise.

console.log(null || "user");
// user
console.log("Agnes" || "user");
// Agnes
console.log(false || false || true);
// true

Practical application:

let userIsLoggedIn = true;
function greet() {
  return "Welcome user!";
}
userIsLoggedIn && greet();
// "Welcome user!"
 
if (userIsLoggedIn) {
  greet();
}

In React application:

function App({ name }) {
  return <div>{name && <h1>Hello ${name}</h1>}</div>;
}

Examples of expressions that can be converted to false are:

• null;
• NaN;
• 0;
• empty string ("" or '' or ``);
• undefined.

while all the other values count as true.

Logical AND (&&) operator:

In a chain of &&s, each value will be evaluated from left to right. If any of these values happen to be falsy, that value will be returned and the chain will not continue.

console.log("user" && "");
// ""
console.log("Agnes" && "user");
// user
console.log("Agnes" && true && "user");
// user
console.log("Agnes" && undefined && "user");
// undefined
console.log("Agnes" && false && "user");
// false

Null safety operator ( ? ):

?. is a null safety operator, returns undefined if property is non-existent.

const univ = { college: { stream: 'BSc' }};
result = univ?.college?.stream?.year
## Data types
 
Javascript provides eight different data types which are
 
1. `undefined`
2. `null`
3. `boolean`
4. `string`
5. `symbol`
6. `bigint`
7. `number`
 
We tell JavaScript to create or declare a variable by putting the keyword var in front of it, like so:
 
### Creating variables
 
```js
var myVariable;

Assigning values

you can store a value in a variable with the assignment operator (=).

myVariable = 5;

Initializing varialbes with value

var myVariable = 5;

Understanding Uninitialized Variables

When variables are declared, they have an initial value of undefined. If you do a mathematical operation on an undefined variable your result will be NaN which means "Not a Number". If you concatenate a string with an undefined variable, you will get a literal string of undefined.

Write variable names in JavaScript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized.

const and let are block scoped and var is global scoped.

when we create a variable using var we see it in global context and for let and scope it is not

closes function along with lexical scope

Summary

We looked at four types of JavaScript values in this chapter: numbers, strings, Booleans, and undefined values.

Such values are created by typing in their name (true, null) or value (13, "abc"). You can combine and transform values with operators. We saw binary operators for arithmetic (+, -, *, /, and %), string concatenation (+), comparison (==, !=, ===, !==, <, >, <=, >=), and logic (&&, ||), as well as several unary operators (- to negate a number, ! to negate logically, and typeof to find a value’s type) and a ternary operator (?:) to pick one of two values based on a third value.

Reference:

• https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/

• https://github.com/lydiahallie/javascript-questions

• https://eloquentjavascript.net/01_values.html

• https://medium.com/@nicolasmarcora/mastering-javascripts-and-logical-operators-fd619b905c8f

03. Objects and arrays

Understanding objects and arrays in javascript

Objects

In JavaScript, almost "everything" is an object.

• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects

const rememberMe = new Boolean(true);
const age = new Number(10);
const name = new String("Yajana");
const marks = new Array(1,2,3,4,5,6);
 
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue",
};
 

It is a common practice to declare objects with the const keyword.

JavaScript objects are containers for named values, called properties and methods.

Properties

The named values, in JavaScript objects, are called properties.

Almost all JavaScript values have properties. The exceptions are null and undefined.

Accessing properties

1. Using dot notation (.)

When using a dot, the word after the dot is the literal name of the property.

2. Array like notation ([])

When using square brackets, the expression between the brackets is evaluated to get the property name.

 
const values = {
  1: "Hello world",
  "John Doe": "Present",
  city: "Hubli",
};
 
console.log(values[2 - 1]);
console.log(values["John Doe"]);
console.log(values.city);

Methods

Methods are actions that can be performed on objects.

Object properties can be both primitive values, other objects, and functions.

An object method is an object property containing a function definition.

let user = {
  name: "John",
  age: 30
};
 
user.sayHi = function() {
  alert("Hello!");
};
 
user.sayHi(); // Hello!
 
// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

Arrays

JavaScript provides a data type specifically for storing sequences of values. It is called an array and is written as a list of values between square brackets, separated by commas.

let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[2]);
// → 5
console.log(listOfNumbers.__proto__);
// → 2
console.log(listOfNumbers[2 - 1]);
// → 3

Array Objects

function bookInfo( name, author, pubDate) { 
  
    this.name = name; 
    this.author = author; 
    this.date = pubDate; 
} 

var book = new Array(); 
book[0] = new bookInfo("Jane Eyre", "C. Bronte", "1847"); 
book[1] = new bookInfo("The Stranger", "A. Camus", "1942"); 
book[2] = new bookInfo("Oliver Twist", "C. Dickens", "1846"); 
book[3] = new bookInfo("Rebecca", "D. DuMaurier", "1938"); 
book[4] = new bookInfo("Stranger in a Strange Land", "R. Heinlein", "1961"); 

Mutability

Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values.

You can make a variable name point to a new value, but the previous value is still held in memory.

A mutable object is an object whose state can be modified after it is created.

Immutables are the objects whose state cannot be changed once the object is created.

Strings and Numbers are Immutable. Lets understand this with an example:

var immutableString = "Hello";
 
// In the above code, a new object with string value is created.
 
immutableString = immutableString + "World";
 
// We are now appending "World" to the existing value.

On appending the "immutableString" with a string value, following events occur:

1. Existing value of "immutableString" is retrieved
2. "World" is appended to the existing value of "immutableString"
3. The resultant value is then allocated to a new block of memory
4. "immutableString" object now points to the newly created memory space
5. Previously created memory space is now available for garbage collection.

const score = { visitors: 0, home: 0 };
// This is okay
score.visitors = 1;
// This isn't allowed
score = { visitors: 1, home: 1 };

Prototype Property

JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.

An object's prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.

All JavaScript objects inherit properties and methods from a prototype.

Date objects inherit from Date.prototype Array objects inherit from Array.prototype Person objects inherit from Person.prototype The Object.prototype is on the top of the prototype inheritance chain:

Date objects, Array objects, and Person objects inherit from Object.prototype.

The JavaScript prototype property allows you to add new properties to object constructors:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";
 
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
 
myFather.nationality;
// 'English'

Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects.

Spread operators

Spread Operator (...) takes in an iterable (e.g an array) and expands it into individual elements.

const numbers = [1,2];
 
function sum(a, b){
  return a + b;
}
 
console.log(sum(...numbers))
// -> 3

Rest Operator

It can be useful for a function to accept any number of arguments. For example, Math.max computes the maximum of all the arguments it is given.

To write such a function, you put three dots before the function’s last parameter, like this:

function sum(...numbers) {
  let result = 0;
  for (let number of numbers) {
    result = result + number;
  }
  return result;
}
console.log(sum(4, 1, 9, -2));
// → 12

When such a function is called, the rest parameter is bound to an array containing all further arguments. If there are other parameters before it, their values aren’t part of that array. When, as in max, it is the only parameter, it will hold all arguments.

Quiz

Everything in JavaScript is either a...

• A: primitive or object
• B: function or object
• C: trick question! only objects
• D: number or object

What's the output?

let a = 3;
let b = new Number(3);
let c = 3;
 
console.log(a == b);
console.log(a === b);
console.log(b === c);

• A: true false true
• B: false false true
• C: true false false
• D: false true true

What happens when we do this?

function bark() {
  console.log("Woof!");
}
 
bark.animal = "dog";

• A: Nothing, this is totally fine!
• B: SyntaxError. You cannot add properties to a function this way.
• C: "Woof" gets logged.
• D: ReferenceError

Which one is true?

const bird = {
  size: "small",
};
 
const mouse = {
  name: "Mickey",
  small: true,
};

• A: mouse.bird.size is not valid
• B: mouse[bird.size] is not valid
• C: mouse[bird["size"]] is not valid
• D: All of them are valid

Which of the following will modify the person object?

const person = { name: "Lydia Hallie" };
 
Object.seal(person);

• A: person.name = "Evan Bacon"
• B: person.age = 21
• C: delete person.name
• D: Object.assign(person, { age: 21 })

Which of the following will modify the person object?

const person = {
  name: "Lydia Hallie",
  address: {
    street: "100 Main St",
  },
};
 
Object.freeze(person);

• A: person.name = "Evan Bacon"
• B: delete person.address
• C: person.address.street = "101 Main St"
• D: person.pet = { name: "Mara" }

What's the output?

const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
 
console.log(y);

• A: [[1, 2, 3, 4, 5]]
• B: [1, 2, 3, 4, 5]
• C: 1
• D: [1]

Answer

Answer: C

We can unpack values from arrays or properties from objects through destructuring. For example:

[a, b] = [1, 2];

The value of a is now 1, and the value of b is now 2. What we actually did in the question, is:

[y] = [1, 2, 3, 4, 5];

This means that the value of y is equal to the first value in the array, which is the number 1. When we log y, 1 is returned.

What's the output?

const a = {};
const b = { key: "b" };
const c = { key: "c" };
 
a[b] = 123;
a[c] = 456;
 
console.log(a[b]);

• A: 123
• B: 456
• C: undefined
• D: ReferenceError

What's the output?

let c = { greeting: "Hey!" };
let d;
 
d = c;
c.greeting = "Hello";
console.log(d.greeting);

• A: Hello
• B: Hey!
• C: undefined
• D: ReferenceError
• E: TypeError

Answer

Answer: A

In JavaScript, all objects interact by reference when setting them equal to each other.

First, variable c holds a value to an object. Later, we assign d with the same reference that c has to the object.

When you change one object, you change all of them.

All object have prototypes.

• A: true
• B: false

What's the output?

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
 
const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};
 
console.log(member.getFullName());

• A: TypeError
• B: SyntaxError
• C: Lydia Hallie
• D: undefined undefined

Person.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};

What's the output?

String.prototype.giveLydiaPizza = () => {
  return "Just give Lydia pizza already!";
};
 
const name = "Lydia";
 
name.giveLydiaPizza();

• A: "Just give Lydia pizza already!"
• B: TypeError: not a function
• C: SyntaxError
• D: undefined

What's the output?

const user = { name: "Lydia", age: 21 };
const admin = { admin: true, ...user };
 
console.log(admin);

• A: { admin: true, user: { name: "Lydia", age: 21 } }
• B: { admin: true, name: "Lydia", age: 21 }
• C: { admin: true, user: ["Lydia", 21] }
• D: { admin: true }

What's the output?

function getItems(fruitList, ...args, favoriteFruit) {
  return [...fruitList, ...args, favoriteFruit]
}
 
getItems(["banana", "apple"], "pear", "orange")

• A: ["banana", "apple", "pear", "orange"]
• B: [["banana", "apple"], "pear", "orange"]
• C: ["banana", "apple", ["pear"], "orange"]
• D: SyntaxError

function getItems(fruitList, favoriteFruit, ...args) {
  return [...fruitList, ...args, favoriteFruit];
}
 
getItems(["banana", "apple"], "pear", "orange");

References:

• https://eloquentjavascript.net/04_data.html

• https://developer.mozilla.org/en-US/docs/Glossary/Mutable

• https://github.com/lydiahallie/javascript-questions/blob/master/README.md

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

• http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

04. Functions

How functions are used

Mapping

Functions map input arguments to return values, meaning that for each set of inputs, there exists an output. A function will take the inputs and return the corresponding output. procedures i/o˝

pure functions has no side effects

given same input produces same output

Not pure functions

Dependent on time random numbers

What is Functional Programming

Higher order functions

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

Higher-order functions allow us to abstract over actions, not just values.

function greaterThan(n) {
  return (m) => m > n;
}
 
// detailed version
function lesserThan(n) {
  return function (m) {
    return m < n;
  };
}
let greaterThan10 = greaterThan(10);
let lesserThan10 = lesserThan(10);
 
console.log(greaterThan10(11), lesserThan10(11));
// true false
console.log(greaterThan10(9), lesserThan10(9));
// false true

Higher order components (HOC's)

//withdLoading.js
import React from "react";
function WithLoading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return <Component {...props} />;
    return <p>Hold on, fetching data might take some time.</p>;
  };
}
export default WithLoading;
 
const Welcome = WithLoading(<h1>Hello world</h1>);

References:

• https://www.smashingmagazine.com/2020/06/higher-order-components-react/

05. Handling events

You have power over your mind—not outside events. Realize this, and you will find strength. - Marcus Aurelius, Meditations

Some programs work with direct user input, such as mouse and keyboard actions. That kind of input isn’t available as a well-organized data structure—it comes in piece by piece, in real time, and the program is expected to respond to it as it happens.

Event Loop

Debouncing in Javascript

Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which a function gets invoked.

<html>
  <body>
    <button id="debounce">Debounce</button>
    <script>
      var button = document.getElementById("debounce");
      const debounce = (func, delay) => {
        let debounceTimer;
        return function () {
          const context = this;
          const args = arguments;
          clearTimeout(debounceTimer);
          debounceTimer = setTimeout(() => func.apply(context, args), delay);
        };
      };
      button.addEventListener(
        "click",
        debounce(function () {
          alert(
            "Hello\nNo matter how many times you" +
              "click the debounce button, I get " +
              "executed once every 3 seconds!!"
          );
        }, 3000)
      );
    </script>
  </body>
</html>

Throttle

In throttle we don’t allow to our function to execute more than once every X milliseconds.

function throttle(callback, interval) {
  let enableCall = true;
 
  return (...args) => {
    if (!enableCall) return;
 
    enableCall = false;
    callback.apply(this, args);
    setTimeout(() => (enableCall = true), interval);
  };
}
 
function helloFromThrottle() {
  console.log("Jesus is saying hi!!!");
}
 
const foo = throttle(helloFromThrottle, 5000);

References:

• https://css-tricks.com/debouncing-throttling-explained-examples/
• https://dev.to/iyashsoni/javascript-debounce-vs-throttle-392i
• https://codepen.io/akshaymarch7/pen/pXgxGo?editors=0011