Jessica Schneck
April 8, 2019
JavaScript’s function scope and context can be very flexible and powerful, but also very confusing, especially for beginners. In this blog post I’m going to scratch the surface and explain the basic functionality of both concepts. The first thing to keep in mind is that scope and context are not the same.
The scope determines the accessibility of variables and other resources in the code, like functions and objects. JavaScript function scopes can have two different types, the locale and the global scope. Local variables are declared within a function and can only be accessed within the function. Global variables are declared at top level outside any functions and all functions on a web page have access to them. Each function when invoked creates a new scope. While a global variable lives as long as your application lives, local variables are created when a function starts and deleted when no code has access to the variable anymore (usually when the function returns).
Global scope:
1 2 3 4 5 6 7 8
const helloWorld = „Hello World!“; console.log(helloWorld); // prints „Hello World!“ function logHelloWorld() { console.log(helloWorld); // access to variable helloWorld } logHelloWorld(); // prints „Hello World!“
Local scope:
1 2 3 4 5 6 7
function logHelloWorld() { const helloWorld = „Hello World!“; console.log(helloWorld); // access to variable helloWorld } console.log(helloWorld); // no access to variable helloWorld logHelloWorld(); // prints „Hello World!“
On the other hand there is the function context which can be accessed via this. It can have different values depending on how the function is invoked as well as using strict or non strict mode. Functions in non strict mode refer to the window object as context. Functions in strict mode refer to undefined.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
// Non Strict function a() { return this; } a(); // context window object // Strict Mode: function b() { „use strict“; return this; } b(); // context undefined
When a function is called as a method of an object, the keyword this represents the value of the referenced object.
1 2 3 4 5 6
const obj = { a: function() { return this; } } obj.a(); // context obj
You are also able to change the context by using call(), apply() and bind() function methods. The methods call() and apply() execute the function with the given value as this. The only difference between those two is, that the passed arguments in the call() method are separated by a comma, while you pass the arguments for apply() as an array.
1 2 3 4 5 6 7 8 9 10 11 12 13
var a = „Hello“; var obj = { a: „Goodbye“ } function greeting() { return this.a; } greeting(); // context global variable a greeting.call(obj); // context obj greeting.apply(obj); // context obj
bind(), however, behaves differently and unlike call() and apply(), it doesn’t call the function itself. It creates a new function with the same body and scope as the original function but the context of the new function is bound to the first given argument of the bind() method.
1 2 3 4 5 6 7 8 9
function a() { return this.a }; var b = a.bind({a: „goodbye“}); var c = {a: „hello“, b: b} console.log(c.a, c.b()); // prints hello goodbye
This shows the basic functionality of how context and scope work and as a conclusion we can say that scope refers to the visibility of variables and context refers to this inside a function.
Jessica took an apprenticeship at Peerigon in 2019 to become a professional web developer. As part of her weekly routine, she publishes a blog post each week about what she has been doing and what she has learned.
JavaScript
Basics
Apprenticeship
Web Development
Tutorial
Klara, 11/22/2023
#PurpleLightUp 2022
#InclusionMatters
company culture
diversity
Go to Blogarticle
Irena, 05/23/2023
Donations
Diversity
CSD Augsburg
Queer Community
Company Culture
Go to Blogarticle
Moritz Jacobs, 03/23/2023
open source licenses
unit testing
node_modules
Go to Blogarticle
Peerigon: the company for bespoke software development.
service
workshop
Do you already know Konsens, our free online tool?