The world is all about ! Variables The mischief of var has been the traditional way of declaring variables in JS but it has got its own drawbacks.. var Now let us see the functioning of in action. var Consider an example function firstFunction() {
  var a = 10;
  return function secondFunction() {
    var b = a + 1;
    return b;
  };
}
var g = firstFunction();
secondFunction(); // returns '11' What is the intuition that one can build here? We can declare variables inside and outside(including global window scope) of a function. We also can access variables from other functions. In the above code, accessed the variable declared in . At any point that gets called, the value of will be tied to the value of in . Even if is called once is done running, it will be able to access and modify . secondFunction a firstFunction secondFunction a a firstFunction secondFunction firstFunction a Try this now, what does the below code return? function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns what ?  //%{rendu}% Scopes 🔭 As we have made some observations; bluntly put the scopes in JS are of three kinds: Global scope Function scope (sometimes local scope) Block { } scope (ES6 introduced and ) let const {
  let val1 = 2;
}
// val1 can NOT be used here

#####################################

{
  var val2 = 3;
}
// val2 CAN be used here


######### TRY IN BROWSER CONSOLE ###########

var globalVar =5; //window scope

function fun1() {
    var localVar = 10;
    console.log(globalVar);
}

//now call fun1()
fun1();

// now try to access localVar in global scope
console.log(localVar); what if a local scoped variable & a global scopes variable have the same name ? ans: Generally, it is not a good coding practice. Yet, to say the preference will be given to the local variable. Try in console: var a =10; function fun() { var a = 5; console.log(a); } fun(a); and : the new members of the family let const is all about the Block scoping let function f(input: boolean) {
  let a = 100;
  if (input) {
    // Still okay to reference 'a'
    let b = a + 1;
    return b;
  }
  // Error: 'b' doesn't exist here
  return b;
} Here, we have two local variables and . ’s scope is limited to the body of while ’s scope is limited to the containing statement’s block. a b a f b if Re-declaring and shadowing function f(x) {
  var x;
  var x;
  if (true) {
    var x;
  }
}

//all declarations of x actually refer to the same x, and this is perfectly valid. 
//This often ends up being a source of bugs. 
//Thankfully, let declarations are not as forgiving.

let x = 10;
let x = 20; // error: can't re-declare 'x' in the same scope

function g() {
  let x = 100;
  var x = 100; // error: can't have both declarations of 'x'
} What is doing then ? const All variable declarations other than those you plan to modify should use const undefined [ ] It cannot be updated or re-declared into the scope. (but can be updated but cannot be re-declared into the scope.) [ ] let undefined [ ] It cannot be declared without initialization. undefined an be declared without initialization. [ ] let That’s all folks!

Creating User Interfaces Using 'Variables'

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Constants in Go Vs. Constants in Javascript

Once Upon a Time in Javascript: The const Keyword

Simplified JavaScript: How do I use var, let, and const?

10 Web Development Boosting Node.js Libraries and Frameworks

10 Cool Data Table Libraries with Advanced Features

Constants in Go Vs. Constants in Javascript

Once Upon a Time in Javascript: The const Keyword

Simplified JavaScript: How do I use var, let, and const?

10 Web Development Boosting Node.js Libraries and Frameworks

10 Cool Data Table Libraries with Advanced Features

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps