Success StoriesBlog
screen showing javascript code with function scope and context
Tutorials |

The difference between function scope and context in JavaScript

Jessica Schneck

8. April 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.

Function scope

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!“

Function context

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

Weitere Themen

Moritz Jacobs, 12.02.2021

A guide to CSS units — pt. 4: angles, time, dpi and values without units

CSS units

CSS angles

CSS time

unitless

dpi

Zum Blogartikel

Moritz Jacobs, 05.02.2021

A guide to CSS units — pt. 3: percents, viewports, magic and best practices

CSS units

viewport units

percent

magic numbers

best practices

Zum Blogartikel

Moritz Jacobs, 29.01.2021

A guide to CSS units — pt. 2: font relative units

CSS units

relative units

font realtive

rem

em

web typography

Zum Blogartikel

Wir sind Peerigon, eine Agentur für Softwareentwicklung.

Peerigon GmbH
Werner-von-Siemens-Straße 6
86159 Augsburg
+49 821 907 80 86 0

mail peerigon

service

Full-stack ConsultingSoftware DevelopmentProgramming WorkshopsTeam Support
BlogSuccess StoriesContactgo digital fundingCodeBoost®

© 2021 Peerigon

Privacy PolicyLegal NoticePress