As a beginner learning javascript, the concept of “scope” was a particularly difficult one for me to grasp. However, as difficult as it was, understanding it has drastically transformed my ability to create and execute my code. Scope is the concept of whether or not we have access to variables and functions depending on where they are declared. When a variable is declared outside of a function, regardless if it’s declared with const, let, or var, that variable has what we call “global scope”. When a variable has global scope, it means we are able to access that variable everywhere in our program. Similarly, when a function is declared using the “function” declaration, accessing it has global scope because it isn’t nested within another function. With this being said, functions and variables that are declared within a function have what we call function scope. This means that they are only accessible within the function they were declared in and nowhere else.
For example, if I declared a function and variable such as:
function myFunction(){
const myVariable = “hello”
return myVariable;
}
If I tried to invoke “myVariable” outside of this function, javascript wouldn’t know what I was referencing and would likely return “undefined”.
Another concept that I learned while about scope is the concept of “parent scope”. As you may know, multiple functions can be nested within each other creating a chain. “Scope chain” is what we call the concept of which functions have access to which variables, and functions only have access to the variables declared in its parent functions. For example, when we declare a second function inside a first, the second function has access to the first function, also known as it’s parent function, as well as anything declared globally. However, the first function declared does not have access to the variables declared within the second function. As the third, fourth, fifth, and so-on functions get declared in the chain, the bottom ones have access to what is above them, but not below. Lastly, I learned that statements containing blocks also create their own scope, however, when variables are declared with “var” instead of “const” or “let”, they maintain their global scope. This is why it is important to use “var” with caution, and remains safer to use “const” or “let”.
When practicing for our class code challenge, the concept of scope became very prevalent while creating my code. While declaring my variables, I had initially started out declaring all of them within the first function I was using.
Take a look at a section of my code here:
function displayFirstCake(firstcake){
const cakeName = document.getElementById('cake-name')
const cakedescription = document.getElementById('cake-description')
const cakeImage = document.getElementById('cake-image')
const cakeReviews = document.getElementById('review-list')
cakeName.textContent = firstcake.name
cakedescription.textContent = firstcake.description
cakeImage.src = firstcake.image_url
}
However, later when I declared a new function and was trying to access the variable “cake reviews”, I wasn’t able to because it contained function scope and not global scope. It was here when I decided to move all my variables declared into global scope (outside of this function) because that would mean I had access within both of my functions. However, another alternative would’ve been to declare the same variable in my new function. Because my new function didn’t have access to the previous one, the same name for the variable could’ve been used in my new function as well without getting javascript confused.
Additionally, another method I used when I was struggling with the scope of my variables was to declare a variable using “let” in global scope. When I set it equal to a value in one function, then I was able to access that value in another function. This is because using “let” allows for the value of the variables to change, and also since it was declared globally, I had access to it wherever I needed. Knowing this ended up being very helpful while practicing for my code challenge.
Learning the concept of scope was crucial to my ability to learn and use javascript. Without this knowledge, one can spend an enormous amount of unnecessary time struggling to access their variables and functions. I know I will use this knowledge indefinitely throughout my coding career!
Top comments (0)