Hey buddies!
I'm new to this forum and I have a brief question about JS.
Why use the var keyword is preferred to create a variable?
thanks for helping.

Hi,

 

var is reserved to declare / define a variable, e.g.

var myvarname = 'Hello';

now myvarname is defined as Hello.

It is really a question of good practice. Like #BrowserBugs said. The var keyword indicates that the variable is being declared ,where a line of code without the keyword indicates that you are referencing an existing variable. That is good to know if someone else in working on your code. Also if you leave out the keyword the browser-engine or other developers could think that you are referencing a a document object property, a build in method etc.

//declaration without an asigned value
var myVariable;

//declaration with a value
var myVariable = 'Some value';

//This code indicates that we are referencing a variable that HAS been declared
//Let's change the value
myVariable = 'New value';

EDIT. If you declare a variable without a keyword it think the browser would actually asume you are referencing an existing property of the document element

Edited October 8, 20169 yr by Nillervision

We can't really discuss variables in JavaScript without explaining how scope and hoisting works in the language. For the purposes of brevity I will be ignoring the additions of `const` `let` and arrow functions in ES6 for this post.

 

In the following statement we are actually performing two operations

var a = 'bar';

First we have the variable declaration `var a` and then we have the variable assignment `= 'bar';`
What the Javascript compiler actually does as it passes through the program is that it hoists the declaration to the top of the scope context. Many mistakenly assume that the whole statement gets hoisted but that is untrue.

 

Take the following:

console.log(a); // Reference error `a` is not defined

function b() {
  console.log(a); // undefined
  var a = 2;
  console.log(a); // 2
}

b();

Note that when we log out `a` outside of the function we get a reference error, that's because `a` lives within the scope of `function b` and only gets hoisted within it.

The first console.log() within `function b` demonstrates hoisting occurring, if it didn't we would get another Reference error. Instead we get the value `undefined` which is a placeholder value which the JavaScript compiler assigns that says this variable has been declared but not yet assigned a meaningful value.

The third console.log prints out the value of the variable.

 

So the above demonstrates that:

• The compiler hoists variable declarations to the top of the scope context.
• The hoisted variable gets assigned the value `undefined`
• The actual variable assignment does not get hoisted.

It's also worth noting the difference between function declarations and function expressions:

In a function declaration the first bit of the statement will be the `function` keyword, if it isn't it is an expression. So in the code above `function b` is a function declaration.

 

Take the following

var a = function(y) { return y / 2; };
function b(x) { return x * x; };

Line one is a function expression because the function keyword is not the first part of the statement.
Line two is a function declaration because function is the first part.

 

The distinction is important because of how function declarations are hoisted.

The following is how the above code would look after the compiler has hoisted.

function b(x) { return x * x; };
var a = undefined;
a = function(y) { return y / 2; };

Line 1 demonstrates that function declarations in their entirety get hoisted to the top of the scope, whereby function expressions get hoisted just like variable declarations. So with that in mind what the following code will result in...

console.log(a(5));
function a(x) { return x * x; };

you might assume we get a reference error - that `b` is undeclared. But what we actually get is the value `25` because the function was hoisted.

Here we will see the difference with function declarations:

console.log(b(5));
var a = function(x) { return x * x; };

Again you might assume we will get a reference error. But this isn't the case - because `var a` gets hoisted and assigned the undefined value. So the result will be a TypeError because the value undefined is not a function and so cannot be called.

 

 

Now we understand hoisting I will explain how the scoping mechanism in JavaScript works.

 

Unlike many other languages JavaScript does not have what is known as block scope. It has function scope. So a variable defined inside of an if block or a loop will get hoisted outside of that. Variables and function declarations will get hoisted to the top of current function's (or the global's) scope context.

console.log(a); // undefined (NOT ReferenceError!)
if (true) {
  var a = 5;
}

console.log(a); // 5; 

The lookup mechanism in JavaScript will first look inside of the current function for the variable being referenced, if it's now found it will lookup outside of the current function to it's context and will keep doing this until it finds the declaration. If it reaches the global scope and still cannot located the declaration a ReferenceError will be thrown.

 

Take the following

function outer() {
  var a = 5;
  function inner() {
    var b = 2;
    console.log(a * ; // 10
  }
  inner();
  console.log(; // ReferenceError `b` is not defined
}
outer();

We can see that `inner` can has access to the scope of `outer` but `outer` cannot look down into `inner` which is why we are getting the reference error.

It's also worth noting that parameters in functions are scoped in the same way - to that function.

 

Another point worth making about variable declarations - do not omit the `var` keyword. If you do (No matter how deeply a nested scope you are within) the compiler will add that variable as a global and it will not be scoped to the function that you thought you had declared it within. This can be negated as of ES5 by the use of "strict mode" which I recommend you always use when writing JavaScript.
Note: in the Browser all globals are added to the global object 'window'. In Node (Server side JS) there is no global object like `window`, they simply live in the global scope.

 

Once you have a solid understanding of how scope and hoisting works in JavaScript it puts you in a good place to tackle how the closure mechanism works. Once you understand closure you then realise what a powerful language JavaScript actually is.

Edited October 9, 20169 yr by rbrtsmith

For those that are interested ES6 `let` and `const` both have block scope and so are not hoisted outside of blocks like conditionals and loops.

if (true) {
  let a = 5;
  console.log(a); // 5
}

console.log(a); // Reference error `a` is not defined.

Also contrary to common assumption `const` does not define a constant or immutable variable, it defines a variable that can not be reassigned to.

The following would result in an error being thrown:

const a = 5;
a = 6;

Whereas

const a = {
  b: 5
};

a.b = 6;

would not result in an error because `a` is still assigned to the same object.

Edited October 9, 20169 yr by rbrtsmith

Lol my js knowledge is still at 'See Spot Run' ... very comprehensive @rbrtsmith

Thank u pals, i have to investigate your materials!