2016-02-16-basics-declarations.md

title: Basics declarations tip-number: 47 tip-username: adaniloff tip-username-profile: https://github.com/adaniloff tip-tldr: Understand and work with declarations.

• /en/basics-declarations/

Below, different ways to declare variables in JavaScript. Comments and console.log should be enough to explain what's happening here:

var y,
    x = (y = 1); //== var x; var y; x = y = 1
console.log('--> 1:', `x = ${x}, y = ${y}`);

// Will print
//--> 1: x = 1, y = 1

First, we just set two variables. Nothing much here.

(() => {
    var x = (y = 2); // == var x; x = y = 2;
    console.log('2.0:', `x = ${x}, y = ${y}`);
})();
console.log('--> 2.1:', `x = ${x}, y = ${y}`);

// Will print
//2.0: x = 2, y = 2
//--> 2.1: x = 1, y = 2

As you can see, the code has only changed the global y, as we haven't declared the variable in the closure.

(() => {
    var x,
        y = 3; // == var x; var y = 3;
    console.log('3.0:', `x = ${x}, y = ${y}`);
})();
console.log('--> 3.1:', `x = ${x}, y = ${y}`);

// Will print
//3.0: x = undefined, y = 3
//--> 3.1: x = 1, y = 2

Now we declare both variables through var. Meaning they only live in the context of the closure.

(() => {
    var y,
        x = (y = 4); // == var x; var y; x = y = 4
    console.log('4.0:', `x = ${x}, y = ${y}`);
})();
console.log('--> 4.1:', `x = ${x}, y = ${y}`);

// Will print
//4.0: x = 4, y = 4
//--> 4.1: x = 1, y = 2

Both variables have been declared using var and only after that we've set their values. As local > global, x and y are local in the closure, meaning the global x and y are untouched.

x = 5; // == x = 5
console.log('--> 5:', `x = ${x}, y = ${y}`);

// Will print
//--> 5: x = 5, y = 2

This last line is explicit by itself.

You can test this and see the result thanks to babel.

More informations available on the MDN.

Special thanks to @kurtextrem for his collaboration :)!