Scope Findings - wongsrila/intern-match GitHub Wiki

Scope is de toegankelijkheid van variabelen, functies en objecten in een bepaald deel van de code tijdens runtime. Met andere woorden, scope bepaalt de zichtbaarheid van variabelen en andere bronnen in delen van de code.

if (true) {
    const message = 'hello';
    message; // => hello
}

message; // referenceError

Waarom bestaan er scopes?

Waarom zou je de zichtbaarheid van variabelen beperken en niet alles gewoon overal in de code beschikbaar maken? Een voordeel is dat het scope een bepaald niveau van beveiliging voor de code biedt. Een veelgebruikt principe van computerbeveiliging is dat gebruikers alleen toegang mogen hebben tot de dingen die ze nodig hebben.

Scope in JavaScript

In JavaScript heb je twee soorten scopes:

• globale scope
• lokale scope

Variabelen die binnen een functie zijn gedefinieerd, bevinden zich in het lokale scope, terwijl variabelen die buiten een functie zijn gedefinieerd, zich in het globale scope bevinden. Elke functie die wordt aangeroepen, creëert een nieuw scope

Globale Scope

// de scope is standaard globaal
var name = 'First';

Variabelen binnen het Globale scope kunnen worden geopend en gewijzigd in elk ander scope.

var name = 'First';

console.log(name); // logt 'First'

function logName() {
    console.log(name); // 'name' is hier beschikbaar maar ook andere op andere plekken
}

logName(); // logt 'First'

Lokale scope

Variabelen die binnen een functie zijn gedefinieerd, bevinden zich in het lokale scope. Ze hebben een ander scope voor elke aanroep van die functie. Dit betekent dat variabelen met dezelfde naam in verschillende functies kunnen worden gebruikt. Dit kan omdat ze in verschillende scopes zitten.

// Globale Scope
function someFunction() {
    // Lokale Scope #1
    function someOtherFunction() {
        // Lokale Scope #2
    }
}

Block Statements

Block statements zoals if en switch conditions of for en while-loops maken, in tegenstelling tot functies, geen nieuwe scope. Variabelen die binnen een Block statements zijn gedefinieerd, blijven binnen het scope waarin ze zich al bevonden.

var maakt geen nieuwe scope. let en const maken wel een lokale scope:

if (true) {
    // this 'if' conditional block doesn't create a scope

    // name is in the global scope because of the 'var' keyword
    var name = 'Hammad';
    // likes is in the local scope because of the 'let' keyword
    let likes = 'Coding';
    // skills is in the local scope because of the 'const' keyword
    const skills = 'JavaScript and PHP';
}

console.log(name); // logs 'Hammad'
console.log(likes); // Uncaught ReferenceError: likes is not defined
console.log(skills); // Uncaught ReferenceError: skills is not defined

Bronnen

Pavlutin, D. (2020, 24 april). A Simple Explanation of Scope in JavaScript. Dmitri Pavlutin Blog. https://dmitripavlutin.com/javascript-scope/

Ahmed, H. (2019, 8 juli). Understanding Scope in JavaScript. Scotch. https://scotch.io/tutorials/understanding-scope-in-javascript