DEV Community: Devraj Sawant

4. Let, Const and Var

Devraj Sawant — Wed, 13 Aug 2025 17:37:23 +0000

We all know var,const and let are used for declaring variables, but why do we have 3 keywords for the same task? Let’s find out.

VAR:
Before ES6 was introduced, there was only one way of declaring variable and that was 'var'
but the problem was 'var' was function scope and not block scope

Function Scope
Function scope is basically the var can be accessed anywhere in the function, no matter in which scope{} it is written

function abc() {
  { var x = 10 }
  console.log(x); // it works even tho x was declared in scope 
}

this caused accidental variable leaks causing further bugs
to resolve this Issue, CONST and LET was introduced in ES6

CONST & LET
Both Const and Let was introduced in ES6
Both were Block scope
No redeclaration in same scope

Both are similar but the only and main difference is
Const value cannot be changed and reassigned
however Let can be reassigned value as many time as we want

Const are better for storing API_KEYS and other values which will stay constant
Let can be used in Loops and temporary data storage

let score = 0;
score += 10; 
console.log(score); // 10

const PI = 3.1416;

thank You!

3. Lexical Scope & Closure

Devraj Sawant — Tue, 12 Aug 2025 05:30:16 +0000

Lexical Scope
Lexical Scope is a term in JS which states that
'A function can use variable from where it is written, not where it is called'

function outerFunction(){
let fruit = 'apple';
  function innerFunction(){
    console.log(fruit) 
  }

innerFunction()
}

let fruit = 'mango';
outerFunction(); 


// above function call will log 'apple' and not 'mango' 
As function used fruit variable(apple) where function was written 
and not fruit(mango) where function was called

if the inner function can't find the variable in the outer function it will look for global variable
but if both are present, the variable in outer scope will be given more preference than the global variable by the inner function

Closure
According to Closure - A function can still use the variable from where it is created, even if the outer code is done running

function outer() {
  let x = 5;

  function inner() {
    console.log(x);
  }

  return inner;
}

const fn = outer(); // outer is finished here still whenever we call Fn we will get the value
fn(); // 5

2. Spread Operator

Devraj Sawant — Mon, 11 Aug 2025 17:11:31 +0000

const numbers = [1,2,3]
console.log(numbers) // [1,2,3]
console.log(...numbers) // 1,2,3

As you can see in above example, console logging the numbers gives the entire array but logging the same 'numbers' array with spread operators gives us the element inside an array and that is what spread operator is used for.

spread operator is a special feature of Javascript which helps to expand and get the elements of any iterables such as array,string,etc.

Spread simplifies multiple task such as concatenation, copying, etc

const arr1 = [1, 2, 3];
const copy = [...arr1]; // copy arr1 into copy -> [1,2,3]
const merged = [...arr1,...copy] // merge both in 1 -> [1,2,3,1,2,3]

Thank you.

1. Rest Parameter & why do we need it

Devraj Sawant — Sat, 09 Aug 2025 18:31:25 +0000

quick intro - Hey, I am a frontend dev trying to level up, and to do that i have decided to daily deep dive into one concept of JS/TS and share what i have learnt so others can engage, cross question and grow.

WHY ...REST ?
the problem before REST was one must know the exact number of parameters needed to be passed to the function, and if you don't know you need to use 'argument' object.

argument object :
argument object is a built-in object of JS which is available inside regular function and it holds all the argument passed to that functions, it is kind of dynamic array but it's not an array
it has index and length , but you can't use other array methods on it such as map,filter,etc

function showArguments() {
  console.log(arguments[0]) // 10
  console.log(arguments[1]) //20
}

showArguments(10, 20);

Drawbacks :

not a real array so you can't use map,filter,etc other array methods
arguments work only on normal functions not on arrow functions
store parameters on basis of index and not names
hard-to-read code

WHAT IS REST ?
Rest is a special parameter which is used to store all/remaining parameters into real array just like 'arguments' did

then why use rest?

Rest is real array so you can use all the array methods with it which was not possible with arguments
Rest works with arrow functions too unlike 'arguments'
rest parameters can be given any naming, improving readability
arguments contain only all the parameters passed but rest contains only the extras (other than explicitly defined)

example of Rest :

function greet(firstName, lastName, ...hobbies) {
  console.log("First Name:", firstName); // ABC
  console.log("Last Name:", lastName); // XYZ
  console.log("Hobbies:", hobbies); // ["Coding","Gaming","reading"]
}

greet("ABC", "XYZ", "Coding", "Gaming", "Reading");