Scope, closures, context.. I was lost, aren’t you?

Don’t get me wrong, I’m not a novice in the javascript development field, I’ve been working with development for more than ten years now, and javascript was one of the main technologies that I used all this time.

But often I catch myself searching on the internet the differences and the concepts behind of the terms like scope, closures and context. Not because I’ve forgotten the practical concepts of it, but I never remember which one is it. So I decided to take a different approach, and that’s the main reason this mini-guide was born, the idea is to speak in one phrase what is each one of this concepts, and after that give some practical examples of each one.

But first things first…

Why should I worry about that?

Javascript, like any other programming language, should work as a tool to you achieve your goals. So if you will use that tool the minimum you can do is understand the rules and how this tool work.

And that concepts — scopes, closures and context — are the most important ones in Javascript, because it rules all the logical and practical behavior between the relationships and access of objects.

Imagine some situation that you are trying to get the value of one variable and it return a different value from what you expect, or maybe some situation where you need to hide some variable from the public access… that’s all stuff related to the below concepts.

But calm down, it will became more clear along the road.

Scopes

Scope is everything between the brackets operators { } of a function in Javascript — called function scope — and everything that remains inside it will be inaccessible to outers functions, unless you return it. But beware that inner functions of this scope have full access to it, and that inner functions will also create a new scope!

// Open brackets creates a new scope
function creatingScope() {
  // Private content scoped with function  
var myVar = ‘some value’;
// Close brackets ends the new scope
}
console.log(myVar); // Error not defined
// Open brackets creates a new scope
function creatingScope() {

// Private content scoped
var outerScopeVar = ‘main value’;
  // Open brackets creates new scope  
function creatingInnerScope() {

// Private content scoped
var innerScopeVar = ‘inner value’;
    console.log(outerScopeVar); // ‘main value’
console.log(innerScopeVar); // ‘inner value’

// Close brackets ends the new scope
}
  console.log(outerScopeVar); // ‘main value’
console.log(innerScopeVar); // Error not defined
// Close brackets ends the new scope
}

Closures

A closure is created when inner function references to a local variable from the outer function.

function outerScope(x) {
var innerScope = function(y) {

// Manipulate ‘x’ outer variable
return x + y;
}
  return innerScope;
}
// Define x = 5 in outer scope
// and receive innerScope function
var sum = outerScope(5);
// Define y = 5 and return the sum
// between outer ‘x’ and inner ‘y’ variable, which is 10
console.log(sum(5));

Context

Context is accessed by the keyword this, and it returns the object where the function is being executed, but it can react different depend on the scenario. When a function is a method of a object it return this object as context, when isn’t it return the global context — Window context.


var myObject = {
myFunction: function() {
// Print myObject object
console.log(this);
}
};
var outerScope = function() {

// Print global Window object
console.log(this);

var innerScope = function() {
// Print global Window object
console.log(this);
}
  return innerScope;
}
var myObject = {
myFunction: function() {

// Print myObject object
console.log(this);

var myInnerFunction = function() {

// Print global Window object
console.log(this);
}
return myInnerFunction;
}
};

That’s all?

Yes… and of course, no! That’s the core concept behind this terms, but they are so full of possibilities that we just scratch the bottom of it, I really recommend you, with all that in mind, to practice and give a shot on each one, to see how it react on real world. And after that you can jump into new concepts and patterns that this opens.

Some links that you can dive into to explore more about it that help me along:

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
http://doctrina.org/JavaScript:Why-Understanding-Scope-And-Closures-Matter.html
https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/
http://ryanmorr.com/understanding-scope-and-context-in-javascript/
http://clubajax.org/javascript-scope-and-context-not-the-same-thing/
https://blog.kevinchisholm.com/javascript/context-object-literals/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.