Object-Oriented JavaScript — Variables Best Practices

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the scope of variables.

Scope of Variables

JavaScript has block-scoped variables since ES6.

As long as we declare variables with let or const , they’ll be block-scoped.

We can write:

function foo() {
  let local = 2;
}

to create a block-scoped variable local .

This is only available within the block.

We can also cvrearte global variables.

For instance, we can write:

var x = 1;

at the top level to create a global variable.

It’s hoisted, which means that the declaration of it can be accessed from anywhere within the script.

But the value is only available after it’s assigned.

var used at the top level will be global.

We should avoid creating global variables to avoid naming collisions.

Block-scoped variables are easier to track since they’re only available within the block.

Variable Hoisting

Variable hoisting is done only with var variables.

For instance, we can write:

var a = 123;

Then if we use it as follows:

var a = 123;

function foo() {
  console.log(a);
  var a = 1;
  console.log(a);
}
foo();

then we get that the first log of a is undefined .

And the 2nd console log is 1.

This is because the console log takes the a from within the function.

var is function scoped, it the value will be taken from a function.

Therefore, we get undefined and 1 respectively.

Block Scope

Because function scoping is confusing, ES6 introduced block-scoped variables.

We can use let and const to declare variables.

They aren’t hoisted and const variables have to have an initial value assigned to it when it’s declared.

For instance, we can write:

var a = 2; {
  let a = 3;
  console.log(a);
}
console.log(a);

The a in the console log would be 3.

And the console log outside the block would log 2 from the var declaration.

Because it’s easier to reason with block-scoped variables, we should use them everywhere.

The rule for creating variables is that we consider const first we can’t assign them to a new value.

If we need to assign a new value to a variable, then we use let .

And we never use var .

Functions are Data

Functions can be assigned to variables.

For instance, we can write:

const foo = function() {
  return 1;
};

Then we assigned a function to the foo variable.

This is called a function expression.

And if we write:

const foo = function bar() {
  return 1;
};

then we assigned a function declaration to a variable.

They’re the same, except that we can access the original name within the function.

So we can get the name bar from within the bar function’s body.

But we call it with foo outside it.

Using the typeof operator, we return the type 'function' as the value.

If we have:

typeof foo

We get 'function' .

Conclusion

We should use let or const to declare variables.

Also, functions can be assigned to variables.