JavaScript Lexical Scope Explained shortly

Hey there, JavaScript enthusiasts! Today, let's talk about lexical scope and why it's a big deal in the JavaScript world.

So, lexical scope is all about how variables are handled in your code. It basically means that the scope of a variable is determined by where it's declared in your code, rather than when it's actually used.

Let me break it down for you with a relatable example. Imagine you're building a cool e-commerce website. You've got this function called calculateTotalPrice that does exactly what it says - it calculates the total price of a customer's shopping cart. Inside this function, you've got a variable called taxRate, which represents the percentage of tax applied to the total price.

Here's a snippet of what it might look like:

function calculateTotalPrice(items) {
  const taxRate = 0.1; // 10% tax rate
  let totalPrice = 0;

  for (let item of items) {
    totalPrice += item.price;
  }

  const totalWithTax = totalPrice * (1 + taxRate);

  return totalWithTax;
}

In this example, taxRate is declared within the calculateTotalPrice function. This means that the scope of taxRate is limited to that function and any nested functions or blocks inside it. It can't be accessed from outside the function.

Now, let's say you want to calculate the total price including tax for different customers, but with different tax rates. You can create another function called calculateTotalWithTax that takes both the items and the tax rate as parameters.

Here's what that might look like:

function calculateTotalWithTax(items, taxRate) {
  let totalPrice = 0;

  for (let item of items) {
    totalPrice += item.price;
  }

  const totalWithTax = totalPrice * (1 + taxRate);

  return totalWithTax;
}

In this case, the taxRate parameter is declared within the calculateTotalWithTax function. This creates a new scope for the variable, separate from the taxRate in the previous example. So now, you can provide different tax rates for different customers while still using the same function to calculate the total price with tax.

Understanding lexical scope allows you to organize your code better and control how variables are accessed and used based on where they're declared. It helps you avoid conflicts with variable names and provides a clear and predictable way to handle variables.

I hope this real-world example helps you grasp the idea of lexical scope in JavaScript. By embracing it, you'll be able to write cleaner and more maintainable code.

Follow me in X/Twitter

Happy coding, folks!