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

The difference between function scope and context in JavaScript

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.

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.

Do you love web development as much as we do?

Join our team

JavaScript

Basics

Apprenticeship

Web Development

Tutorial

Read also

Moritz Jacobs, 01/29/2024

Heading for Greatness — A React Developer's Guide to HTML Headings

HTML Headings

Best Practices

Uberschrift

Accessibility

SEO

Go to Blogarticle

Stephan, 12/18/2023

A small contribution towards a better world

Company Culture

Donations

Charity

Corporate Culture

Go to Blogarticle

Klara, 11/22/2023

Peerigon goes purple

#PurpleLightUp 2022

#InclusionMatters

company culture

diversity

Go to Blogarticle

Peerigon: the company for bespoke software development.

Peerigon GmbH

Werner-von-Siemens-Straße 6
86159 Augsburg
+49 821 907 80 86 0
mail peerigon
BCorpkununu top company 2022
ClimatePartner

service

IT staff augmentation servicesUX/UI DesignCustom Software DevelopmentSoftware Development ConsultingFull Stack Training
BlogSuccess StoriesContactWhy use TypeScript?Why use JavaScript?

© 2024 Peerigon

Privacy PolicyLegal NoticeContactPress

Do you already know Konsens, our free online tool?