Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md

README.md

LESSON: js-scope


2018-06-12

Tags: javascript, objects, functions

OBJECTIVES

  • Explain what a block is.
  • Describe the difference between global and local scope in JavaScript.
  • Identify which part(s) of JavaScript create new scope.
  • Identify which variables are accessible in various scopes.
  • Create a closure.
  • Explain why a closure is beneficial.

VOCABULARY

Interdependency

Coupling

Encapsulation

Code block: code within a set of curly braces {}, like within a function or conditional body, or within a loop.

Scope: the level of access your program has to a particular variable at a particular time while executing code. Scope can be thought of as a container or set of nested boxes. Where and how a variable is defined determines its scope, or availability to other parts of the program.

  • Created by using functions and blocks

Local scope: when the program has limited access to variables, like within a code block.

Global scope: the broad access to variables at a higher level than inside a block. There are various “levels” of global scope. The highest potential scope is the window object (or some similar global object in other environments). It’s usually a bad idea to define variables in the highest global scope, but it is often necessary to move variables to a higher scope than block scope.

Child scope: any inner scopes that a variable has access to

Parent scope: the scope(s) higher than what the variable has access to

Sibling scope: scopes created at the same level of hierarchy, so not child or parent.

Closure: A way to gain access to the scope a function had when it was defined. When a function is created, it closes around its current level of scope, so any variables it can currently access at the time the function is defined are accessible later when the function is invoked. This combination of a function and it's lexical scope is called a closure. By creating a closure, we can use a function to close over the current scope and access it at a later time.

NOTES

  • Functions, conditionals, loops create blocks, as does a standalone set of curly braces
  • Blocks create new scope for the variables defined within the block
  • Variables defined within a block are limited in scope to the block in which they are defined
  • Variables defined outside of a block can reach into a block, but variables defined within a block cannot reach outside of the block (global vs local scope)
    • If you want to access the same variable within multiple blocks, make sure it’s defined at the appropriate scope level (define it outside of the block vs inside the block)
  • You can create scope with a function, which is called function scope. It’s pretty much the same as block scope (scope created with a block)
  • Always use let and const so that we avoid confusing scope issues that arise with var
  • Different scopes can have variables that are declared with the same name and they do not conflict or know about each other.
  • When you have a bug in your code...think about scope! Do I have access to what I need at this point in the program? Is the thing I’m accessing the thing I think I’m accessing?
  • Variables defined within an inner scope cannot be applicable to anything that is part of an outer scope. On the contrary, things that are defined on the outer scope can affect functions and variables part of an inner scope. (This explains why a const variable within an inner scope causes an error when you try to console.log it... Define as a ‘var’ instead)

EXAMPLES