Creating User Interfaces Using 'Variables'by@d0nutintern
1,181 reads
1,181 reads

Creating User Interfaces Using 'Variables'

by K. Kaushik ReddyJune 8th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

`var` has been the traditional way of declaring variables in JS but it has got its own drawbacks.
featured image - Creating User Interfaces Using 'Variables'
K. Kaushik Reddy HackerNoon profile picture

The world is all about Variables !

The mischief of var

var has been the traditional way of declaring variables in JS but it has got its own drawbacks..

Now let us see the functioning of var in action.

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, secondFunction accessed the variable a declared in firstFunction. At any point that secondFunction gets called, the value of a will be tied to the value of a in firstFunction. Even if secondFunction is called once firstFunction is done running, it will be able to access and modify 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  let and 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;

//now call fun1()

// now try to access localVar in global scope

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;




let and const: the new members of the family

let is all about the Block scoping

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 a and ba’s scope is limited to the body of f while b’s scope is limited to the containing if statement’s block.

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 const doing then ?

All variable declarations other than those you plan to modify should use const

  • [ ]undefinedIt cannot be updated or re-declared into the scope.
    • [ ](but let can be updated but cannot be re-declared into the scope.)
  • [ ]undefinedIt cannot be declared without initialization.
    • [ ]undefinedlet an be declared without initialization.

That’s all folks!