Understanding how `this` works in Javascript - The call-site
Tags: javascript, programming, ignoredconcepts, gettingdeeper
Published: 2019-03-18 19:33:41

---
title: Understanding how `this` works in Javascript - The call-site
published: true
description: Have you ever noticed some time you rely on 'this' keyword but it turns out to be undefined or you declare a variable accidentally at the global space? or just something weird or unexpected just happened.
tags: Javascript, programming, ignored concepts, getting deeper
series: Understanding how `this` works in Javascript
cover_image: https://raw.githubusercontent.com/inikulin/callsite-record/master/media/example1.png
---

If you have ever gotten your hands dirty with some javascript code, you'd maybe hit with `this` keyword's unexpected behavior, like it turd out to be `undefined` or you've probably declared a global variable, or maybe you just got another value but not what you were looking for.

If you're like me who came from a firm basis on Object Oriented Programming (aka OOP), and you're used to work with stuff like classes, class’s methods, instantiation, object's instance, constructors, etc. Then you'll notice in javascript this kind of concepts are slightly different and it tends to confuse.

Here specially I'm going to talk about the way `this` keyword works and the different kinds of how it could be bound to a function regardless either explicitly or implicitly. And what is the precedence of the binding methods?.

Let's get started ;)

# 4 types of binding `this`
1. [Default Binding](https://dev.to/kenystev/understanding-how-this-works-in-javascript---default-binding-56m4)
2. Implicit Binding
3. Explicit Binding
4. new binding

And they have nothing to do with what we've learnt from classes by OOP.

In Javascript `this` is bound to an object and it depends on **not where the function is declared** but where the function is called.
So we should take a look at where the function is called to answer what does `this` reference to?

Let's get deep into some code:
```javascript
function buzz() {
	// call-stack is: foo -> fizz -> buzz
	// then, our call-site is fizz

	console.log('buzz');
}

function fizz() {
	// call-stack is: foo -> fizz
	// then, our call-site is foo

	console.log('fizz');
	buzz();	// <-- call-site for buzz
}

function foo() {
	// call-stack is: foo
	// then, our call-site is in the global scope

	console.log('foo');
	fizz();	// <-- call-site for fizz
}

foo();	// <-- call-site for foo
```

You should be careful when you're analyzing your call-stack to determine what your actual call-site is.

The call-stack is the sequence of your functions called in order, then your call-site is the function called right before your actual function, for instance:

|Initial       |First call|Second call|Third call|
|--------------|----------|-----------|----------|
|(empty stack) |foo()     |fizz()     |buzz()    |
|              |          |foo()      |fizz()    |
|              |          |           |foo()     |

Being at the bottom of the stack, the first function called, and at the top of the stack, the last one.

Then if we were looking for the call-site for `foo()`, since there is nothing below, the call-site would be the global scope.

For `fizz()` the call-site would be foo.
For `buzz()` the call-site would be fizz.
An so on...

Now we understand better what the call-site is and where to find it, we may proceed to the next chapter: [_**Default Binding**_](https://dev.to/kenystev/understanding-how-this-works-in-javascript---default-binding-56m4)

Thanks for reading ;)
I'll be writing the next posts of the series soon.