Things to be aware when you are starting in Javascript

Javascript is the world’s most misunderstood programming language, said Douglas Crockford. I tried to compile some topics which I think is too confusing to work with if you are just starting in Javascript. It is almost about the scope.

Table of contents

1. Scope

Different from other languages like C,C++or C#, Javascript doesn’t hasblock-level scope, but it has function-level scope. Which means that only function can create a new scope. They aren’t created by fororwhile loops or expression statements like ifirswitch.

1.1. What is Scope?

Be aware that the scope refers to the context of your code so it could be globallyorlocally defined. Understanding it is key to be a better Javascript developer by knowing where variables and function are accessible and be able to change the scope of your code’s context when it is neccessary.

1.2. Global Scope

By default, when you write a line of Javascript you’re in what is called Global ScopeorGlobal Object. So, if we are declaring a variable in the default scope, we are doing it on global scope.

// app.js
var fullName = "David Gilmour";

Control the global scope is easy and in doing so, you’ll run into no issues with global scope. You’ll hear people saying “Global Scope is bad”, but it isn’t. You need it to create Modules and APIs that are accessible across scopes and take it as your advantage.

Think about it as a global object where each global variable is present as a property of this object. In browsers, the global scope object is stored in the window variable.

1.3. Local Scope

Everything defined past the global scope refers to local scope. You’ll have one global scope and for each function defined it has its own local scope. Like I said before, only functions can create new scopes. So, if I have a function with variables inside it, those variables are in the local scope (the function scope). Look at the example below.

Lexical scope is easy to understand and work with. Just think that any variable, object and functions defined in it’s parent scope are available in the scope chain. The important thing to remember is that Lexical scope doesn’t work backwards.

##2. The this keyword
this keyword could be hard to use if you don’t exacly know how it works.
The this keyword always refers to owner of the function we’re executing, or rather, to the object that a function is a method of.

Here is a few very important points to remember about the this keyword:

The this keyword value isn’t related to the function itself but how the function is called. So it can be dynamic.

Yoo can change the this context through .call(), .apply() and .bind()

Default context

We can change the value ofthis in a few different ways and it’s usually the caller of a function that can change his context.

Window Object, Global Scope

From a regular function declaration, we can expect that the this value would bewindow Object which refers to the global scope. The ownershipof this willbe window.

3. Closures

Private and public members in Javascript is possible using closures. Closures treat functions as values, and as functions have his own scope, local variables are “re-created” every time a function is called. It emulates public and private scopes.

Javascript have some design patterns, such as the Module pattern which can create a public and private scope. As we know that functions create scope, we can create a private scope by wrapping a function inside other function:

(function(){
// here is a private scope
})();

We can add some functions for use:

(function(){
var myFunction = function() {
// your code here
};
})();

Remember that the function is defined inside a private scope, so it isn’t possible to access it from the global scope:

So, that’s it! If we need the function to be public, we can now use the Module Pattern which allow us to scope our functions using private and public scopes and an Object. Basically, to turn a function public, we need to return a function or an Object.

You myght notice that Javascript have a naming convetion to begin private methods with an underscore, which visually helps you differentiate between public and private methods. This allow us to return an anonymous Object simply assigning the function references.

4. Hoisting

Functions and variable declarations are always moved invisibly to the top of theirs containing scope by Javascript interpreter. This Javascript behaviour is called “hoisting”.

With variables, only the declaration name is hoisted. Withfunction declaration the entire function body will be hoisted. It doesn’t is applied for function expressions assigned to local variable. Follow the examples below:

It is a good practice always declare your variables with just one var statement per scope and that it be at the top. Forcing yourself to do this, will be hard to get into some hoisting-related confusion.