How is this Function even able to access the variable?

Question

I am really confused about why this function is still working despite not declaring the variables to pass in the function.

So I started it like this:

    let player1;
    let player2;
    let player;
    let showPlayerInfo;

    player1 = {
        name: 'Luis',
        health: 70,
        place: 'The Start',
        feetHair: '',
        items: 'a mobile, a watch, a 20-pound bill'
    };

    player2 = {
        name: 'Anna',
        health: 70,
        place: 'The Great Door',
        feetHair: '',
        items: 'a broom, a TV set, a 10-pound bill'
    };
    // HERE I AM DECLARING THE VARIABLE "PLAYER" INSIDE THE FUNCTION
    showPlayerInfo = function(player){ 
        console.log(`Player name is ${player.name} with health at ${player.health}.`);
        console.log(`It all starts at ${player.place}.`);
        console.log(`${player.name} has ${player.items} on them.`);
    }

    // HERE I AM CALLING THE FUNCTION DECLARING THE VARIABLE "PLAYER" TO BE USED
    player = player1;
    showPlayerInfo(player);

    // HERE I AM CALLING THE FUNCTION DECLARING THE VARIABLE "PLAYER" TO BE USED
    player = player2;
    showPlayerInfo(player);

    //IT WERKS!!!!

Ok, the code above works fine, so I go one step further and undeclare the variable "player" from the function, and the function still works because, I think, I am hard-coding the variable name in the function calls:

    // I AM NOT DECLARING THE VARIABLE "PLAYER" INSIDE THE FUNCTION
    showPlayerInfo = function(){ 
        console.log(`Player name is ${player.name} with health at ${player.health}.`);
        console.log(`It all starts at ${player.place}.`);
        console.log(`${player.name} has ${player.items} on them.`);
    }

    // Still calling function with variable "player"
    player = player1;
    showPlayerInfo(player);

    // Still calling function with variable "player"
    player = player2;
    showPlayerInfo(player);

    //IT WERKS!!!!

And the code above still works. I go one step even further and completely undeclare the variable name 'player' from both function and the function calls and I can't understand how it even knows where to get the variable from? What kind of sorcery is this? The code below still works:

    // I AM NOT DECLARING THE VARIABLE "PLAYER" INSIDE THE FUNCTION
    showPlayerInfo = function(){ 
        console.log(`Player name is ${player.name} with health at ${player.health}.`);
        console.log(`It all starts at ${player.place}.`);
        console.log(`${player.name} has ${player.items} on them.`);
    }

    // Not declaring variable "player" from the call
    player = player1;
    showPlayerInfo();

    // Not declaring variable "player" from the call
    player = player2;
    showPlayerInfo();

    //IT WERKS! BUT HOW???

Lastly, I did an experiment by undeclaring the variable from the function calls but keeping it in the function itself, and the code returns an error (Uncaught TypeError: Cannot read property 'name' of undefined at showPlayerInfo). What??? Why???:

    // I AM DECLARING THE VARIABLE "PLAYER" INSIDE THE FUNCTION
    showPlayerInfo = function(player){ 
        console.log(`Player name is ${player.name} with health at ${player.health}.`);
        console.log(`It all starts at ${player.place}.`);
        console.log(`${player.name} has ${player.items} on them.`);
    }

    // Not declaring variable "player" from the call
    player = player1;
    showPlayerInfo();

    // Not declaring variable "player" from the call
    player = player2;
    showPlayerInfo();

    //IT DOESNT WORK! BUT WHY???

Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — VLAZ, Sep 15 '19 at 16:58
First piece of code - you pass in the variable and `player = player1;` does nothing at all. Second piece of call the function is reading global variables, so `player = player1;` makes it use the correct object. Passing in the object through `showPlayerInfo(player);` does nothing. Third piece of code - as before. Fourth piece of code - the global variable is shadowed by the function parameter, so there is no access to it and `player = player1;` does nothing. — VLAZ, Sep 15 '19 at 17:01

score 1 · Accepted Answer · answered Sep 15 '19 at 16:59

var declarations, wherever they occur, are processed before any code is executed. This is called hoisting.

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global. If you re-declare a JavaScript variable, it will not lose its value.

Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed. The differences between declared and undeclared variables are:

Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.
Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.
Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).

Because of these three differences, failure to declare variables will very likely lead to unexpected results. Thus it is recommended to always declare variables, regardless of whether they are in a function or global scope. And in ECMAScript 5 strict mode, assigning to an undeclared variable throws an error.

Read more https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

score 0 · Answer 2 · answered Sep 15 '19 at 17:01

0

let player1;
let player2;
let player;
let showPlayerInfo;

You always got player variable declared in the uppermost scope, that is used :)

answered Sep 15 '19 at 17:01

Dmitriy Botov

2,623
1
15
12

How is this Function even able to access the variable?

2 Answers2