DEV Community

Cover image for Scope in JavaScript
Mohammad Moiz Ali
Mohammad Moiz Ali

Posted on • Edited on • Originally published at makstyle119.Medium

Scope in JavaScript

#javascript #makstyle119 #beginners #javascriptscope

Scope is a fundamental concept in JavaScript that dictates how variables and functions are accessed and used within a program. Understanding the scope in JavaScript is essential to writing efficient and error-free code. In this blog post, we'll explore what scope is and how it works in JavaScript.

What is scope in JavaScript?

Scope in JavaScript refers to the visibility and accessibility of variables and functions within a program. In other words, it determines where in the code a variable or function can be accessed and used. There are two main types of scope in JavaScript: global scope and local scope.

Global Scope:

Variables and functions declared outside of any function or block have global scope, meaning they can be accessed and used from anywhere within the program. Global scope is considered the outermost level of scope and is accessible from all lower levels of scope.

For example:

In this code, we declare a variable myVar in the global scope and then define a function called myFunction. Within myFunction, we can access myVar because it is defined in the global scope.

Local Scope:

Variables and functions declared within a function or block have local scope, meaning they can only be accessed and used within that function or block. Local scope is considered an inner level of scope and is not accessible from higher levels of scope.

For example:

In this code, we define a function called myFunction and declare a variable myVar within the function. Within the function, we can access myVar because it is defined within the local scope of the function. However, outside of the function, myVar is not defined and attempting to access it throws an error.

Nested Scope:

In JavaScript, it's also possible to have nested scopes, where a function or block is defined within another function or block. In this case, the inner function or block has access to its own local scope as well as the outer scope.

For example:

In this code, we define a function called myFunction that declares a variable myVar within its local scope. Within myFunction, we define another function called innerFunction that also has access to the myVar variable in the outer scope. When we call innerFunction, it logs the value of myVar in the inner scope, which is "Goodbye World!". Finally, outside of the function, we can access the value of myVar in the global scope, which is "Hello World!".

Conclusion:

Scope is a fundamental concept in JavaScript that determines how variables and functions are accessed and used within a program. By understanding the different types of scope, developers can write more efficient and error-free code. It's important to use scope with care and consideration, and to be aware of its potential pitfalls, such as variable shadowing and global variables

Top comments (1)

Collapse
 
matpk profile image
Matheus Adorni Dardenne •

Scopes in Javascript can be very confusing sometimes. Yesterday I came across this situation where I was trying to write a function like this:

class User {
  roles = [{ slug: 'hr-assistant' }]
  hasRole(role) {
    return this.roles.some(({ slug }) => slug === role)
  }
}

// and then use it somewhat like this:

const requiredRoles = ['hr-assistant']
const user = new User()
const userHasEveryRequiredRole = requiredRoles.every(user.hasRole)
Enter fullscreen mode Exit fullscreen mode

And I was getting "cannot read property roles of undefined". The keyword this wasn't referencing the object, I had to bind it to get it working.

const requiredRoles = ['hr-assistant']
const user = new User()
const userHasEveryRequiredRole = requiredRoles.every(user.hasRole.bind(user))
Enter fullscreen mode Exit fullscreen mode

Still looks clean, but I wish it would just work as it was before lol

Thank you for sharing.

Read next

guillaumesere profile image

Sortie de TypeScript 5.7 RC, nouvelle alternative à npm, avenir des frameworks JavaScript - Cette semaine en JS

Guillaume Sere -

lucasbrogni1 profile image

Removing code smells: Using dependency injection through Props in React

Lucas Brogni -

valeriavg profile image

Day 9: Terminal Forms 📇

Valeria -

zirkelc profile image

Buffer Logs and Flush Automatically on Error with Powertools for Lambda

Chris Cook -