Forem: Shivaansh Agarwal

Use of package-lock.json

Shivaansh Agarwal — Sat, 07 Jan 2023 17:40:03 +0000

Let's create a new directory and initialize it with npm init -y.
1. This will create a new package.json file.
Let’s say we’re in 2021 and we want to install moment.js in our project.
That time we would’ve done, npm i moment, but to replicate the same let’s install the latest version of this package at that time which was 2.29.0 (Currently latest is 2.29.4). So the command for that will be npm i moment@2.29.0
1. This will add a new key for moment inside package.json’s dependencies key, with the value as the version number ^2.29.0. It’ll also create package-lock.json and node_modules folder. Inside node_modules folder we can see that the moment library has been added with the same version number, i.e. 2.29.0 & same is in the package-lock.json
Push code to Github along with both package.json & package-lock.json (or simply delete the node_modules folder)
Take a clone of this repo (or simply delete the node_modules folder), and in that run npm i.
1. Now since the package-lock file is present it’ll simply install the version of moment that is mentioned in that file which is 2.29.0 inside node_modules. So both package.json & package-lock.json will be on the same package as in the screenshot shown above.
2. This also means that the developer who commited the code, and someone who clones the project let’s say today, when the latest version of moment is 2.29.4, will also install the version 2.29.4 only because of package-lock.json
If we had NOT commited package-lock.json file, but only package.json, when npm i was done, it would have found ^2.29.0 in package.json, but then it would’ve went to npm repository to find if there’s any new minor or patch release after 2.29.0, and since current latest version is 2.29.4, in node_modules this latest version will be installed and also in the newly created package-lock.json file, this version will be present.

MakeMyTrip Frontend Machine Coding Interview

Shivaansh Agarwal — Sun, 03 Jul 2022 09:40:42 +0000

Overview

Problem Statement
Solution
- Noting down the requirements
- Describing the components to be used
- Implementation
  1. Start by creating the UI
  2. Describe the config to be passed
  3. Using config create the state for each box.
  4. Create a working UI by linking all 3 previous steps.
  5. Add logic for color change on button click.
  6. Add logic to store clickOrder in which buttons were clicked.
  7. Finally add, logic to reset the color of each box to white, once all boxes have been clicked and their color is green.
Learnings

1. Problem Statement

Create a UI and functionality that looks exactly like shown in this Link.

2. Solution

i. Noting Down the Requirements:

The UI should look 'exactly' like shown in the image above with 7 boxes shaped in C shape.
On click of the box, its color changes to green.
When all boxes are green, they should again go back to previous color white, one by one, by 1 second delay, in the same order as they were first clicked.

ii. Describing the components to be used

For this I can break the UI into 3 components:

BoxesContainer
BoxesRow
Box

iii. Describing the implementation details

STEP-1

First I'll start by creating the UI. Create different files for all 3 components described above and write CSS for those.

STEP-2

In order to create the UI, I'll pass a config in the following format to the BoxesContainer.
```javascript

const config = [
  [true, true, true],
  [true, false, false],
  [true, true, true],
];

The config is an array of array, with each nested array depicting the row, and each boolean value depicting whether the box is present at that location or not. 

  
  
  STEP-3


Based on this config, I'll create a global state, which contains state for each box, which has an id and isClicked attribute. The state will look like this.

    ```javascript

const state = [
  [
    { id: "1", isClicked: false },
    { id: "2", isClicked: false },
    { id: "3", isClicked: false },
  ],
  [{ id: "4", isClicked: false }, null, null],
  [
    { id: "5", isClicked: false },
    { id: "6", isClicked: false },
    { id: "7", isClicked: false },
  ],
];

STEP-4

At this stage our code looks like as shown in the document below:

We've created 3 components BoxesContainer, BoxesRow, Box, and also written the CSS for that. And with the config we got as the input, we created the boxesState.

CodeSandbox Link 1

STEP-5

Now since our UI is ready, let's add the logic, of color change on box click.

CodeSandbox Link 2

STEP-6

We also need to maintain the clickOrder of different boxes. This will be used when we need to reset the box color one by one, when when all boxes color has been changed to green.

CodeSandbox Link 3

STEP-7

Now finally, we need to implement the logic, where once all the boxes are green, it should reset all boxes to white, in the same order in which they were clicked, one by one, by 1 second delay.

CodeSandbox Link 4

3. Learnings

Although I was able to give a working solution to this problem within around 45-50 mins, my code lacked scalability and reusability.
So initially, when I heard from the interviewer, that I need to create the exact same UI, I simply created divs for every box. I didn't think about the config. So even if the requirement is small, we should plan to write our code in such a way that later, it should be reusable and as configurable as possible.
During the interview, I had to change my state logic several times. Initially I was unable to come up with what the final state of the app will look like, and which state will be maintained at the child level and which will be maintained at parent level. So, this wasted some precious minutes in the interview.
I was finally able to come up with this code solution after 3 attempts. In this code too, there are some places where DRY principles can be used to improve the code quality.

What are CSS-Variables?

Shivaansh Agarwal — Sat, 26 Jun 2021 06:59:28 +0000

Overview and History

Initially CSS lacked support for native variables, which led developers turn to CSS Preprocessors like SAAS which solved this problem through the use of preprocessor variables.
CSS Variables are used just like any other variable in a different language, i.e. to assign a certain value to then and reference that value later. (The value is not actually stored )
Also called Custom Properties or Cascading Variables. (So, we may use them interchangeably in this blog post.)

How to Define and Use CSS Variables, & what are Scopes for CSS Variables?

In Javascript we usually declare and intialize a variable in one of the following ways:

let a = 10;
const b = 20;
var c = 30;

But in CSS, we don't use any such keyword like let, const, var; instead we just use 2 hyphens (dashes --) before the user-defined variable name and put them in a scope.
Yes scope, just like in Javascript we've scopes like function scope, block scope, global scope we also have scopes in CSS.

:root {
  --main-color: red;
}

Here we've used the :root selector. It targets the top element of the DOM and hence has a global scope. Similarly we can have other local scopes based on different CSS Selectors.

But then the question for specificity arises, like suppose we've the same CSS-property defined at the global level as well as the local level, then which value will be preferred?

For that consider the following code snippet.

Here we can notice a lot of things:

How to access a CSS- Variable.
Local variables have higher precedence over global ones.
We can use the property and declare it later, and CSS will still consider it, like in case of div.

Accessing CSS Variables using `var()`

As seen above, we can access the CSS Variable defined above using the var() function.
var() function takes the property name as argument, retrieves it's value from the stylesheet if it's present and replaces it with the actual CSS-Property.
Hence unlike other languages variables in CSS, don't store values, they just replace it with the actual CSS value when used.

var() can also be used to provide a fallback value in case the property is missing.

div {
  font-size: var(--main-font-size, 16px);
}

Using CSS Variables inside Javascript

Consider the following Codepen for understanding how to access and change CSS-Variable in Javascript.

To get the value of a custom property at runtime, use the getPropertyValue() method of the computed CSSStyleDeclaration object.
To set the value of custom property at runtime, use the setProperty() method of the CSSStyleDeclaration object.

Benefits of using CSS Variables in your code:

Consider the following CSS Code.

:root {
  --main-font-color: #E9E9E9;
  --main-bg-color: rgba(128,128,0,1);
}
p {
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
}
span {
  color: #E9E9E9;
  background-color: rgba(128,128,0,1);
}

Now, having looked at both the ways of using CSS i.e. with and without the use of CSS Variables, let's see what benefits we get using CSS-Variables over CSS without it.
1. Ease of maintainability:
Let's say you've put in hours of work to select appropriate styles and colors and all of a sudden the requirement for that styling changes. You'll have to go through the entire project to change the colors and styling, but suppose if you've used CSS variables, you could've changed the value of the CSS property once and it would reflect at all places.
2. Code becomes more readable:
As we can see above, the variables are user-defined so they can contain semantic meaning, and hence using these variables makes more sense as it is becomes much easier to understand and maintiain.

How are native CSS variables different from Preprocessor variables like SAAS?

One of the main difference is Native CSS Variables can be modified at runtime dynamically.
Define CSS-Properties inside media-queries. For other differences please look at the following section for an amazing article on CSS-Tricks

S.No.	Link
1	CSS Variables: Why Should You Care? [Google Developers]
2	What is the difference between CSS variables and preprocessor variables? [CSS-Tricks]
3	Using CSS custom properties (variables) [MDN]

Understanding for...in vs for...of statements in Javascript

Shivaansh Agarwal — Tue, 22 Jun 2021 04:54:08 +0000

Overview

Differences
1. Definition
2. Syntax
3. When to use for...in or for...of?
4. Examples
Further Reading

Differences

1. Definition

for...in:

The for...in loop statement iterates over the enumerable properties of an object including the inherited enumerable properties in an arbitrary order except the keys that are of type Symbol.
Enumerable properties are those properties whose internal enumerable flag is set to true.
The following properties a,b,c are enumerable by default:

const obj1 = {a:1, b:2};
obj1.c = 3;

The property defined using Object.defineProperty by default are not enumerable:

const obj2 = {};
Object.defineProperty(obj2, 'a', {
  value: 42
});

for...of:

The for...of loop statement iterates over the values that the iterable object defines to be iterated over like Array, String. etc.
Some built in types such as Array and Map have a default iteration behaviour while Object does not.

2. Syntax

for...in:

for (variable in object) {
  statement
}

for...of:

for (variable in iterable) {
  statement
}

3. When to use for...in or for...of?

for...in:

for...in can used in scenarios where you want to iterate over properties of an Object to check the keys and their corresponding values.
Since for...in loop statement iterates over enumerable properties of an object in an arbitrary order it is not recommended to use for..in with an Array where index order is important. It is because there is no guarantee that for...in will return indexes in any particular order.
If you want to loop over values of an array consider using for with numeric index, Array.prototype.forEach, for...of.

for...of:

To be used to iterate over iterable objects.
for...of can be iterated over String, Array, TypedArray, Map, Set, arguments object of a function, DOM Collection, generators, other iterable objects.

2. Example

S.No	Link
1	for...in [MDN Docs]
2	for...of [MDN Docs]
3	What is the difference between ( for… in ) and ( for… of ) statements? [Stackoverflow]

Why not to use index as key in React Lists (Practical Example)

Shivaansh Agarwal — Sun, 06 Jun 2021 08:18:55 +0000

We all have heard that using index as key in a react list is an anti-pattern and should be avoided.

The answer to this lies in the concepts of:

React Virtual DOM: It's a lightweight representation of actual DOM, stored in memory and is never rendered.
Reconciliation in React: The process of syncing Virtual DOM with the real DOM.
Diffing Algorithm: The algorithm to find the minimum number of steps needed to update the real DOM.
Assumptions for using the Diffing Algorithm:
- Two elements of different types will produce different trees.
- The developer can hint at which child elements may be stable across different renders with a key attribute.

This is just a very brief overview of these concepts. For more details definitely checkout React Documentation.
For now let's just keep in mind the 2nd assumption used for React's diffing algorithm and proceed further.

Coming back to our topic of why a key attribute is necessary.

React uses key attribute to track the changes in the list.

We might face following issues when we use index value as key attribute when creating a list:

Performance Issues due to unnecessary re-renders.
Issues in data mapping in case list items are sorted, filtered, or deleted.

Let's understand the performance issue with the following example.

Suppose we've a list of elements, with key attribute as index.



<ul>
  <li key=1>Milk</li>
  <li key=2>Eggs</li>
  <li key=3>Bread</li>
</ul>

Now, in case of any state change in the list, React just iterates over each list item in both the lists (React compares the Virtual DOM snapshot before the update and after the update), looks for changes and finally updates the RealDOM with only those changes.

If we add an item to the end of the list, React no longer needs to re-render the first 3 list items which are same. It will just add a new list item at the end.



<ul>
  <li key=1>Milk</li>
  <li key=2>Eggs</li>
  <li key=3>Bread</li>
  <li key=4>Butter</li>
</ul>

But suppose we add the new item at the beginning of the list.



<ul>
  <li key="1">Butter</li>
  <li key="2">Milk</li>
  <li key="3">Eggs</li>
  <li key="4">Bread</li>
</ul>

Now, the key of remaining list items also changes, which makes React re-render all the elements again, instead of just adding a new item at the end.

This can be avoided if we use some unique id as a key rather than index.
Let's again consider the same previous example but this time by using a unique id as key.



<ul>
  <li key="12abc">Milk</li>
  <li key="23bcd">Eggs</li>
  <li key="34cde">Bread</li>
</ul>

Now even if we add element to the beginning or the end, we won't face an issue since keys are different.
Since React tracks all list items with their key attribute, after adding a new element it would not re-render the previous list items.



<ul>
  <li key="45htl">Milk</li>
  <li key="12abc">Milk</li>
  <li key="23bcd">Eggs</li>
  <li key="34bcd">Bread</li>
  <li key="85kgt">Milk</li>
</ul>

In the below example, the first list is created using index as key and in the second using id as key.
On deleting the item from the first list, we can see the whole list is getting re-rendered, while in the second list the original list remains intact only the targeted element is removed.
So, in case the list is large with complex components it might cause a huge performance issue.

When is it safe to use index as key in a list?

Data is static.
When you know reordering of lists: Sorting, Filtering is not going to happen.
In the absence of an id.

SUMMARY

Always prefer using a unique id as value for the key attribute in a list and avoid using index.
Using index might result in performance issues and data binding issues in case reordering in the form of sorting, filtering might happen.

References:

Understanding undefined, null, undeclared in Javascript

Shivaansh Agarwal — Sun, 23 May 2021 13:38:19 +0000

undefined
- It's a primitive data type in Javascript.
- Any variable which has been declared but has not been assigned any value has the value undefined.
- During the memory creation phase of the execution context, every variable is assigned the value of undefined by the JS Engine.
null
- It's a primitive data type in Javascript.
- A variable can be assigned the value null.
- Although null is itself a data type, but on checking it's type using typeof we get "object".
- Why is typeof null “object”?
undeclared (not defined)
- This occurs when we try to access a variable which hasn't been declared or initalized yet.
- If we try to console.log(undeclaredVar) the error will be raised as shown above, so especially for this a try{...} catch(e){...} block has to be written. But if we instead use "use strict" pragma we can fix these errors during compile phase itself rather than during runtime.
- typeof operator is the only operator that can reference a variable that hasn't been declared and not throw an error. typeof undeclaredVar //"undefined"
uninitialized (TDZ)
- It was introduced with ES6.
- It's based on the concept of Temporal Dead Zone.
- Variables which are block scoped (declared using let or const) are initially uninitialized. They can't be accessed unless they're in the temporal dead zone or intialized.

References & Further Reading:

Value VS Reference in Javascript

Shivaansh Agarwal — Tue, 19 Jan 2021 20:36:59 +0000

Overview

Javascript has 6 primitive data types: string, number, bigint, boolean, undefined, symbol. Although null is also considered as a primitive data type because of it's behavior, But in certain cases, null is not as "primitive" as it first seems! since every object is derived from null by the Prototypal Chain and therefore typeof operator returns object for it.
The primitive data types are copied by value.
Javascript also provides another data structure like Object, which itself is used for creating other non-primitive data-types like Array, Function, Map, Set, WeakMap, WeakSet, Date.
These non-primitive data types are copied by reference.

Primitive Data Types Examples

Let's take the examples of copying primitive data types.
Here we can see that the values are copied as it is to other variables.

let a1 = "Javascript";
let b1 = 10;
let a2 = a1;
let b2 = b1;
console.log(a1, b1, a2, b2); 
// Javascript 10 Javascript 10

Now, if we assign something else to the previously declared a2 and b2 variables, we can see that the value stored inside a1 and b1 didn't get impacted.

let a1 = "Javascript";
let b1 = 10;

let a2 = a1;
let b2 = b1;

a2 = "Java";
b2 = 20;
console.log(a1, b1, a2, b2); 
// Javascript 10 Java 20

Non-Primitive Data Types Examples

Now suppose we've a non-primitive data type and we copy it to another variable.

let arr1 = ["1", "2", "3", "4"];
let arr2 = arr1;
console.log(arr1, arr2); 
// ["1", "2", "3", "4"]
// ["1", "2", "3", "4"]

But now if we make some change to arr2.

arr2[2] = "5";
console.log(arr1, arr2);
// ["1", "2", "5", "4"]
// ["1", "2", "5", "4"]

We can see that the change made to the copied array arr2 also reflects in the original array arr1. So what happens when we did arr2 = arr1 was, we assigned the reference of the value stored inside arr1 to arr2. And this is the case with all non-primitive data types.

So what can be done if suppose we want to copy a non-primitive data type, say array for example.

let arr = ["1", "2", "3", "4"];
// Option-1: Using Array.prototype.slice() method. [Shallow Copy]
let arrCopy1 = arr.slice();
// Option-2: Using Array.prototype.concat() method. [Shallow Copy]
let arrCopy2 = [].concat(arr);
// Option-3: Using es6 spread operator. [Shallow Copy]
let arrCopy3 = [...arr];
// Option-4: Using Array.from() method [Shallow Copy]
let arrCopy4 = Array.from(arr);

So now if we change anything inside these new copied arrays, the original values inside arr won't change.
For shallow copying of Objects use Object.assign()

let car = {"brand": "BMW", "wheels": 4};
let bike = Object.assign({}, car, {"wheels":2, "safety":3});
console.log(car, bike);
// {brand: "BMW", wheels: 4} {brand: "BMW", wheels: 2, safety: 3}

Shallow VS Deep Copy (Array)

But a thing to remember here is that all these techniques perform shallow copy instead of a deep copy, i.e. If the array is nested or multi-dimensional or contains objects, and if we change anything inside those it won't work.
Let me explain with an example:
Here I'm taking Array.prototype.slice() for copying but any of the others can also be used.

let obj1 = {"name":"shivaansh"};
let obj2 = {"name":"agarwal"};
let arr = [obj1, obj2];
let arrCopy1 = arr.slice();
arrCopy1[0].age = 22;
console.log(arr, arrCopy1);
/*
[{"name":"shivaansh", "age":22}, {"name":"agarwal"}]
[{"name":"shivaansh", "age":22}, {"name":"agarwal"}]
*/

As we can see here in case of deep copy the above technique fails.

So to avoid this some developers usually prefer using the JSON methods.

let obj1 = {"name":"shivaansh"};
let obj2 = {"name":"agarwal"};
let arr = [obj1, obj2];
let arrCopy1 = JSON.parse(JSON.stringify(arr));
arrCopy1[0].age = 22;
console.log(arr, arrCopy1);
/*
[{"name":"shivaansh"}, {"name":"agarwal"}]
[{"name":"shivaansh", "age":22}, {"name":"agarwal"}]
*/

But as pointed out by Samantha Ming in her blog, even JSON technique might fail as it'll not work with values not compatible with JSON like suppose if we've a function being assigned to an object property inside an array.

Also, consider the following example,

function nestedCopy(array) {
    return JSON.parse(JSON.stringify(array));
}

// undefined are converted to nulls
nestedCopy([1, undefined, 2]) // -> [1, null, 2]

// DOM nodes are converted to empty objects
nestedCopy([document.body, document.querySelector('p')]) // -> [{}, {}]

// JS dates are converted to strings
nestedCopy([new Date()]) // -> ["2019-03-04T10:09:00.419Z"]

deepClone by lodash or custom function

JSON.stringify/parse only work with Number and String and Object literal without function or Symbol properties.
deepClone works with all types, function and Symbol are copied by reference.

Example of Lodash Solution by Alfredo Salzillo,

const lodashClonedeep = require("lodash.clonedeep");

const arrOfFunction = [() => 2, {
    test: () => 3,
}, Symbol('4')];

// deepClone copy by refence function and Symbol
console.log(lodashClonedeep(arrOfFunction));
// JSON replace function with null and function in object with undefined
console.log(JSON.parse(JSON.stringify(arrOfFunction)));

// function and symbol are copied by reference in deepClone
console.log(lodashClonedeep(arrOfFunction)[0] === lodashClonedeep(arrOfFunction)[0]);
console.log(lodashClonedeep(arrOfFunction)[2] === lodashClonedeep(arrOfFunction)[2]);

Example of Recursive function Solution by Tareq Al-Zubaidi

const clone = (items) => items.map(item => Array.isArray(item) ? clone(item) : item);

References:

Maps (Hashmaps) in Javascript

Shivaansh Agarwal — Mon, 28 Dec 2020 04:08:11 +0000

MAPS

A map is a data structure which maps values (keys) with other values.

In Javascript we can use an Object for this purpose.

Suppose we've to store student's marks, we can use an object for this purpose.

let marks={
  "John": 98,
  "Arun": 87,
  "Robert": 91
};

console.log(`Arun scored ${marks["Arun"]} marks.`);
// → Arun scored 87 marks.
console.log("Are Julie's marks known?", "Julie" in marks);
// → Are Julie's marks known? false
console.log("Are toString's marks known?", "toString" in marks);
// → Are toString's marks known? true

Although the first 2 results were expected, we certainly didn't expect the 3rd result as we didn't add any key with the name of 'toString' to our marks object.
But this is the downside of using an Object as a Map.
Along with the key-value pairs we define the plain object also derives properties from Object.prototype

Hence using plain objects as maps could be dangerous. So suppose we want an object without it inheriting from Object.prototype, we can do this in many ways:
One of the way is to pass null to Object.create() method. In this way the resulting object will not derive from Object.prototype and can be safely used as a map.

console.log("toString" in Object.create(null));
// → false

Also if we're using a plain object as our map, we can avoid using in keyword for finding whether key is present in object or not; instead we can use hasOwnProperty() method which ignores the object's prototype.

console.log({x: 1}.hasOwnProperty("x"));
// → true
console.log({x: 1}.hasOwnProperty("toString"));
// → false

There's another problem with using plain objects. It only accepts strings as it's keys. And if suppose we want suppose an object as a key, we cannot do this.

Don't worry, Javascript also provides us with Map class which is written for this exact purpose.
The methods set, get, and has are part of the interface of the Map object.

let marks = new Map();
marks.set("John",98);
marks.set("Arun",87);
marks.set("Robert",91);
console.log(`Arun scored ${marks.get("Arun")} marks.`);
// → Júlia scored 87 marks.
console.log("Are Julie's marks known?", marks.has("Julie"));
// → Are Julie's marks known? false
console.log("Are toString's marks known?", marks.has("toString"));
// → Are toString's marks known? false

References:

Closures in Javascript PART-1

Shivaansh Agarwal — Mon, 14 Dec 2020 18:24:46 +0000

DISCLAIMER: I've written this blog to share with others what I've understood after going through several blogs, articles, videos, etc. So the following written blog might contain some ideas & language influenced by those.

Overview

Closures are one of the most asked interview topics & are frequently used in JavaScript for object data privacy, in event handlers and callback functions, and in partial applications, currying, and other functional programming patterns.

Definition

A closure is a function bundled together with it's lexical environment.
In simple words a closure gives you access from an outer function's scope from an inner function.
In Javascript, a closure is created every time a function is created, at function creation time.

Lexical Scoping

The following is an example of lexical scoping, where getName() has 2 local variables firstName & lastName.

It also has a nested method which is accessing these variables of it's other function.

JSFiddle Link
Lexical Scoping describes how a parser resolves variable names when functions are nested.

Closures

Now what happens if we return this nested method and call it from outside?

JS Fiddle Link
It works exactly the same as in previous example.
The catch here is when we return the function, it is returned along with its lexical environment. The lexical environment of the inner function getFullName consists of any local variables that were in-scope at the time when closure was created.

Forem: Shivaansh Agarwal

Use of package-lock.json

MakeMyTrip Frontend Machine Coding Interview

Overview

1. Problem Statement

2. Solution

i. Noting Down the Requirements:

ii. Describing the components to be used

iii. Describing the implementation details

STEP-1

STEP-2

STEP-3

STEP-4

STEP-5

STEP-6

STEP-7

3. Learnings

What are CSS-Variables?

Overview and History

How to Define and Use CSS Variables, & what are Scopes for CSS Variables?

Accessing CSS Variables using var()

Using CSS Variables inside Javascript

Benefits of using CSS Variables in your code:

How are native CSS variables different from Preprocessor variables like SAAS?

Further Reading:

Understanding for...in vs for...of statements in Javascript

Overview

Differences

1. Definition

for...in:

for...of:

2. Syntax

for...in:

for...of:

3. When to use for...in or for...of?

for...in:

for...of:

2. Example

Further Reading:

Why not to use index as key in React Lists (Practical Example)

When is it safe to use index as key in a list?

SUMMARY

References:

Understanding undefined, null, undeclared in Javascript

Value VS Reference in Javascript

Overview

Primitive Data Types Examples

Non-Primitive Data Types Examples

Shallow VS Deep Copy (Array)

deepClone by lodash or custom function

Example of Lodash Solution by Alfredo Salzillo,

Example of Recursive function Solution by Tareq Al-Zubaidi

References:

Maps (Hashmaps) in Javascript

MAPS

Closures in Javascript PART-1

Overview

Definition

Lexical Scoping

Closures

References:

Accessing CSS Variables using `var()`