Understanding JavaScript Scope
Tags: javascript, scope, tutorial, webdev
Published: 2020-04-27 08:11:04

## What is Scope actually ?
> Scoping is determining where variables, functions, and objects are accessible in your code during runtime. This means the scope of a variable(where it can be accessed) is controlled by the location of the variable declaration.

----

## In JavaScript there are two types of scope:
- Local Scope
- Global Scope


Before jumping into `Local Scope` and `Global Scope`, Let's a have look on `Block` and `Function`

Here's a new keyword `Block Scope / Function Scope`. right ? What's these actually?
 Well, It's defination is defined in itself. 😕 sounds crazy? Don't worry. I'll explain it now.

> A Block is created with a pair of Curly braces `{ }`

```javascript
    function functionScope() {
        // This a Block Scope.
        // It's also a Function Scope.

        // All codes inside this function are `function scoped` along with `block scope`.
    }

    if (CONDITION) {
        // This is a Block Scope
    }

```



### Local Scope: 
> If varibales, funcitons, objects are declared inside a Block, It's called Local Scope.That's mean, A local Scope is created inside a `Block / Function` 

```javascript

    function localScope() {
        // declear variables inside this block;
        const countryName = 'Bangladesh';

        console.log(`I love my country ${countryName}`); // I love my country Bangladesh
    }

    // if we print the variable outside of that block,
    console.log(`I love my country ${countryName}`); // Uncaught ReferenceError: countryName is not defined

```

### Global Scope:
> If variables, functions and objects are declared outside a curly brace/Globally, are called global scope.


```javascript
    // declare our variables outside of any curly brace
    const name = 'Shaon Kabir';
    const age = 22;
    const married = false;


    function hello() {
        console.log(name) // Shaon Kabir
        console.log(age) // 22
        console.log(married) // false
        
        // we haven't declared anything here,
        // but we can still have access on our variables beacuse they are declared globlly.  
    }

    // We can print our variables value everywhere.
    console.log(name) // Shaon Kabir
    console.log(age) // 22
    console.log(married) // false
        
```



__Global + Local Scope Example:__

```javascript
    // This function is created globally, we can get access on it from anywhere.
    function globalFunction() {

        // declear variables
        const language = "JavaScript";

        console.log("I am executing from GLOBAL function");

        // create a local function
        function localFunction() {
            console.log("I love to code in" + language);

            // Here, we have access to "language" variable because it's declared in `this`(localFunction) Parent scope
        }

        // Call innerFunction
        localFunction();
    }

    // What if happen, If we call the inner Function outside of global Function ?
    localFunction(); // Uncaught ReferenceError: localFunction is not defined

```

_One last things, we've noticed that somethings is happending inside the localFunction. we've talked about Parent scope. Let's learn about it_

### Lexical Scoping:
> ✔ A relation between Parent Function and Child Function is called `Lexical Scoping` 🔥
>
> Child can access Parent's Properties/variables/methods.


> Here's `globalFunction` have a innerFunction named `localFunction` which is also a local function of `globalFunction`. That's mean, there no existance of `localFunction` outside of `globalFunction`. so we've to call this innerFunction inside the Block.
Also, variable `language` is declared outside of `localFunction` but, still it've the access on it. Because, In JavaScript, Child can access Parent's Properties/variables/methods.


_This is my first blog post on dev community 🔥. If you find any typing mistake, sorry for that :(_