Scope

let myName = "James"

function amazingFunction() {
  console.log(myName)
}

amazingFunction();

Dette er ikke noe nytt – vi har gjort lignende ting før. Men scope har å gjøre med hvor vi kan få tak i en variabel. 

La oss prøve å flytte variabelen myName inn i funksjonen, og flytte console.log til under der vi kaller funksjonen:

function amazingFunction() {
  let myName = "James"
}

amazingFunction()
console.log(myName)

Hva får du som resultat av dette?

Konsollet vil gi oss en feilmelding, som sier “myName is not defined”. Hvorfor får vi denne?

Hver gang vi setter opp krøllparanteser {}, så skaper vi vår egen “verden”, som har sitt sett med variabler. På den måten er myName “scoped” til kun å fungere inni funksjonen, men ikke utenfor.

Grunnen til at det første eksemplet fungerte, er fordi myName blir laget (deklarert) i det globale scopet. Det globale scopet inkluderer alle variabler som ikke blir deklarert innenfor krøllparanteser {}. La oss gå tilbake til det første eksemplet, og legge til noen små endringer:

let myName = "James"

function amazingFunction() {
  if (true) {    console.log(myName)  } 
}

amazingFunction();

Siden vi skriver if (true), så lager vi et nytt scope som alltid vil kjøre.

La oss deklarere (lage) variablen myName på nytt inni dette scopet:

let myName = "James"

function amazingFunction() {
  if (true) {
    let myName = "Jennifer"
    console.log(myName)
  } 
}

amazingFunction();

I konsollet ser vi nå “Jennifer” istedenfor “James”. Hvis vi kommenterer ut Jennifer-linjen i koden, så vil vi se “James” igjen. Dette er fordi JavaScript først sjekker de nærmeste scopene etter variabelnavnet. Så får vår del, sjekker den først inni if-blokka, og deretter sjekker den inni funksjonsblokka, og til slutt sjekker den det globale scopet. Hvis den ikke finner noe, returnerer den med en feilmelding om at den ikke finner det angitte variabelnavnet.

La oss legge til en myName variabel i hvert scope, og logge de til konsollet:

let myName = "James"

function amazingFunction() {
  let myName = "Jade"
  if (true) {
    let myName = "Jennifer"
    console.log("Inside the if-statement", myName)
  }
  console.log("Inside the function", myName)
}

console.log("In the global scope", myName)

Det vi ser er at disse er tre vidt forskjellige selvom de har samme variabelnavn.

La oss rydde litt igjen. Hva om vi ønsket å oppdatere fra James til Jade, uten å lage en ny variabel med samme navn? Jo, vi kan fjerne “let” foran den andre myName:

let myName = "James"

function amazingFunction() {
  if (true) {
    myName = "Jade"
  }
}

console.log(myName) // logg før funksjonskallet
amazingFunction()
console.log(myName) // logg etter funksjonskallet