Loading…

JavaScript tutorial – part 2 – Comments, variables and hoisting

In this part I want to speak about the basics of JavaScript. It should include topics like comments, variables and hoisting. Finally you can get your hands dirty and try some code snippets which will be provided. I highly recommend you to do so, because If you are only reading the articles, it’s ok, but not enough. You should try it by yourself to experience it. So let’s go for it.

JavaScript is syntactically very similar to Java, but in addition it’s influenced by other languages – for instance Awk, Perl and Python. JS uses Unicode character set and is case-sensitive. Instructions are called statements and should be separated by semicolon (;). Why I used should instead of are? Because ECMAScript has rules for automatic insertion of semicolons – ASI. But it was just curiosity, you should end statements by semicolon every time; it is best practice and it will avoid side effects.

Comments

Comments are not evaluated. They are used for increasing code management and readability. The syntax of comments is the same as in C++ and other languages:


// This is a single line comment

/* 
   This is multiline comment, which is
   used for longer texts.
*/

console.log("Hi " + name/* this is nested comment */);

 

Variables

If you want to declare a variable, there are three ways in JS since ES5

  • var – declares a global scope variable
  • let – declares a block scope “local” variable
  • const – declares a read-only constant

var age = 24; // this is declaration and initialisation of a variable

if (true) {
    let name = 'Dan'; // this variable is visible only inside the if block
}

const PI = 3.14159; // this constant is read-only and can not be modified

 

Variable names are called identifiers. If you write only for example var name;, it is called declaration. Declared variable, which was not initialised yet has value undefined. A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9).

Variable hoisting

Hoisting is an unusual way how JS process variables. In JS you can refer to a variable, which will be declared later and you get no exception. This concept is known as hoisting; variables in JavaScript are in a sense “hoisted” or lifted to the top of the function or statement. However, variables that are hoisted will return a value of undefined. So even if you declare and initialize after you use or refer to this variable, it will still return undefined.

/**
 * Example 1
 */

console.log(x === undefined); // true
var x = 3;

/**
 * Example 2
 */
// will return a value of undefined
var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

The above examples will be interpreted the same as:

/**
 * Example 1
 */
var x;
console.log(x === undefined); // true
x = 3;
 
/**
 * Example 2
 */
var myvar = "my value";
 
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "local value";
})();

Because of hoisting, all var statements in a function should be placed as near to the top of the function as possible. This best practice increases the clarity of the code.

In ECMAScript 2015, let (const) will not hoist the variable to the top of the block. However, referencing the variable in the block before the variable declaration results in a ReferenceError. The variable is in a “temporal dead zone” from the start of the block until the declaration is processed.