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.
varletconst- 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 || !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
;
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">"let:"</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <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:
?{false && false && false}
?{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.
