# Context loss in JavaScript

Let's say we have a function within a function. Let's call the outer function `parent` and the inner one `child`:

`function parent() { function child() { } }`

From previous lessons you know that if you set any variable in the outer function, it will be available in the inner one

`function parent() { let str = 'abcde'; function child() { console.log(str); // shows 'abcde' } child(); // calls the inner function } parent(); // calling the outer function`

There is, however, a nuance: the inner function has access to all variables of the outer one, but does not have access to `this`. That is: if an external function is bound to some DOM element, then `this` in it will point to this element, but `this` of the inner function will not!

What would `this` of the inner function point to then? Answer: it will be equal to `undefined` (in strict mode) since the function is not bound to anything.

Let's check in practice. Let us have an input:

`<input id="elem" value="text">`

Let's attach the function `parent` to this input, which will be called when the input loses focus:

`"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); // Called on loss of focus: function parent() { // there will be some code function child() { // there will be some code } child(); // calls child function }`

Let's print the contents of `this` to the console in two places: inside the `parent` function and inside the `child` function:

`"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this); // will display the reference to our input function child() { console.log(this); // will display undefined } child(); }`

Run this code, lose focus to the input and look at the console - you will see that the first `console.log` will print a reference to our input to the console, and the second will just `undefined`. This situation, when `this`, in an unexpected way for us, indicates not what we need, is called context loss.

Let now in one and in the second function we will display `value` of the input. Determine what will be displayed in the lines of code marked with comments:

`"use strict"; let elem = document.querySelector('#elem'); elem.addEventListener('blur', parent); function parent() { console.log(this.value); // what will output? function child() { console.log(this.value); // what will output? } child(); }`
← →
↑
en ru