CodeBlanks Logo Icon CodeBlanks
Login Register

Block scope

JavaScript course · Intermediate · Lesson 9/134

Learn block-scoped variables with let and const and how they differ from var.

Block scope

Block scope means that variables declared inside a { } block are valid only inside that block. let and const are block-scoped; whatever you put inside an if, a for, or just a { } cannot be reached from outside the block.

For example, when you write if (ready) { let status = 'active'; }, status lives only inside that if block. This is a clean way to keep variables only where they are needed.

var is not block-scoped

Variables declared with var are not block-scoped; they live throughout the function they belong to. So if you write var inside an if block, that variable is also reachable from outside the block.

This old behavior causes surprising bugs today. That is why modern code uses let and const instead of var. You will see var only when reading old code.

Exercise Use a block-scoped variable

Define a function called checkStock(count). Inside an if (count > 0) block, declare a variable named let status and set its value to "in stock". In the same block, log it with console.log(status). Outside, make a checkStock(5) call.

Show example solution 
function checkStock(count) {
  if (count > 0) {
    let status = "in stock";
    console.log(status);
  }
}

checkStock(5);

Test yourself

  1. What does this code output?

    if (true) {
  let x = 5;
}
console.log(x);
    • 5
    • ReferenceError
    • undefined
    • null
    Show answer

    ReferenceError — Correct. x declared with let is block-scoped and cannot be reached outside.

  2. Complete the block-scoped variable

    if (active) {
  let status = ____;
  console.log(status);
}
    Show answer 
    if (active) {
  let status = "active";
  console.log(status);
}

  3. Match the declaration to its scope

    let
    Block-scoped
    const
    Block-scoped, constant
    var
    Function-scoped
    function parameter
    Only inside the function

All lessons in Intermediate

1 Arrow functions

  1. Arrow function syntax
  2. Single-line and block body
  3. Parameters with arrows
  4. The this context
  5. Arrow vs function
  6. Summary - Arrow functions

2 Scope

  1. Global scope
  2. Function scope
  3. Block scope
  4. Variable shadowing
  5. Hoisting
  6. Summary - Scope

3 Closures

  1. What is a closure?
  2. Factory functions
  3. Immediately Invoked Function Expressions
  4. The module pattern
  5. Closure pitfalls
  6. Summary - Closures

4 DOM basics

  1. What is the DOM?
  2. getElementById
  3. querySelector
  4. querySelectorAll
  5. textContent and innerText
  6. Summary - DOM basics

5 DOM manipulation

  1. Creating elements with createElement
  2. appendChild and removeChild
  3. The classList API
  4. setAttribute and removeAttribute
  5. innerHTML and insertAdjacentHTML
  6. Summary - DOM manipulation

6 Events

  1. addEventListener basics
  2. Click events
  3. Mouse events
  4. Keyboard events
  5. The event object
  6. Summary - Events

7 Event handling

  1. Event bubbling
  2. stopPropagation
  3. Event delegation
  4. preventDefault
  5. once and passive options
  6. Summary - Event handling

8 Local storage

  1. localStorage basics
  2. sessionStorage
  3. Storing data with JSON
  4. Clearing storage
  5. Storage events
  6. Summary - Local storage

9 Project: To-do app

  1. Project: To-do app
  2. UI skeleton
  3. Adding a task
  4. Completing and deleting a task - DOM
  5. Project final - To-do DOM

10 Forms

  1. Accessing form elements
  2. Reading input values
  3. The form submit event
  4. Basic validation
  5. Checkbox and radio
  6. Summary - Forms

11 Timers

  1. setTimeout
  2. setInterval
  3. Stopping with clearInterval
  4. requestAnimationFrame
  5. Timer cleanup
  6. Summary - Timers

12 Callbacks

  1. Callback functions
  2. Asynchronous callbacks
  3. Error-first callbacks
  4. Callback hell
  5. Managing callbacks
  6. Summary - Callbacks

13 Promises

  1. What is a promise?
  2. Catching success with then
  3. Catching errors with catch
  4. Cleanup with finally
  5. Promise.all and Promise.race
  6. Summary - Promises

14 async/await

  1. async functions
  2. The await operator
  3. Async error handling
  4. Parallel await
  5. await expressions
  6. Summary - async/await

15 Fetch API

  1. fetch basics
  2. Reading JSON
  3. HTTP headers
  4. POST requests
  5. HTTP error handling
  6. Summary - Fetch API

16 Project: Weather panel

  1. Project: Weather panel
  2. UI and city input
  3. Fetching data with fetch
  4. Rendering data to the DOM
  5. Project final - Weather panel

17 Project: Gallery app

  1. Project: Gallery app
  2. Fetching the image list
  3. Building the gallery grid
  4. Large image view
  5. Project final - Gallery

18 Error handling

  1. Custom error classes
  2. Error propagation
  3. Multiple catch patterns
  4. Async error strategies
  5. Global error handling
  6. Summary - Error handling

19 JSON

  1. The JSON format
  2. JSON.parse
  3. JSON.stringify
  4. structuredClone
  5. JSON limitations
  6. Summary - JSON

20 Date and time

  1. Creating Date objects
  2. Reading date components
  3. Formatting dates
  4. Intl.DateTimeFormat
  5. Date arithmetic
  6. Summary - Date and time

21 RegExp basics

  1. RegExp syntax
  2. Character classes
  3. Quantifiers
  4. test and match
  5. replace and split with regex
  6. Summary - RegExp basics

22 Modules

  1. What is a module?
  2. Named export
  3. Default export
  4. The import statement
  5. Module vs script
  6. Summary - Modules

23 Intermediate final

  1. Challenge - DOM app
  2. Challenge - Async flow
  3. Challenge - Form and storage
  4. Challenge - Timers and animation
  5. Challenge - Modular structure