Understanding Scope in JavaScript
Tags: javascript, localscope, globalscope
Published: 2019-01-07 21:45:59

---
title: Understanding Scope in JavaScript
published: true
description: Global, Local what do they mean. In this blog post I will help explain how scope works and how to better implement it into your code.
tags: #JS #localScope, #globalScope
---

<h1>Quick Summary<h1>

<p>Global, Local what do they mean. In this blog post I will help explain how scope works and how to better implement it into your code.<p>

<h1>Requirements:</h1>

<ul>
    <li>A basic understanding of JavaScript.</li>
    <li>Text editor of your choice.</li>
    <li>A willingness to learn.</li>
</ul>

<h1>Introduction</h1>

<p>Scope is a feature within JavaScript which allows you to dictate the lifespan, access, and visibility of variables, functions, and objects in your code.</p>

<p>In order to understand how scope works within a JavaScript document I believe one should first understand some of the key benefits of scope.</p>

<ul>
    <li>Security- Scope allows you to limit access to variables and functions so that they can be called only at times when they are needed.</li>
    <li>Reduces Namespace Collision- Can occur when two or more variables share the same or similar names. When you properly utilize scope, you reduce your risk of N.S.C.</li>
    <li>Code Reusability – When you properly use local scope your code becomes more dynamic and reusable with less chances of possible side effects.</li>
</ul>

<h1>Types of Scope:</h1>

<ul>
    <li>Global</li>
    <li>Local</li>
</ul>

<h1>Global Scope:</h1>

<p>The moment you begin to write code in a JavaScript document, you are in the global scope. You are able to access any global variable functions, objects, etc. from the inception of your application until it. Any variables, functions, objects, etc. you define in the global scope is available.</p> 

<p>Below I have defined a variable called ‘glabalRabbit’ in the global scope.</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/q71ucrqfi8c4yirxuis9.png">

<p>Now that we have defined ‘globalRabbit’ let’s console.log it to return its defined value.</p>

<img src=https://thepracticaldev.s3.amazonaws.com/i/ld5bdnf9sreio9o6ek8l.png>

<h1>Local Scope:</h1>

<p>Anytime you create a function and define a variable within it, you are creating local scope. This means that if you were to use the same variable name in two separate functions, they would not cause a namespace collision. Although using the same variable name anytime in your code is not considered best practice.</p>

<p>In the example below, I have created a function named localScope and defined a variable called localRabbit.</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/n0qcployq9pzbto9mknp.png">

<p>Now let’s test our global scope variable.</p>

<p>Below we can see that when we console.log(globalRabbit) above, below, and inside of our newly created function we are able to return its value.</p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/y9uyxybxtyg3r1bgn5nm.png">


<p>Next let’s test out our local scope variable.</p>

<p>As you can see when we attempt to console.log(localRabbit) we are only able to return its value inside of the function in which it is defined.</p>
 

<img src="https://thepracticaldev.s3.amazonaws.com/i/epmpnjs4wjezo68gwlqy.png">


<h1>Pro Tips</h1>

<ul>
    <li>Global scope begins the second you begin to type in the JavaScript document.</li>
    <li>Local scope is defined when you create a function.</li>
    <li>Stir clear of using the same name variable name for different instances.</li>