Simplifying Scoping in Javascript
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-03-07 23:56:53

Scoping is one of the fundamental parts of how Javascript works. Scoping is defined as the context of where variables can be accessed or referenced. 

Javascript has two scoping types called Global Scope and Local Scope. Before we get into these scopes, let's first talk about variable declarations because they may impact the scope types. 

### Variable Declarations
In Javascript, a variable is a name that serves as a container for a value. 

Prior to ES2015 (Javascript Version), there was only one way of declaring or naming a variable. 

This declaration is called 'var' and could be either Function scoped or Global scoped. the 'var' variable can be redeclared and the value of 'var' can be reassigned if necessary.

```javascript

// declaring the variable: bucket
var container = 'bucket'
console.log(container) // bucket

// reassigning the value from a 'string' to a 'number' 
container = 1
console.log(container) // 1


// redeclaring var container 
var container 
console.log(container) // 1

``` 

After ES2015, there are two more variable declarations and they are defined as block-scoped. 

They are both are available to be accessed in the block statement of code in which they are declared.

```javascript
// Declation: Let - Can be reassigned but not redeclared
let count = 1111
console.log(count) // 1111

count = 1234
console.log(count) // 1234

let count
console.log(count) // SyntaxError: Identifier 'count' has already been declared
```

```javascript
// Declaration: Const - Can't be reassigned or redeclared
const speed = 'fast'
console.log(speed) // fast

speed = 'very fast'
console.log(speed) // TypeError: Assignment to constant variable

const speed
console.log(speed) // SyntaxError: Identifier 'speed' has already been declared
```

Now onto the two Variable Scope types: Global & Local Scope

### Global Scope 

Global variable scope is a variable declared outside a block statement of code. 

```javascript
// This can be accessed globally in our code

let captain = "Captain Plank"
console.log(captain) // Captain Plank

function greet() {
// lexical scoping: 
console.log(`Top of the mornin' to ya ${captain}!`)
}

greet() // Top of the mornin' to ya Captain Plank!

```
### Local Scope

Global variable scope is a variable declared inside a block statement of code.

```javascript
// Let's try declaring a variable at the local scope

let captain = "Captain Plank"
console.log(captain) // Captain Plank

function greet() {
let timeOfDay = "evenin" 

console.log(`Top of the ${timeOfDay}' to ya ${captain}!`)
}

greet() // Top of the evenin' to ya Captain Plank!

console.log(timeOfDay) // ReferenceError: timeOfDay is not declared
```

```javascript
// Here is the power in block-scoping

const captain = "Captain Plank" // global declaration 
console.log(captain) // Captain Plank

function greet() {
const captain = "Captain Flag"
const timeOfDay = "evenin" 

console.log(`Top of the ${timeOfDay}' to ya ${captain}!`)
}

greet() // Top of the evenin' to ya Captain Flag!

// The global declaration of captain is still in tact
console.log(captain) // Captain Plank
```

### Lexical Scoping

> A lexical scoping in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true; the variables defined inside a function will not be accessible outside that function. - Stack Overflow

```javascript
// Lexical scoping example

function publicFunction() {  
// scope of publicFunction: lexical scope for privateFunction
   const privateVariable = 'Secret'
   return function privateFunction() {
      console.log(privateVariable)
   }
}
 
// returns the privateFunction() and assigns it to the identifier 'Result’
const result = publicFunction();
 
result() // Secret
```

### Let's chat about Scoping
I hope these examples helped simplify Scoping in Javascript for you. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with Scoping in Javascript.

Happy Coding,
Terry Threatt