# JAVASCRIPT IP CHEATSHEET

1. SCOPE

The scope is an important concept that determines the accessibility of variables, functions, and objects. In JavaScript, there are two types of scopes

• Local Scope
• Global Scope

1. LOCAL SCOPE:

Variables that can be used in a specific part of the code are considered to be in a local scope. And these variables are called Local Variables. There are two types of local scope in JavaScript.

• BLOCK SCOPE
• FUNCTION SCOPE

1.1 BLOCK SCOPE

FORMAL DEFINATION: Block scope is an area within conditions (if or switch) or loops (for and while) or whenever you see {} it is a block. In a block, you can declare variables using const and let keywords. These variables exist only within the corresponding block.

UNDERSTANDING: What is a Block?

• Block aka compound statement is used to group JS statements together into 1 group. We group them within {...}

{
    var a = 10;
    let b = 20;
    const c = 30;
    // Here let and const are hoisted in Block scope,
    // While, var is hoisted in Global scope.
}

• Block Scope and its accessibility example

{
    var a = 10;
    let b = 20;
    const c = 30;
}
console.log(a); // 10
console.log(b); // Uncaught ReferenceError: b is not defined

Reason:

• In the BLOCK SCOPE; we get b and c inside it initialized as undefined as a part of hoisting (in a seperate memory space called block)
• While, a is stored inside a GLOBAL scope.Thus we say, let and const are BLOCK SCOPED.
• They are stored in a separate memory space which is reserved for this block. Also, they can't be accessed outside this block. But var a can be accessed anywhere as it is in global scope. Thus, we can't access them outside the Block.

1.2 FUNCTION SCOPE When you declare a variable in a function, that variable is only visible within the function.

function exec() {
   var ret = 'Inside exec';
   console.log(ret);
}
exec(); // 'Make a call'
console.log(ret); // Error: ret is not defined

`exec() function body creates a scope. The variable ret is only accessible within the function scope and if we try to access it outside of its scope then it'll throw an error.

SHADOWING

var a = 100;
  {
      var a = 10; // same name as global var
      let b = 20;
      const c = 30;
      console.log(a); // 10
      console.log(b); // 20
      console.log(c); // 30 
  }
console.log(a); // 10, instead of the 100 we were expecting. So block "a" modified val of global "a" as well. In console, only b and c are in block space. a initially is in global space(a = 100), and when a = 10 line is run, a is not created in block space, but replaces 100 with 10 in global space itself.

• So, If one has same named variable outside the block, the variable inside the block shadows the outside variable. This happens only for var.
• Let's observe the behaviour in case of let and const and understand it's reason

let b = 100;
{
    var a = 10;
    let b = 20;
    const c = 30;
    console.log(b); // 20
}
console.log(b); // 100, Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary memory space)(100)). Same is also true for *const* declarations.

ILLEGAL SHADOWING

  let a = 20;
  {
      var a = 20;
  }
  // Uncaught SyntaxError: Identifier 'a' has already been declared

• We cannot shadow let with var. But it is valid to shadow a let using a let. However, we can shadow var with let.
• All scope rules that work in function are same in arrow functions too.
• Since var is function scoped, it is not a problem with the code below

  let a = 20;
  function x() {
    var a = 20;
  }