1. What is Lexical Scoping

A variable defined outside of a function is accessible inside of a function. But variable defined inside is not accessible outside the function.

let a = "Arju";
function showName() {
  console.log(a);
}

showName();
// Arju

-----

function showName() {
  let a = "Arju";
}
console.log(a);

showName();
// a is not defined

2. What is Closure

It is bundling of two or more functions, where inner function have access to outer functions variables and methods even after the execution of the outer function.

function sum() {
  let a = 10;

  function add(b) {
    return a + b
  }

  return add
}

// sum will return a function that accepts a variable
const fn = sum()
console.log(fn(20))
// Output: 30

Not only variables, but it can access any methods of outer function declared at any level.

function x(a) {
  function y(b) {
    function z(c) {
      return a + b + c
    }
    return z
  }
  return y
}

console.log(x(1)(2)(3))
// Output: 6

3. Closures Scope Chain

Every closure has 3 scopes. Local Scope, Other Functions Scope & Global Scope

let className = "ABC";

function name() {
  let name = "Arjunan";
  function displayName(num) {
    console.log(num, name, className);
  }
  return displayName;
}

name()(1);

// 1 Arjunan ABC

4. What will be logged to console?

let count = 0;
(function printCount() {
  if (count === 0) {
    let count = 1; // Shadow outer count
    console.log(count);
  }
  console.log(count); // Outer Scope, Since count 1 is block scoped
})();

// Output:
1;
0;

5. Write a function that would allow you to do this?

function createBase(addNum) {
  let sum = addNum;

  function addNumber(num) {
    console.log(sum + num);
  }
  return addNumber;
}

const addSix = createBase(6);

addSix(10); // 16
addSix(21); // 27

6. How to Time Optimize?

If we are running some static code move that out of function logic into closures to save time.

function find(index) {
  let a = []
  for (let i=0; i<100000; i++) {
      a[i] = i*i
  }
  console.log(a[index])
}

console.time(6)
find(6)
console.timeEnd(6)

console.time(12)
find(12)
console.timeEnd(12)

// Before
36
6: 5.697998046875 ms
144
12: 3.622802734375 ms

-----

function find() {
  let a = []
  for (let i=0; i<100000; i++) {
      a[i] = i*i
  };
  return (function(index) {
      console.log(a[index])
  })
}

const findIdx = find()

console.time(6)
findIdx(6)
console.timeEnd(6)

console.time(12)
findIdx(12)
console.timeEnd(12)

// After
36
6: 0.16015625 ms
144
12: 0.030029296875 ms

7. How to use Closures to create a Private Counter?

function createCounter() {
  let counter = 0;

  function add(num) {
    counter += num;
  }

  function retrive() {
    console.log("Counter: " + counter);
  }

  return {
    add,
    retrive,
  };
}

const counter = createCounter();
counter.add(5);
counter.add(10);
counter.retrive();
// Counter: 15

8. What is a Module Pattern?

const Module = (function () {
  function privateMethod() {
    console.log("Private");
  }

  function publicMethod() {
    privateMethod();
    console.log("Public");
  }

  return { publicMethod };
})();

Module.publicMethod();
// Private
// Public

Module.privateMethod();
// Module.privateMethod is not a function

9. Make this only once

let view;

function likeTheVideo() {
  let counter = 1;

  return function () {
    if (counter === 1) {
      view = "Arjunan";
      console.log(view);
      counter++;
    } else {
      console.log("Already Liked");
    }
  };
}

const likeVideo = likeTheVideo();
likeVideo();
likeVideo();
likeVideo();

// Arjunan
// Already Liked
// Already Liked

10. Difference between Closure v/s Scope

If we have a inner function inside outer function. Inner function have access to variables and methods of outer function. This is Closure.

Scope is the boundary of variables and functions which we can use.

There are 3 Scopes

1. Inner Scope
2. Outer Scope
3. Global Scope