Javascript Var

# Javascript Teasers

If you are learning javascript it can be initially difficult to wrap your head around some of the concepts. You can beat your head against the wall wondering why a thing did not work when it was syntax, scope, or, as with everything for me, boils down to everything in javascript is an object. Here I would like to provide a few examples of what I mean and help put you in the mindset of javascript.

## Var and scope

Var has been around forever. If you want to initialize a variable, this used to be the only way. Today we have Let and Const and use them most today, setting var to the side. In some cases, as I have gone through training, some instructors have simply said to drop var and just use let or const. That is not helpful. So what is var? What is it for? Why use it if there is let and const now?

First lets hit "let" and const real quick. If you have a variable that can change it's mind later on, use let. Let can initialize the variable so that the value can be changed later on in the code. Say you have a counter and want to update it. You can use let count = 0 to initialize it and later update it to a new value. count = count + 1.

Next, "const" is used when you have a variable that can't be changed down the line. Const is short for constant. If you were to set that count variable with const count = 0, and later tried to change it, count = count + 1, you would get an error because count is a constant. May be better to use it for the name, like const name = "Dev3027".

So where does var fit in? My explanation of Let and Const was very general and did not take into account hoisting or scope. Here is where var fits in. Variable declared with var are hoisted and the var variable is given the initial value of undefined. Lets look at this code;

function run() { console.log(foo); // undefined var foo = "Foo"; console.log(foo); // Foo } run();

Running the above snippet you can see the variable is initialized after it is being used. Big no go for javascript, but instead of throwing an error, the first console.log prints "undefined". This is the power of var. Using var will set the variable in a global scope, being reachable from anywhere in your code. In contrast, let's look at let:

function run() { console.log(foo); // ReferenceError let foo = "Foo"; console.log(foo); // Foo } run();

Here we get the error because javascript did not hoist the let variable and waited to give it the value until it was created. Variables set with let are scoped to the block of code they run in and are not accessible everywhere. If you run these two, you will see one runs and one throws an error. Also, var will let you re-declare the same variable in the same scope, but let will throw an error. For example:

var foo = "foo1"; var foo = "foo2"; console.log(foo); // foo2

let bar = "bar1"; let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared. console.log(bar);


Today we use let for for loops, but why? Well, when using var you had closure problems:

for(var i=1; i<6; i++) { $("#div" + i).click(function () { console.log(i); }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Clicking on each number will log to console:</p> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div>

Here you would get 6 for every value of i because with var, every value points to the same counter object, but change var in the loop to let and the counter is no longer a single object. For more information you should check out [difference between let and var](<https://stackoverflow.com/questions/762011/what-is-the-difference-between-let-and-var>) from stack overflow.

Review this code and see if you can tell the outcome before running it:

//> var hoisting vs let hoisting //^ What will be the output from this code? function f() { if ( area !== undefined ){ console.log('var ', area); } try { console.log('let ', name); } catch(err) { console.warn(err.name); console.error(err.message); } var area = 'carl'; let name = 'karl'; }; f();

console.log('var ', area); console.log('let ', name);


I hope this starts the brain thinking in javascript and gets you interested in learning more about scope and closure.