03/10/2023

Variables in JavaScript

Today we will go over the most fundamental operator in programming, the variable. A variable is a keyword used to represent a piece of data in memory.

Using variables in JavaScript is easy as there is no need for types. Types are an identifier the programmer sets that tell the computer how to set/get the variable's data. Types can help protect your code from unintentionally doing things you don't want. If you would like to use types in JavaScript you can install TypeScript.

Variables are used as a container to store data the basic syntax is shown below:

>javascript
var hello = "world"
console.log("Hello " + hello);
                    
> "Hello world"

The var keyword tells the computer to store the string "world" in a variable named hello. There are four ways in total to assign a variable, all of which have different features.

  • var
  • let
  • const
  • none

?{false} Before we get into how each variable type differs from each other let's do a quick knowledge check.

<article>

##### What is a variable?
<input value="false" title="ans" name="ans"  type="radio" placeholder="" data-mdxt-parent="ans" data-mdxt-index='1' >
<input value="false" title="ans" name="ans"  type="radio" placeholder="" data-mdxt-parent="ans" data-mdxt-index='2' >
<input value="false" title="ans" name="ans"  type="radio" placeholder="" data-mdxt-parent="ans" data-mdxt-index='3' >
<input value="false" title="ans" name="ans"  type="radio" placeholder="" data-mdxt-parent="ans" data-mdxt-index='4' >
</article>

false

?{false && false}

Correct! Variables can be used as a container to store data.

?{false || !false}

### What's the difference between `var`, `let`, and `const`?
Let's start off easy with `const`, `const` lets you define a variable that contains a set chunk of data that cannot be set to anything else. This is the only variable assigner that will not let you change the data stored in it.
> NOTE: While you cannot change the value assigned to the `const` variable, if you assign an object of an array to it, you are able to change the data inside the object.

`let` and `var` both store data and that data can be changed to anything you want, including a different type of data. The difference between the two is with scope. The scope of the variable is where in a program the data the variable contains can be accessed. A global variable defined by not using `const`, `let`, or `var` can be accessed anywhere in the program. This might sound like it is a good thing however, this can cause memory issues.

Looking at the code below and its output, you can see when using `var` the data stored in `j` can be accessed outside of the for loop it was declared in. In the next example, the function only outputs the value of `i` when inside the loop. This is because the scope of `i` is defined inside of the for loop.

<pre rel="javascript

">>javascript "use strict"; console.log("var:"); for (var j = 0; j < 2; j++) { console.log(j); }

<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(j);

<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;let:&quot;</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">2</span>; i++) {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);
}
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);</code>
                <div class="mdxt_code_result"><span>> "var:"

> 0 > 1 > 2 > "let:" > 0 > 1 > ReferenceError: i is not defined

?{false && false} Let's see what you learned about scope:

##### What is the scope?

false

?{false && false && false}

Correct! The scope is the part of the program where a variable is accessible.

?{false && false || !false} Learning what variables do and how the scope of variables operate is fundamental to know how your code runs and being about to effectively debug your code. If you liked this interactive lesson please let us know! There will be many more to come.

Back

Comments


Be the first to comment!

Read More

Making sticky elements in HTML and CSS.

Sticky elements are a useful feature in modern web design, as they allow certain elements on a webpage to remain visible even when the user scrolls. This can be useful for elements such as the n...

Kod.js client or server generated code captures
Kod.js client or server generated code captures

Kod.js

Kod.js is a code preview image generator that runs both in the browser and on Node JS. It is built using highlight.js and uses it for the themes and syntax highlighting.

Svelte + Env
Svelte + Env

Svelte Environment Varibles

Environment variables are values that can be passed to an application at runtime, that influence the behavior or configuration of the application. They are stored in key-value pairs and can be used to store sensitive information, such as passwords, API keys, or configuration settings. This information is made available to the application through the oper...