In my first month dedicated to studying Software Engineering, one of the biggest “Aha” moments I had was when I learned about Scope. Scope was one of the most important lessons I learned and something I wish I spent more time on from the get-go. It was not easy for me to work through some of my early coding challenges in my curriculum. Trying to pass challenges felt like fumbling through lines of code as I tried to tie-together a loose understanding of what was going on “under the hood”, in Javascript. I presume this is a common issue for those learning “higher level” programming languages. Scope and context are important concept that should be studied early.
Learning about context and scope was an important step in my understanding. Before I learned about scope I struggled to understand how the program kept code organized and stored for use. I had the preconceived notion that my code would be “read” top-down and left to right and there was nothing more I had to worry about. As I started to do more complex problems, I found it was not that simple. I had trouble understanding why I was able to reference certain methods or variables, but not others. I pasted variable and function declarations all over my code like I was trying to find the right place for a picture in a scrapbook. For the life of me, I couldn’t figure out why my code wasn’t working — or why it worked, for that matter. Equal parts curiosity and desperation motivated me to unpack the “why” behind my reference issues (and successes).
If you were writing a complex novel with multiple characters throughout many chapters, being clear in what was happening to whom is necessary. You couldn’t use a pronoun to refer to a character from another chapter without the proper context if you were writing with clarity. Similarly, you cannot reference methods or variables outside that code’s scope and expect your code to run as intended. All code has context and context is organized in a nested pattern. The global context captures all code in a JS file. Inside the global context there can be nested contexts such as function context and block context. These contexts allow the code to be referenced when necessary and prevents from inter-context interference from code outside the intended scope. Prior to ES6 there was only global and function scope in JavaScript. One of the most useful features of ES6 was the introduction of let and const keywords. These two keywords are block scoped. This means that these variables are declared inside curly brackets and cannot be accessed outside of that block. This is in contrast with the var keyword, which is not block scoped. That means that the var keyword can be declared inside a curly bracket but can also be accessed outside that block, in the global or the function scope. It is clear for anyone working on complex code with many variables and functions that using the var keyword would get messy. That is why it is important to choose your keywords correctly and recognize scope as an important factor in reducing bugs and creating working code.
Function scope is only accessed within the function. These variables are also known as local variables (local to the function). Local functions are created when a function is started and are later removed when the function is done running. Const, let and var inside a function block all have function scope. If the prior keywords are declared outside of a function scope, they are globally scoped. Paying attention to your scope becomes especially important when using nested functions. It is also important to think about the expected values assigned with keywords. I was taught that const is a default keyword for values that will not change. Let would be the preferred keyword for values that would change or update. Var has limited value because of it does not support local scope as mentioned earlier. So, while choosing variables when writing code, it is important to adhere to the principle of least accessibility. This is a principle that focuses on closure. Closure is created by functions which create their own scope. Scope can also be layered in a hierarchal structure, where child scopes have access to parent scopes, but not the reverse. As such, it is important to keep in mind when writing functions.
Understanding how scope and context works in a high-level programming language allows for a more intuitive understanding of coding and how it works. I strongly encourage new learners to spend time with the subject as early as possible.
