Forem: Pranav

What were your reasons to shift to Linux OS from a MAC/ Windows OS ?

Pranav — Thu, 02 Jun 2022 08:30:21 +0000

A lot of my friends have suggested me to shift to Linux operating system due to a lot of privacy advantages and it being developer friendly as well as it being more useful for when we start working in the industry. I am currently using windows operating system and am able to get most of my work done with it. Plus I heard we need to manually install a lot of drivers for our devices for Linux OS which would make it complex for me to get started as a beginner.

I do want to try it though but I am not convinced if I should really switch to it. I would love to know your thoughts/ advantages you felt there were on switching from a MAC/Windows OS to Linux. Also, please suggest some good/ beginner friendly ways to get started with Linux and which was the first Distro you used? I am sure other beginners who are trying to get started with it, will also benefit from this thread!

Thank you if you commented 😃

Advanced JavaScript Series - Part 9: Constructor Functions, Object Oriented, `new` keyword

Pranav — Wed, 26 Jan 2022 10:18:54 +0000

Constructor Functions-

In JavaScript, a constructor function is used to create objects.
It is considered good practice to name constructor functions with an upper-case first letter.

Example-

Code-

const Phone = function (model, brand){
  this.model = model,
  this.brand = brand
}

phone.prototype.clickPicture = function(){
  console.log(`${this.brand} ${this.model} clicks picture!`)
}

const iphone = new Phone("Iphone 12", "Apple")
console.log(iphone.clickPicture())

In the above example, function Phone() is an object constructor function.
To create an object from a constructor function, we use the new keyword.

Output-

"Apple Iphone 12 clicks picture!"

Built-in constructors-

Example-

let a = new Object();    // A new Object object
let b = new String();    // A new String object
let c = new Number();    // A new Number object
let d = new Boolean();   // A new Boolean object

All these are constructor functions provided to us by javascript.

Code-

typeof Object

Output-

'function'

Classes-

Another way of creating templates for JavaScript Objects are Classes.
They are very similar to constructor functions. Classes have their own constructors that help initialize variables/values.

Constructor method-

The constructor method is a special method:

It has to have the exact name "constructor"
It is executed automatically when a new object is created
It is used to initialize object properties

If you do not define a constructor method, JavaScript will add an empty constructor method.
Just like constructor functions, we can use the new keyword to create new objects from this class.

Example-

Code-

class Phone{
  constructor(model, brand){
    this.model = model
    this.brand = brand
  }
  clickPicture() {
    console.log(`${this.brand} ${this.model} clicks picture!`)
  }
}

const iphone = new Phone("Iphone 12", "Apple")
console.log(iphone.brand)
console.log(iphone.clickPicture())

Here iphone is an instance of the class Phone.
There is a reason why we do not call the clickPicture function from inside the constructor because, the constructor is called every time we instantiate a new object and that would initialize the function every time instead of sharing it among objects thus taking up more space in memory.

Output-

"Apple"
"Apple Iphone 12 clicks picture!"

Classes in JavaScript is just syntactical sugar but under the hood it still uses prototypal inheritance.

Inheritance in Classes-

Inheritance enables you to define a class that takes all the functionality from a parent class and allows you to add more. Using class inheritance, a class can inherit all the methods and properties of another class.

The super() method refers to the parent class.

Credits- Rupesh Mishra

Example-

Code-

class Phone{
  constructor(model, brand){
    this.model = model
    this.brand = brand
  }
  clickPicture() {
    console.log(`${this.brand} ${this.model} clicks picture!`)
  }
}

class Iphone extends Phone {
  constructor(model, brand, software){
    super(model, brand)
    this.software = software
  }
}

const tenPro = new Iphone("10 pro", "Apple", "IOS")
console.log(tenPro)

Output-

{
  brand: "Apple",
  model: "10 pro",
  software: "IOS"
}

`new` keyword in JS

The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

Example-

Code-

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

Output-

var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
var car2 = new Car('Nissan', '300ZX', 1992, ken);

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 8: The 2 Pillars~ Closures & Prototypal Inheritance

Pranav — Sat, 22 Jan 2022 01:49:21 +0000

Closures-

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

Credits- Edward Huang

Lets understand concept of closures with the help of examples.
Closures have two major advantages.

1. Memory efficient

Example 1-

We want to build a counter function that keeps a track of counts and the count gets increased on calling the function. For that we'll need a count variable initialized to zero.
But we don't want it to be accessed by anyone else and alter it thus we don't want the count variable to be in a global scope for this very reason.
We can't declare it inside the function either because whenever the function will be called, it will create a new execution context that creates a new local scope for the function(we have learned this in previous parts of our series). Thus the count variable gets reinitialized to zero every time we call the function, hence we can't declare it in local/functional scope either.
We can also try to use nested functions just like this-

function add() {
  let counter = 0;
  function plus() {counter += 1;}
  plus();   
  return counter;
}

But here we can't call the plus() function from outside hence this is of no use.

Here comes the concept of closures and self invoked functions(learned in earlier parts of the series).

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

Here as you can see the function that we return from the self invoked function has a reference of a variable that is outside its local environment just like we said in closures- with references to its surrounding state.
These references from external environment are stored in the memory even if we lose the function outside because the particular reference is being used in the function we call.
That's why closures are very a powerful concept.

Example 2-

Code-

const getHeavy = heavy();
console.log(getHeavy(699))
console.log(getHeavy(700))
console.log(getHeavy(701))

// we don't want to pollute global namespace
function heavy() {
  const bigArray = new Array(7000).fill('hello')
  return function(item) {
    return bigArray[item]
  }
}

Here we are returning a function that can access the required index whenever called, without polluting our global namespace.
Here the reference to the array bigArray stays in memory even though the outer function is popped from the call stack and its context is removed because of the concept of closures and we are able to use the getHeavy function to access required indexes from it.

Output-

"hello"
"hello"
"hello"

2. Encapsulation

We can make variables that are not accessible in the global scope by anyone or any function.
We can also make variables that are accessible via a function without it being in its local scope such that it gets destroyed when its execution context is popped of the call stack.
We can make variables encapsulated and safe with the help of closures.

Example-

Code-

const getHeavy = heavy();
console.log(getHeavy(699))
console.log(getHeavy(700))
console.log(getHeavy(701))

// we don't want to pollute global namespace
function heavy() {
  const bigArray = new Array(7000).fill('hello')
  return function(item) {
    return bigArray[item]
  }
}

The bigArray cannot be accessed from anywhere in the function except for the function that we return to the getHeavy variable.
In this way the array is encapsulated, we can access it anytime, from anywhere without it being declared in the global namespace/scope and this is property is very useful in different scenarios.

Credits- Neelesh Vishwakarma

Prototypal Inheritance-

Prototypal Inheritance is a method by which an object can inherit the properties and methods of another object.

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.
And if we check the prototype of the Object then we see null being returned by JavaScript since Object is root element in JS.

Credits- Ryan Thelin

__proto__ is another keyword that can help us determine the parent/prototype of any object(even array or function) in javascript.

Let's see this with help of an example-

Example 1-

Let's make an object for a phone that would have all the basic properties that a phone should have.
Then we would make an Object for an iPhone, that would inherit the properties from the generic phone object to specify all the basic features and then add its own specific features to the iPhone object(itself).
We also have a isPrototypeOf() method that checks if an object exists in another object's prototype chain.

The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).

Code-

const phone = {
  calling: true,
  camera: true,
  touchscreen: true,
}

const iphone = {
  software: "IOS",
  security: "Face Unlock",
}

iphone.__proto__ = phone
console.log(iphone.calling)
console.log(phone.isPrototypeOf(iphone))
console.log(phone.hasOwnProperty(camera))

In this example, when run console.log(iphone.calling), the JS engine checks iphone's properties and looks for the key calling.
When we use prototypal inheritance, the properties don't get added to the child object itself. That is why, when we access a property that is not there in the child object, the JS engine continues its searches up the prototype chain in parent object's properties and returns if found.
If not found, undefined is logged on the console.
This above is the reason, false is returned, when we run console.log(phone.hasOwnProperty(camera)) because the iphone object doesn't have the camera property natively, instead it is inherited from the prototytpe.

Output-

true
true
false

Example 2-

__proto__ always returns the parent object of our current object that it inherits its properties from.
If we take an array or a function and access __proto__ property of either one, firstly we'll see their respective objects in the output.
But if we further access the __proto__ property of their outputs then we get the constructor object "Object" that is the base unit of arrays, functions, objects etc in JavaScript.
We cannot go any further back than the Object property. Behind that we only receive null.

Code-

const phone = {
  calling: true,
  camera: true,
  touchscreen: true,
}

const iphone = {
  software: "IOS",
  security: "Face Unlock",
}

iphone.__proto__ = phone
console.log(iphone.__proto__) // we recieve phone object
console.log(iphone.__proto__.__proto__) // we get the base constructor object
console.log(iphone.__proto__.__proto__.__proto__) // we get null here since we cannot go further back than an Object which is base unit

Output-

prototype keyword in JavaScript is always present in the parent object that holds all the properties that would be inherited down to its child. It also holds the parent object's own __proto__ property to access its parent.

Example to help understand-

Code-

const phone = {
  calling: true,
  camera: true,
  touchscreen: true,
}

const iphone = {
  software: "IOS",
  security: "Face Unlock",
}

iphone.__proto__ = phone
console.log(iphone.prototype)

Traditionally, in order to get and set the [[Prototype]] of an object, we use Object.getPrototypeOf and Object.setPrototypeOf. Nowadays, in modern language, it is being set using __proto__.
One reason to use the built-in prototype object is if you'll be duplicating an object multiple times that will share common functionality. By attaching methods to the prototype, you can save on duplicating methods being created per each new instance.
__proto__ is an object in every class instance that points to the prototype it was created from.
The only true difference between prototype and __proto__ is that the former is a property of a class constructor, while the latter is a property of a class instance.
__proto__ is the actual object that is used in the lookup chain to resolve methods, etc. prototype is the object that is used to build __proto__.
Updating the __proto__ property is not a good practice, instead a good way to inherit properties is by using Object.create().

Another way of creating a prototype chain `Object.create()`

ECMAScript 5 introduced a new method: Object.create(). Calling this method creates a new object. The prototype of this object is the first argument of the function.

Example-

Code-

const phone = {
  calling: true,
  camera: true,
  touchscreen: true,
}

const iphone = Object.create(phone)

iphone.software= "IOS",
iphone.security= "Face Unlock"

console.log(iphone.calling)

Output-

true

Some useful articles-

Tricky example to test knowledge about prototype chain-

Code-

const multiply = function(a, b){
  return a*b
}

console.log(multiply.__proto__)
console.log(Function.prototype)
console.log(multiply.__proto__.__proto__)
console.log(Object.prototype)

console.log(typeof Object)
console.log(typeof Object.prototype)

Output-

Function constructor
Function constructor
Object constructor
Object constructor
'function'
'object'

Object is an inbuilt function in JavaScript. It also has a prototype of its own like all the other functions in JS.
Object.prototype returns an 'object' as output since the base element/parent of a function is the object constructor in JavaScript. (as we learned before)

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 7: First Class Citizens & Higher Order Functions

Pranav — Thu, 20 Jan 2022 17:46:03 +0000

First Class Citizens

First-class citizenship simply means being able to do what everyone else can do. In JavaScript, functions are objects (hence the designation of first-class object).

JavaScript has all those abilities or features that are required to be a language having First Class Functions, hence functions are treated as First Class Citizens.
Let’s look at all the abilities of functions being a First Class Citizen.

1. Ability to treat functions as values-

Code-

var hello = function(){
  return "hello world"
}

console.log(hello())

Output-

"hello world"

2. Ability to Pass functions as arguments-

Code-

function hello(fn){
  fn()
}

hello(function() { console.log("hello world") })

Output-

"hello world"

3. Ability return a function from another function-

Code-

function hello(){
  return function() {
    return "hello world"
  }
}

var hi=hello()
console.log(hi())

Output-

"hello world"

Because this behavior of JS functions as first class citizens, we are also able to do functional programming that we will learn more about in further parts of our series.

Higher Order Functions-

A higher order function is a function that takes a function as an argument, or returns a function.

Simplified Example-

Code-

const multiplyBy = (num1) => {
  return function (num2) {
    return num1 * num2;
  }
}

const multiplyByTwo = multiplyBy(2);
multiplyByTwo(4)

Output-

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 6.2: Pass by Value & Pass by Reference, Shallow & Deep Copy, Type Coercion

Pranav — Tue, 18 Jan 2022 22:28:04 +0000

Pass by Value-

In JavaScript pass by value, the function is called by directly passing the value of the variable as the argument. Therefore, even changing the argument inside the function doesn’t affect the variable passed from outside the function.

It is important to note that in JavaScript, all function arguments are always passed by value. That is, JavaScript copies the values of the passing variables into arguments inside of the function.

Credits- Reina Mitchell

Example-

Code-

let a=5
let b=a

b++;
console.log(b)
console.log(a)

Output-

6
5

Pass by Reference-

In Pass by Reference, a function is called by directly passing the reference/address of the variable as the argument. Changing the argument inside the function affects the variable passed from outside the function.

In JavaScript, objects and arrays are always passed by reference.

Example-

Code-

let obj1={
  a: 'a',
  b: 'b',
  c: 'c'
}

// shallow copying the object using the spread operator
let obj2={...obj1}
obj2.b='d'

console.log(obj2)
console.log(obj1)

let obj1={
  a: 'a',
  b: 'b',
  c: 'c'
}

// another way of copying the object
let obj2=Object.assign({}, obj1)
obj2.b='d'

console.log(obj2)
console.log(obj1)

Output-

{
  a: "a",
  b: "d",
  c: "c"
}
{
  a: "a",
  b: "b",
  c: "c"
}

But this is only a shallow copy of the original object.

A deep copy means that all of the values of the new variable are copied and disconnected from the original variable. A shallow copy means that certain (sub-)values are still connected to the original variable.

Lets understand this with the help of an example.

Example-

let obj1 = {
  a: 'a',
  b: 'b',
  c: {
    d: 'd'
  }
};

let obj2={...obj1}
obj2.c.d='f'

console.log(obj2)
console.log(obj1)

Output-

{
  a: "a",
  b: "b",
  c: {
    d: "f"
  }
}
{
  a: "a",
  b: "b",
  c: {
    d: "f"
  }
}

As you can see that the new object is still connected to the original object it got the value from.

The problem with shallow copy is that, if the user makes changes to the complex object (update street property of address object) of the source object userName, it is also reflected in the Destination Object, since it points to the same memory address and vice-versa.
Thus we turn towards Deep Copying. Deep copying means that value of the new variable is disconnected from the original variable while a shallow copy means that some values are still connected to the original variable.
Lets understand deep copying with the help of an example.

Example-

Code-

let obj1 = {
  a: 'a',
  b: 'b',
  c: {
    d: 'd'
  }
};

// converts obj1 to string and then parses it into a new object
let obj2 = JSON.parse(JSON.stringify(obj1))
obj2.c.d = 'f'

console.log(obj2)
console.log(obj1)

Output-

{
  a: "a",
  b: "b",
  c: {
    d: "f"
  }
}
{
  a: "a",
  b: "b",
  c: {
    d: "d"
  }
}

Here we can see that changes made in obj2 are not reflected in obj1 thus we can say that its a deep copy and the two objects are disconnected.

How to compare two objects having different memory location but same value-

To answer this question, I have found this Stack Overflow thread that answer this question flawlessly and I couldn't explain it any better than thus adding the link to this thread: Stack Overflow thread
If the link due to any reason doesn't open, here is the fastest and limited way of comparing values of objects at different memory locations-

JSON.stringify(obj1) === JSON.stringify(obj2)

Credits- Mathwarehouse

Tricky question to test knowledge-

const number = 100
const string = "Jay"
let obj1 = {
  value: "a"
}
let obj2 = {
  value: "b"
}
let obj3 = obj2;

function change(number, string, obj1, obj2) {
    number = number * 10;
    string = "Pete";
    obj1 = obj2;
    obj2.value = "c";
}

change(number, string, obj1, obj2);

// guess which variables will get updated
console.log(number); 
console.log(string);
console.log(obj1.value);

Output-

100
Jay
a

Type Coercion-

Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers).

Credits- Bill

Example-

Code-

const value1 = '5';
const value2 = 9;
let sum = value1 + value2;

console.log(sum);

Output-

"59"

In the above example, JavaScript has coerced the 9 from a number into a string and then concatenated the two values together, resulting in a string of 59. JavaScript had a choice between a string or a number and decided to use a string.
The compiler could have coerced the 5 into a number and returned a sum of 14, but it did not. To return this result, you'd have to explicitly convert the 5 to a number using the Number() method:

sum = Number(value1) + value2;

As an example of type coercion in practice, look at the JavaScript Comparison Table, which shows how the loose equality == operator behaves for different types.

Implicit vs. explicit coercion

Type coercion can be explicit and implicit.
When a developer expresses the intention to convert between types by writing the appropriate code, like Number(value), it’s called explicit type coercion (or type casting).
Since JavaScript is a weakly-typed language, values can also be converted between different types automatically, and it is called implicit type coercion.

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 6.1: Everything in JS is an Object? Weird JS behaviors revealed, Primitive Non-Primitive Types

Pranav — Mon, 17 Jan 2022 21:21:14 +0000

Introduction-

There are two types of datatypes in JavaScript namely the primitive and non-primitive data-types.
Primitive data types means that are immutable, cannot be further broken down since they are the smallest unit any data can be in. Non-primitive are opposite to this and can consist of different primitive types.

Credits- Deepali

Primitive type includes-

Boolean
Null
Undefined
Number
BigInt
String
Symbol

Non-Primitive Types includes-

Objects

You must be wondering what about arrays and functions? Well, in JavaScript both arrays and functions are a form of object even though when we do typeof on a function it returns function but it is an object. Check these examples to understand better.

Examples-

Code 1-

function a(){
  console.log("hello world")
}

a.hi = "hi"
console.log(a.hi)

Output 1-

"hi"

You can see here how a function is behaving like an object. How we were able to add a new property to the function.

Code 2-

typeof []

Output 2-

'object'

You can see here how an array is returning object as its type.

But in real, everything in JavaScript behaves as an object. Check out this documentation and see how Number, String and many more are listed as built-in objects in JavaScript.
Let's see this with the help of an example.

Example-

Code-

console.log(true.toString())

Output-

'true'

You can see how a boolean value is acting like an object.

This is because behind the scenes, JS adds a wrapper to it and the code becomes console.log(Boolean(true).toString()) and as we know everything acts like an object hence we are able to call the toString() function from Boolean.

If an array is an object, how would we differentiate incase we need to-

There are many different functions available in JS that help us differentiate the types from one anther.
For example, in JS a new function was introduced that helps differentiate array from objects.

Example-

Code-

var x=[1,2,3]
Array.isArray(x)

Output-

true

Connect with me-

Appendix-

References-

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

Rare & useful Git commands summarized + solution to difficult scenarios while using Git

Pranav — Mon, 17 Jan 2022 00:44:53 +0000

Git commands

git restore . - restores the files to the previous commit/ undos all the local changes that haven't been committed.
git restore index.html - restores only that particular file to the recent commit/ undos all the local/uncommitted changes for that file.
git reset --hard <hash code of the commit> - removes commits and goes back to the commit for that hash code
git checkout <hash code of the commit> -- <path/to/file>- goes back to the commit with that hash code only for that particular file. You need to create a new commit after the rollback is complete.
git commit --amend -m 'Your message'- helps re-write messages
git revert <hash code>- helps to roll back to a previous commit by creating a new commit for it. Doesn't removes those commits from the log like git reset does.
git reflog- this can be useful to bring back deleted commits/files/changes. Use git reset <hash code of lost commit from reflog> to bring back rolled changes.
git reset HEAD~2- Helps roll back by 2 commits and unstage all the changes in those 2 removed commits.
git reset HEAD~2 --hard - Helps roll back by 2 commits but permanently removes all the changes in those 2 removed commits.
git rebase (most useful command)- Reapply commits on top of another base tip. ex. git rebase master sets the branch at the tip of master branch

Solution to difficult scenarios while using Git:

1. Moving committed changes to a new branch: (scenario: you accidentally worked on master)

- Use git checkout -b new-feature
- Then roll back commits on master using git reset HEAD~1 --hard: (this command will roll back 1 commit)

2. Stashing (example scenario: you need to work/switch on a new branch without making a commit on the current branch)

All about git stashing:

Use git stash when you want to record the current state of the working directory and the index, but want to go back to a clean working directory. The command saves your local modifications away and reverts the working directory to match the HEAD commit.
The modifications stashed away by this command can be listed with git stash list, inspected with git stash show, and restored (potentially on top of a different commit) with git stash apply. Calling git stash without any arguments is equivalent to git stash push.
git stash
- stashes/ saves the changes in the back of the project/ another directory of the project and the control moves back to the last working copy of the last commit.
- saves the changes as a draft and moves back to code of the last commit.
git stash push -m "Message"- Adds a message for the stash to the stash list
git stash list - lists all the draft changes in the back of the project

Tip- The stash list stores all the stashes and each stashed feature/code has a unique index number to it. The last added stash always appears at the top with index 0.
git stash apply - applies the last stashed draft to our current working directory
git stash apply <index number> - applies the particular indexed stash to our current working directory
git stash drop <index number> - drops the stash out of the stash list with the particular index
git stash pop- pops the last draft changes back into the working directory/ on the working branch and that draft is then removed from the stash list
git stash pop <index number>- pops the draft change with the particular index back into the working directory/ on the working branch and that draft is then removed from the stash list
git stash clear- clears/ deletes all the draft changes stored

Final Solution using stashing-

- First add all changes to staging using git add .
- Stash changes using git stash command.
- Go to your new branch and use command git stash apply.

3. Moving committed changes to an already existing branch using cherry-pick(scenario: you accidently worked on master when there is already a dedicated branch for the feature):

- git checkout feature-branch
- git cherry-pick <hash code of that commit on master>
- git checkout master
- git reset HEAD~1 --hard (rolls back 1 commit)

Note-
This scenario can also be solved using the stashing method explained in #2. You can stash changes and apply those changes to new branch using git stash apply.

4. Squashing commits (scenario: you made a bunch of extra commits because of errors and you wan to combine commits into one with a new commit message)-

git rebase -i <hash code of the commit above which all the commits need to be squashed>
- i stands for interactive squash
- opens up squashing in vim editor where you can pick or squash and update commit messages.

5. Bisect (scenario: there is a bug introduced in the code but you don't know which commit introduced the bug)-

Uses binary search to find the commit that introduced a bug.

Procedure-

git bisect start- starts the searching procedure to find the bad commit.
(Optional) Use the command git bisect good <hash-code of the commit that you are sure doesn't have the bug>- usually this is the first or the second commit and tells git to start from the middle.
git will start checking out commits on its own, you have to test the commit and let git know if the commit has the bug or not by using commands,
- git bisect good- if the commit is fine
- git bisect bad- if the commit has the bug.
After giving feedbacks, git has a feedback tree that it uses to return the commit that introduced the bug/ the first bad commit, you can copy its hash code. The reference refs/bisect/bad will be left pointing at that commit.
After a bisect session, to clean up the bisection state and return to the original HEAD, issue the following command:
git bisect reset- By default, this will return your tree to the commit that was checked out before git bisect start.
git bisect reset <commit>- For example, git bisect reset bisect/bad will check out the first bad revision, while git bisect reset HEAD will leave you on the current bisection commit and avoid switching commits at all.
git revert <hash-code of the bad commit>- used to revert the changes done in the bad commit that introduced the bug in the code.

6. Filter branch (scenario: You want to remove a particular file, whether a large file or any api key accidently uploaded, from you previous commits)-

git filter-branch --index-filter 'git rm --cached --ignore-unmatch filepath' HEAD

Rewrites whichever commit has the particular file present in it while removing it from the commit.
Starts searching from HEAD commit.
--ignore-unmatch helps avoiding errors if file is not found.
Commit time and other properties remain same, only SHA/ Hash of the commit may update if the particular file is found and removed from that commit.

7. Your commits aren't appearing on your GitHub graph:

This mostly happens when either the username or email set in the .gitconfig file in your system is different than the username and email on your GitHub account.

Solution-

git filter-branch --env-filter '
if [ "$GIT_COMMITTER_EMAIL" = "<Old Email>" ];
        then
                GIT_COMMITTER_NAME="<New Name>";
                GIT_AUTHOR_NAME="<New Name>";
                GIT_COMMITTER_EMAIL="<New Email>";
                GIT_AUTHOR_EMAIL="<New Email>";
                git commit-tree "$@";
        else
                git commit-tree "$@";
        fi' HEAD

8. Resetting a particular file to HEAD/ removing the new changes added to a particular file.

Use command git checkout HEAD -- <file-name> to reset the changes done in a particular file back to its state in the last commit.

Bonus command-

Creating zip files using git:

git archive --format=zip --output project.zip master

This command will output a zip file for master branch and will not include files mentioned in .gitignore.

Connect with me-

Advanced JavaScript Series - Part 5: IIFE & 'this' keyword in JS(tricky Eg.), call(), apply(), bind(), Currying(Functional Prog)

Pranav — Sun, 16 Jan 2022 20:47:07 +0000

IIFE

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

Use cases-

Helps avoid polluting the global namespace-

Since our application may incorporate a large number of functions and global variables from various source files, it's critical to keep the number of global variables to a minimum.
We could utilize the IIFE pattern if we have some initiation code that we don't need to use again. Because we won't be reusing the code, IIFE is preferable than a function declaration or a function expression in this scenario.

Example-

(function () {
  // some initiation code
  let firstVariable;
  let secondVariable;
})();

firstVariable and secondVariable will be discarded after the function is executed.

The module pattern-

We would also use IIFE to create private and public variables and methods.
These patterns were more useful before the introduction of ES6, when we didn't have the let and the const keywords. Back then when we imported all the JavaScript files into one, then there were a lot of conflicts in variable names since all variables were global because of declaration using var. Thus developers used IIFE module patterns where the variables were made and only those required inside module were left in global scope and others were discarded because of property of Scope using IIFEs. This also overlaps with the first use case of IIFEs mentioned above. Consider this example to understand better-

Example-

As you know that a function in JavaScript creates the local scope. So, you can define variables and function inside a function which cannot be access outside of that function. However, sometime you accidently pollute the global variables or functions by unknowingly giving same name to variables & functions as global variable & function names.

For example, there are multiple .js files in your application written by multiple developers over a period of time. Single JavaScript file includes many functions and so these multiple .js files will result in large number of functions. There is a good chance of having same name of function exists in different .js files written by multiple developer and if these files included in a single web page then it will pollute the global scope by having two or more function or variables with the same name.

Consider the following example of MyScript1.js and MyScript2.js with same variable & function name.

MyScript1.js

var userName = "Bill";

function display(name)
{
    alert("MyScript1.js: " + name);
}

display(userName);

MyScript2.js

var userName = "Steve";

function display(name)
{
    alert("MyScript2.js: " + name);
}

display(userName);

Importing both files-

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JavaScript Demo</title>
    <script src="/MyScript1.js"></<script> 
    <script src="/MyScript2.js"></<script> 
</head>
<body>
    <h1> IIFE Demo</h1>
</body>
</html>

If you run above example, you will find that every time it call display() function in MyScript2.js because MyScript2.js included after MyScript1.js in a web page. So JavaScript considers last definition of a function if two functions have the same name.

IEFE solves this problem by having its own scope and restricting functions and variables to become global. The functions and variables declare inside IIFE will not pollute global scope even they have same name as global variables & functions. So let's see what is an IIFE is.

Advantages of IIFE:

Helps avoid creating unnecessary global variables and functions.
Functions and variables defined in IIFE do not conflict with other functions & variables even if they have same name.
Organize JavaScript code.
Make JavaScript code maintainable.
Even though the information above is more than enough and well explained to grasp the concept but you can still check out this documentation and this article to read more in-depth about IIFEs.*

`this` keyword-

this represents the object that the function is a property of.

or simply

this helps refer to the object it belongs to.

In a method, this refers to the owner object.

Example-

Code-

const person = {
  firstName: "Pranav",
  lastName : "Mendiratta",
  fullName : function() {
    // here `this` keyword refers to our object `person` 
    return this.firstName + " " + this.lastName;
  }
};
console.log(person.fullName())

Output-

"Pranav Mendiratta"

Alone, this refers to the global object (called the window object in the browser).

Example-

Code-

console.log(this)

Output-

window

In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.

Example-

Code-

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>

Tricky example on `this` keyword 1

Output-

window
window
c

Explanation-

Both a and b are functions of the global/ window object, thus as per the definition, the window object gets returned.

this represents the object that the function is a property of.

The third console.log returns the c object because that's what has called the hi() function in c.hi().
One trick to solve these easily is to check what is on the left side of the function call. If there is nothing then it returns the window object. If some object is calling it like c.hi() then the this keyword in the function points to the object c.

Tricky example on `this` keyword 2

Output-

obj
window

Explanation-

On calling the sing() function, the console.log(this) on line 4 returns the obj object since obj is calling the function.
Whereas the console.log(this) on line 6 returns the window object because its function call is not attached to any object, and those not attached are always under the global/ window object.

Tricky example on `this` keyword 3

Output-

b
window
d

Explanation-

Using the trick we learned in tricky example 1, we see that b.say() should return the b object and it does exactly that.
Arrow functions are lexically scoped where as regular anonymous functions are dynamically scoped.
That is why when calling c.say()(), it returns the window object because it uses anonymous functions that are lexically scoped (we've learned in earlier part of the series). > Lexical scope care where a function was declared, but dynamic scope cares where a function was called from.
This statement will help in understanding the difference.
The final output on calling d.say()() returns the object d that is the correct output because it used the arrow functions that are dynamically scoped and bind the this keyword with the object calling the function.

Tricky example on `this` keyword 4

const phone = function (model, brand){
  this.model = model,
  this.brand = brand
}

// regular anonymous  function used
phone.prototype.clickPicture = function(){
  console.log(`${this.brand} ${this.model} clicks picture!`)
}

// arrow function used here
phone.prototype.powerOn = () => {
  console.log(`${this.brand} ${this.model} boots up!`)
}

const iphone = new phone("Iphone 12", "Apple")
console.log(iphone.clickPicture())
console.log(iphone.powerOn())

Output-

"Apple Iphone 12 clicks picture!"
"undefined undefined boots up!"

Explanation-

Arrow functions are lexically scoped where as regular anonymous functions are dynamically scoped that is why the arrow functions that are dynamically scoped and bind the this keyword with the object calling the function and the other function doesn't thus logging undefined on using this.brand or this.model.

Conclusion-

A lot of the weird behavior of the this keyword is mainly because it is dynamically scoped and not lexically scoped like everything else in JavaScript meaning that it is not important where it is written but how it is called.

Solution to weird behavior-

One way to solve these issues is the use of arrow functions that were introduced in ES6.
If we use an arrow function in the previous example then our function gives us the desired output.
Another way is to bind the this keyword to the object. We will learn more about bind keyword ahead.

Credits- Iqbal M Ipel

Credits- Sanjeev Sharma

call()

With the call() method, you can write a method that can be used on different objects.

Example-

Code-

const wizard = {
  name: 'Pranav',
  health: 100,
  heal: function(num1, num2) {
    this.health += num1 + num2;
  }
}

const archer = {
  name: 'Robin',
  health: 50
}

wizard.heal.call(archer, 50, 60)
console.log(archer)

Output-

{
  health: 160,
  name: "Robin"
}

apply()

With the apply() method, you can write a method that can be used on different objects.

It is very similar to the call keyword, only difference is that the arguments are passed as an array when we are using apply.

Example-

Code-

const wizard = {
  name: 'Pranav',
  health: 100,
  heal: function(num1, num2) {
    this.health += num1 + num2;
  }
}

const archer = {
  name: 'Robin',
  health: 50
}

wizard.heal.apply(archer, [20, 30])
console.log(archer)

Output-

{
  health: 100,
  name: "Robin"
}

bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

It let’s us explicitly define the value of this when calling a function.
It returns a new function that we can call.

Example-

Code-

const wizard = {
  name: 'Pranav',
  health: 100,
  heal: function(num1, num2) {
    this.health += num1 + num2;
  }
}

const archer = {
  name: 'Robin',
  health: 50
}

const healArcher = wizard.heal.bind(archer, 50, 60);
healArcher()
console.log(archer)

The js engine is creating a new instance of the heal function and binding its this object to archer.

Output-

{
  health: 160,
  name: "Robin"
}

Credits- Himanshu Satija

Currying-

Currying is a technique of evaluating function with multiple arguments, into sequence of functions with single argument.

Example 1-

Code-

function volume(length) {
      return function(width) {
         return function(height) {
            return height * width * length;
         }
      }
   }
console.log(volume(11)(2)(3))

Output-

Example 2-

Code-

function sum(a, b) {
    return a+b;
}

var sumWithThree = sum.bind(this, 3);
console.log(sumWithThree(4));

Output-

Partial Application-

Partial application starts with a function. We take this function and create a new one with one or more of its arguments already “set” or partially applied. It will help reduce the number of parameters needed for our functions.

Both currying and partial application are patterns that allow us to call functions with some of their parameters, and provide the rest later.
They both are important concepts in Functional programming.

Example-

Code-

const multiply = (a, b, c) => a * b * c
const partialMultiplyBy5 = multiply.bind(null, 5)
partialMultiplyBy5(10, 20)

Output-

Difference b/w Currying and Partial Application-

Partial application is more or less a pattern of calling a function. You can partially apply any function.
Currying is more about a form of the function. To be able to use currying, you have to explicitly create a new function that is a curried version of the original one.

Advantages of using Currying or Partial Application-

They both help us create specialized versions of generic functions, thus removing duplication and making the code easier to compose.
Another benefit of using partial application and currying is that they can help us create more readable code.

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 4.2: Scope Chains and their working, Lexical and Variable Environments

Pranav — Sun, 16 Jan 2022 20:25:36 +0000

What is a Scope Chain?

The Scope Chain is the hierarchy of scopes that will be searched in order to find a function or variable.

Credits- Anuradha Aggarwal

When a variable is used in JavaScript, the JavaScript engine will try to find the variable’s value in the current scope. If it could not find the variable, it will look into the outer scope and will continue to do so until it finds the variable or reaches global scope.
If it’s still could not find the variable, it will either implicitly declare the variable in the global scope (if not in strict mode) or return an error.
The Scope Chain is used to resolve variables. When asked to resolve a variable, JavaScript always starts at the innermost level of the code nest and keeps jumping back to the parent scope until it finds the variable or any other resource it is looking for.
The scope chain can simply be defined as an object that contains a bunch of other objects. Each object has the variable-to-value mapping for its particular execution context.

Example-

Code-

let c = 10
function a() {
  let b = 25;  
  console.log('Inside function a()');
}
a();

Sample Scope chain object for the function `a`-

functionLexicalEnvironment = {
  environmentRecord: {
      b    : 25,
  }
  outer: {
    c  : 10,
  }
}

Lexical Environment-

A lexical environment is a structure that holds identifier-variable mapping.
(here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function object and array object] or primitive value).

Simply put, a lexical environment is a place where variables and references to the objects are stored.
A lexical environment conceptually looks like this:

lexicalEnvironment = {
  environmentRecord: {
    <identifier> : <value>,
    <identifier> : <value>
  }
  outer: < Reference to the parent lexical environment>
}

Let's understand this with the help of an example-

let language = 'JS';
function a() {
  let b = 25;  
  console.log('Inside function a()');
}
a();
console.log('Inside global execution context');

The JavaScript engine creates a new lexical environment to store the variables and functions defined in the global scope when it establishes a global execution context to execute global code. As a result, the lexical environment for the global scope will be as follows:

globalLexicalEnvironment = {
  environmentRecord: {
      language    : 'JS',
      a : < reference to function object >
  }
  outer: null
}

Because there is no outer lexical environment for the global scope, the outer lexical environment is set to null.
When the engine establishes an execution context for the a() function, it also creates a lexical environment in which variables defined in the function can be stored while the function is being executed. As a result, the function's lexical environment will look like this:

functionLexicalEnvironment = {
  environmentRecord: {
      b    : 25,
  }
  outer: <globalLexicalEnvironment>
}

Because the function is surrounded by the global scope in the source code, the function's outer lexical environment is set to the global lexical environment.
When a function finishes executing, its execution context is removed from the stack, but its lexical environment may or may not be erased from memory, depending on whether it is referenced by any other lexical environments in their outer lexical environment property.

Variable Environment-

The variable environment is a representation of the lexical environment’s local memory. In the environment record, the lexical environment stores variables as well as other information such as the infamous this.

We've previously used one variable environment, the global environment's memory, which holds variables that are universally available throughout the script. While the lexical environment refers to this global environment, the variable environment only refers to variables created within the scope of the provided function within the lexical environment.
The variable environment maps the local scope of a given environment. In other words, the variable environment stores those variables defined within the given working code block {}.

Credits- Benjamin Gruenbaum

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 4.1: Global, Function and Block Scope, Lexical vs Dynamic Scoping

Pranav — Sun, 09 Jan 2022 17:25:03 +0000

What is Scope?

In simple terms, Scope can be defined as the space in which variables and statements are accessible.

Scope determines the accessibility of variables, objects, and functions from different parts of the code.

Let's understand this definition with an example-

Example-

var x = 2

function myFunc(){
  console.log(x)
}

myFunc function is able to access the variable x thus we can say that x is in scope of myFunc.

Before ES6 (2015), there were only 2 types of scope (Global and Function) but in ES6, a new scope was introduced, namely the Block Scope.

3 types of Scopes:

Credits-Nemo

1. Global Scope-

Variables declared globally/ in the global execution context have a global scope.
They can be accessed from anywhere in the program.
No matter whether they are declared using var, let or const, variables declared in global scope behave similarly.

Example-

var x = 2

function myFunc(){
  console.log(x)
}

Here the variable x is declared in global scope thus it is available for use across the entire program.

As explained in Part 3 of this Advanced JavaScript series, if a variable is declared without var, let or const keyword, it always gets declared in the global scope.

Example-

function myFunc(){
  x = 1
}
console.log(x)

Here the code gives output 1 since the variable x gets declared in Global scope.

2. Function/Local Scope-

Variables declared within a JavaScript function, become LOCAL to the function.
These variables can only be accessible from within the function.
These variables are removed from the memory when the execution of the function is completed thus the variable names can be reused in some other functions.
All var, let and const work similarly in Function scope.

Example-

function myFunc(){
  let x = 1
  console.log(x)
}

Here the variable x is declared in the function/local scope thus accessible only from inside the function.

3. Block Scope-

The two new keywords for variable declaration, that is let and const that were introduced in ES6 are Block Scoped.
Any variable that is declared within a pair of braces { } or a block and cannot be accessed from outside it are said to be Block Scoped.

Example-

var x = 1
if(x){
  var y = 2
  let z = 3
  console.log("hello world")
}
console.log(y)
console.log(z)

Output-

2
Uncaught ReferenceError: z is not defined

Here, the variable y cannot be accessed from outside the if block because variables declared using let are Block Scoped whereas variables declared using var are not.

Lexical vs Dynamic Scoping-

In Lexical(Static) Scoping, the structure of the program source code determines what variables you are referring to.
In Dynamic Scoping, the runtime state of the program stack determines what variable you are referring to.

Lexical scoping refers to the variables in the location of a function's definition, whereas dynamic scoping refers to the variables in the location of a function's invocation.

Let's understand with the help of an example.

Example-

Code-

function a() { 
    console.log(i);
}

function b() {
    var i = 1;
    a();
}

var i = 0;

b();

Explanation-

We have two function, a and b. a logs out the value of i which is set globally to 0. b sets its value to 1, and calls a. If we call b, it will log out 0. This is because — while a doesn't have a variable called i — a has access to the enclosing scope where the function is defined. And in the global scope, we have an i which is set to 0. This is called lexical scoping.

In dynamic scoping, the value of i will be 1. This is because instead of looking at where the function is defined, it looks at where it is called from. It sees from the call stack that it has been called from b, which sets the value of i to be 1.

As you can see, lexical scope looks at where a function is declared, where dynamic scope refers to where a function is called from.

Credits-Thang Tran Duc

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 3: Weird JS behavior, Strict Mode and Hoisting, Temporal Dead Zone

Pranav — Fri, 07 Jan 2022 09:58:51 +0000

Weird JS Behavior

Code-

Output-

50
50

In the code sample, we didn't even explicitly declare the variable but we are able to use without any error and it is available in global scope

Explanation-

Older versions of JS allowed us to create variables without explicitly declaring them using the var, let or the const keyword.
There are a lot of downfalls to this, some of them being-

Downfalls-

JS creates these variables in global scope by default thus anyone can access them from outside the function and change them.
You can mistype a variable name and JS won't even give an error, instead it will create a new variable in the global scope because of this behavior.

Solution: Strict Mode

Introduction-

The "use strict" directive was new in ECMAScript version 5 indicating use of strict mode while running the code.
It is supported by all the modern browsers and since it is only a string, even older versions that don't understand it won't throw any error.
It prevents all the bad code practices in previous JS versions from turning into actual errors.
If declared at the beginning of a script, it has global scope whereas if it is used inside the function then it's scope is only for that block/block scope.

Declaration example-

"use strict";
x = 3.14;  // this will cause error

Issues that "use strict" fixes-

If you mistakenly mistype a variable, if ran in strict mode, it will throw an error instead of creating a new global variable.
It prevents us from assigning values to non-writable properties by throwing an error. This wasn't the same in previous versions.
Keywords reserved for future JavaScript versions can not be used as variable names in strict mode.
Prevents us from duplicating parameter names.
Prevents us from writing to a read-only properties.
Prevents us from writing to a get-only property.

"use strict";
const obj = {get x() {return 0} };

obj.x = 3.14;            // This will cause an error

7.Prevents us from deleting an undeletable property.

"use strict";
delete Object.prototype; // This will cause an error

8.Prevents us from using Octal numerical literals and Octal escape characters. Example-

"use strict";
let x = 010; // gives error
let x = "\010"; // gives error

Check this article for all the things that are not allowed in "use strict".

Note- The "use strict" directive is only recognized at the beginning of a script or a function.

Hoisting-

Hoisting is JavaScript's default behavior of moving all the declarations at the top of the scope before code execution.
It could be variable declarations or function declarations or even class declarations. Credits-tutorialsteacher

Example of variable hoisting-

Code-

x = 5 // doesn't give any error because of hoisting
console.log(x)

var x // this gets hoisted to the top of the scope

Output-

Example of function hoisting-

Code-

console.log(hello()) // doesn't give any error because of hoisting

function hello(){ // this gets hoisted to the top of the scope
    return "hello world"
}

Output-

"hello world"

Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value such as undefined. A ReferenceError exception will be thrown if a variable declared with let or const is read before it is initialized. This is because they stay in a Temporal Dead Zone before they are explicitly declared. We will learn more about Temporal Dead Zone ahead.

Code-

console.log(x)

let x
x = 5

Output-

Uncaught ReferenceError: Cannot access 'x' before initialization

Code-

console.log(x)

const x = 5

Output-

Uncaught ReferenceError: Cannot access 'x' before initialization

All JavaScript declarations are hoisted but not for initialization. Initialization in variables using var keyword are partially hoisted but those using let or const keyword are not hoisted at all and give error.
Partial hoisting means that the JS engine before running the code line by line already knows that the variable exists and has some memory allocated (because of hoisting) but the value for it hasn't been set/ stored yet (it gets set when we actually reach that line of code) thus a default value of undefined is set and returned. This partial hoisting happens in case of variable initialization using var keyword.

Credits- Sabih Rehman

Example 1

Code-

console.log(x)

var x = 5 // this is initialization, not a declaration

Output-

undefined

This code does not work because initializations are not hoisted. It returns undefined because we have used var here that leads to partial hoisting as discussed above.

Example 2

Code-

console.log(x)

let x = 5 // this is initialization, not a declaration

Output-

Uncaught ReferenceError: Cannot access 'x' before initialization"

This is because variable initialization using let or const don't get hoisted.

Temporal Dead Zone-

The variables declared using let and const are not accessible before they are initialized with some value, and the phase between the starting of the execution of block in which the variable is declared using let or const till that variable is being initialized is called Temporal Dead Zone for the variable.

Accessing the variable before the initialization results in a ReferenceError.

Code-

console.log(x)

let x
x = 5

Output-

Uncaught ReferenceError: Cannot access 'x' before initialization

The term "temporal" is used because the zone depends on the order of execution (time) rather than the order in which the code is written (position). For example, the code below works because, even though the function that uses the let variable appears before the variable is declared, the function is called outside the TDZ.

Code-

{
    // TDZ starts at beginning of scope
    const func = () => console.log(letVar); // OK

    // Within the TDZ letVar access throws `ReferenceError`

    let letVar = 3; // End of TDZ (for letVar)
    func(); // Called outside TDZ!
}

Output-

Temporal Dead Zone tricky example-

function test(){
   var foo = 33;
   if(foo) {
      let foo = (foo + 55); // ReferenceError
   }
}
test();

The if block is evaluated because the outer var foo has a value. However due to lexical scoping this value is not available inside the block: the identifier foo inside the if block is the let foo. The expression (foo + 55) throws a ReferenceError because initialization of let foo has not completed — it is still in the temporal dead zone.

Connect with me-

Appendix-

References-

All codes implemented using JS Fiddle

Advanced JavaScript Series - Part 1: Behind the scenes (JavaScript Engine, ATS, Hidden Classes, Garbage Collection)

Pranav — Wed, 05 Jan 2022 09:46:16 +0000

Introduction-

JavaScript is a single-threaded, synchronous programming language. It means that when a script is run, the JS engine runs the code line by line, beginning at the top and working its way down.

Behind the scenes-

Credits- Yair Cohen

1. JavaScript Engine

Credits- Yair Cohen

Every JavaScript program requires a specific environment to execute because our computers and other machines do not understand JavaScript syntax.
They only understand Machine Code thus every environment has an engine that converts this JS human understandable syntax to Machine Code.
There are many different engines available out there with the most popular being the Google Chrome's V8 engine, Firefox SpiderMonkey, JavaScriptCore by Safari etc.
ECMAScript is a JavaScript standard that helps ensure interoperability of JS web pages by keeping a check on how all the different engines interpret the JavaScript language.

2. Parser/ Syntax Parser

Credits- Yair Cohen

Every JS engine has a parser in it which knows all the JS syntax rules and checks for any syntax or grammar errors.
If found, it gives out an error otherwise the Parser generates an Abstract Syntax Tree that is then passed on to aid the code execution.

3. Abstract Syntax Tree (AST)

Credits- Yair Cohen

It is a tree like structural representation of the JS code.
The main purpose for creating an AST is that it helps understand the code better and helps make the translation to machine code much easier.
You can see how an AST is formed & represented on AST Explorer.

4. Interpreter

Credits- Yair Cohen

The interpreter takes the AST and parses and transform it into an Intermediate Representation.

Intermediate Representation-

Intermediate Representation acts as an intermediate step between translation from an abstract language such as JS to machine code.
The most famous Intermediate representation amongst JS engines is Bytecode. Credits- Satyabrata Jena

Need for Intermediate Representation(IR)-

Unlike Machine code that are hardware dependent, IRs are universal thus allowing more mobility and easier conversions.
It is easier to optimize code when it is in IR than it being in machine code.

5. Compiler

Credits- Yair Cohen

The main purpose of a compiler is to take the Intermediate representation received from the previous step, perform optimizations and then convert it to Machine code.

Difference between Interpreter and a Compiler

An interpreter and a compiler are different in the way that an interpreter translates your code and runs it line by line, whereas a compiler instantaneously converts all code into machine code before executing it.
Each has advantages and disadvantages; a compiler is quick but complex and difficult to start, whereas an interpreter is slower but simpler.
With that in mind, there are three methods for converting high-level code to machine code and running it:

Interpretation – this technique uses an interpreter to go through the code line by line and execute it (not so efficient).
Ahead of Time Compilation (AOT) - entails a compiler first compiling and then executing the complete code.
Just-In-Time Compilation (JIT) — A hybrid of the AOT and interpretation strategies, a JIT compilation approach aims to combine the best of both worlds by performing dynamic compilation while also allowing for optimizations, resulting in a compilation process that is significantly sped up.

A JIT compiler is used by the majority of JS engines, although not all of them.
Checkout this article for a more complete explanation on the topic.

Extras-

1. Hidden Classes

As we all know, JavaScript is a dynamic programming language.
While this is a benefit of JavaScript's dynamic nature, it also has a disadvantage. In memory, JS objects are stored in what is known as a HASH TABLE. When compared to the contiguous buffer method used in non-dynamic programming languages, retrieving a property on an object with hash tables is substantially slower.
Hidden classes, a mechanism provided by the V8 engine, gives the answer. Hidden classes are used to reduce the time it takes to retrieve a property from an object. This is accomplished by sharing hidden classes across similar-looking objects. When a JavaScript object is created, a hidden class is assigned to it.
The length of an offset to reach the hidden class can easily be determined based on the property’s type, whereas this is not possible in JavaScript where a property’s type can change during runtime.
Hidden Classes are attached at runtime.
When a property is introduced to an object, a "class transition" occurs, in which the previous hidden class is replaced by a new hidden class that includes the new property. Let's look at an example to help you understand.

function cupcake(frosting,sprinkles) {
    this.frosting = frosting;
    this.sprinkles = sprinkles;
}

We have a constructor function cupcake that takes as argument the frosting type and the sprinkles type and whenever this function is invoked; we get an object that is our new Cupcake!
V8 creates a hidden class called Class0 when it sees our cupcake function is declared. When V8 notices that frosting has been added as a property on the cupcake on line 2, it changes class0 with the new frosting property and switches from class0 to a new hidden class called class1. The same happens when sprinkles are added to the cupcake and class transition occurs from class1 to class2.
Checkout this article for a more in-depth explanation on hidden classes.

2. Inline Caching

Inline caching relies upon the observation that repeated calls to the same method tend to occur on the same type of object. [2]
V8 keeps a cache of the types of objects that have been supplied as parameters in recent method calls and uses that data to guess what type of object will be passed as a parameter in the future.
If V8 can make a good guess about the type of object that will be provided to a method, it can skip the process of finding out how to access the object's properties and instead rely on previously stored information from lookups to the hidden class. Credits- Yair Cohen

Relation between Hidden classes and Inline caching

When a method on a specific object is called, the V8 engine must look up the hidden class of that object to calculate the offset for accessing a specific attribute. V8 skips the hidden class lookup after two successful calls to the same hidden class and simply adds the offset of the property to the object pointer itself. The V8 engine thinks that the hidden class hasn't changed for all subsequent calls to that method, and leaps directly into the memory address for a given field using offsets recorded from prior lookups, considerably increasing execution performance.
The importance of objects of the same type sharing hidden classes is due to inline caching. V8 will not be able to use inline caching if you create two objects of the same type but with different hidden classes (as we did in the previous example). This is because, despite the fact that the two objects are of the same type, their corresponding hidden classes assign different offsets to their properties.
JS being dynamically typed, occasionally the hidden class assumption about the object might be wrong. In that case V8 goes for the original call that is searching from the Hash Table that makes the data fetching slower.

Optimizations to take advantage of Hidden Classes and Inline Caching-

Try to assign all properties of an object in its constructor.
If still(for some reason), you are dynamically adding new properties to the objects, always instantiate them in the SAME ORDER so that hidden classes may be shared among them because then the V8 engine is able to predict them thus assigning the same hidden class to both the objects.
Below is an example of a good and a bad practice for this use case-

Bad Practice-

1  function Point(x,y) {
2    this.x = x;
3    this.y = y;
4  }
5 
7  var obj1 = new Point(1,2);
8  var obj2 = new Point(3,4);
9
10 obj1.a = 5;
11 obj1.b = 10;
12
13 obj2.b = 10;
14 obj2.a = 5;

Up until line 9, obj1 and obj2 shared the same hidden class. However, since properties a and b were added in opposite orders, obj1 and obj2 end up with different hidden classes.

Good Practice-

1  function Point(x,y) {
2    this.x = x;
3    this.y = y;
4  }
5 
7  var obj1 = new Point(1,2);
8  var obj2 = new Point(3,4);
9
10 obj1.a = 5;
11 obj2.a = 5;
12
13 obj1.b = 10;
14 obj2.b = 10;

3. Garbage Collection

JavaScript is a Garbage collected language.
Meaning that if we allocate some memory inside a function, JavaScript will automatically deallocate that memory once the function finishes executing or is out of scope.
But the issue of Memory Leak still prevails in JS like in other languages. Thus it is important to ensure good memory management on our part.
JS collects garbage with a mark and sweep method.

Credits- Andrei Neagoie

Open code in JS Fiddle
In this example, a memory leak is created. By changing the value of person, we leave the previous value in the memory heap thus causing a leak.
Best practice against memory leaks are to avoid global instantiation, instead we should instantiate only inside functions, where required.

Forem: Pranav

What were your reasons to shift to Linux OS from a MAC/ Windows OS ?

Advanced JavaScript Series - Part 9: Constructor Functions, Object Oriented, `new` keyword

Constructor Functions-

Example-

Code-

Output-

Built-in constructors-

Example-

Code-

Output-

Classes-

Constructor method-

Example-

Code-

Output-

Inheritance in Classes-

Example-

Code-

Output-

new keyword in JS

Example-

Code-

Output-

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 8: The 2 Pillars~ Closures & Prototypal Inheritance

Closures-

1. Memory efficient

Example 1-

Example 2-

Code-

Output-

2. Encapsulation

Example-

Code-

Prototypal Inheritance-

Example 1-

Code-

Output-

Example 2-

Code-

Output-

Example to help understand-

Code-

Another way of creating a prototype chain Object.create()

Example-

Code-

Output-

Tricky example to test knowledge about prototype chain-

Code-

Output-

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 7: First Class Citizens & Higher Order Functions

First Class Citizens

1. Ability to treat functions as values-

Code-

Output-

2. Ability to Pass functions as arguments-

Code-

Output-

3. Ability return a function from another function-

Code-

Output-

Higher Order Functions-

Simplified Example-

Code-

Output-

Connect with me-

Appendix-

References-

Advanced JavaScript Series - Part 6.2: Pass by Value & Pass by Reference, Shallow & Deep Copy, Type Coercion

Pass by Value-

Example-

Code-

Output-

Pass by Reference-

`new` keyword in JS

Another way of creating a prototype chain `Object.create()`

`this` keyword-