JavaScript Recap: let, const, arrow functions

let, const, and arrow functions (ES6 Overview)

let, const, and arrow functions are key features introduced in ECMAScript 2015 (ES6) that have significantly changed modern JavaScript. They offer improvements in variable handling and function syntax over older methods, leading to cleaner and more predictable code.

let and const (variable declarations)

These keywords provide block-level scope, which is a major difference from the var keyword's function or global scope. This behavior helps prevent common bugs related to variable hoisting and redeclaration.

let

Block-scoped: The variable is only accessible within the if statement, for loop, or other block where it is defined.
Can be reassigned: You can change its value after initialization.
Cannot be redeclared: You cannot declare a new variable with the same name within the same scope.

Example:

//javascript
let count = 1;
if (true) {
  let count = 2; // This is a different `count` variable within the block
  console.log(count); // Output: 2
}
console.log(count); // Output: 1

const

Block-scoped: Like let, const is block-scoped.
Cannot be reassigned: You cannot change its value after initialization. This makes it ideal for variables that should not change, improving code predictability.
Must be initialized: You must assign a value to a const variable when you declare it.
Object and array behavior: While the variable's reference cannot be reassigned, the properties of an object or the elements of an array declared with const can still be modified.

Example:

//javascript
const user = { name: 'Alice' };
user.name = 'Bob'; // This is allowed
console.log(user.name); // Output: Bob

// user = { name: 'Charlie' }; // This is not allowed and will throw a TypeError

Recap table

Feature var let const
Scope Function-scoped Block-scoped Block-scoped
Reassignable Yes Yes No
Redeclarable Yes No No
Hoisting Hoisted with undefined value Hoisted, but not initialized Hoisted, but not initialized

Arrow functions (=>)

Arrow functions provide a more concise syntax for writing function expressions and have a significant difference in how they handle the this keyword.

Syntax and variations

Concise body: For single-expression functions, you can omit the curly braces {} and the return keyword for an implicit return.
Single parameter: If there is only one parameter, you can omit the parentheses ().
Multiple parameters: For zero or multiple parameters, parentheses are required.

Example:

//javascript
// Multiple parameters
const add = (a, b) => a + b;

// Single parameter
const square = x => x * x;

// No parameters
const sayHello = () => "Hello!";

// Block body with explicit return
const complexOperation = (a, b) => {
  const sum = a + b;
  return sum * 2;
};

this binding

This is the most important difference between arrow functions and regular functions.
Lexical this: Arrow functions do not bind their own this. Instead, they inherit the this value from the enclosing lexical scope (the code that contains the arrow function).
Solves this context issues: This behavior is particularly useful in event handlers or callbacks where you need to access properties of the surrounding object.

Example:

//javascript
function Timer() {
  this.seconds = 0;

  // Arrow function correctly inherits `this` from the Timer object
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();

Key differences from regular functions

Aspect Arrow Functions Regular Functions
Syntax Concise => syntax Standard function keyword
this Binding Inherits this from the parent scope Binds its own this, which depends on how the function is called
arguments object Does not have its own arguments object Has its own arguments object
Constructors Cannot be used with new as constructors Can be used as constructors

🔁 JavaScript Recap: let, const, and Arrow Functions

🔹 let

• Used to declare variables that can be reassigned.
• Block-scoped (only accessible within the block they are defined).
• Not hoisted like var (or hoisted but not initialized).

let count = 5;
count = 10; // ✅ allowed

🔸 const

• Used to declare variables that cannot be reassigned.
• Also block-scoped.
• Must be initialized at the time of declaration.
• Note: Objects and arrays declared with const can still have their contents modified.

const name = "Alice";
// name = "Bob"; ❌ Error

const user = { age: 25 };
user.age = 30; // ✅ allowed (modifying object property)

⚡ Arrow Functions

• Shorter syntax for writing functions.
• Do not have their own this, arguments, or super.
• Great for callbacks and concise function expressions.

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Single parameter, no parentheses needed
const square = x => x * x;

// No parameters
const greet = () => console.log("Hello!");

✅ Summary

• Use let when the value will change.
• Use const for constants and when you don’t plan to reassign.
• Use arrow functions for cleaner, shorter function expressions—especially in callbacks.