JavaScript Lad

Indholdsfortegnelse

Vis indholdsfortegnelse

Søgeordet let blev introduceret i ES6 (2015)

Variabler defineret med let kan ikke Gendeklareres

Variabler defineret med let skal erklæres før brug

Variabler defineret med lad have Block Scope

Kan ikke genangives

Variabler defineret med let kan ikke genangives.

Du kan ikke ved et uheld generklære en variabel erklæret med let.

Med let kan du ikke gøre dette:

let x = "John Doe";

let x = 0;

Med var kan du:

var x = "John Doe";

var x = 0;

Blok omfang

Før ES6 (2015) havde JavaScript Global Scope og Function Scope.

ES6 introducerede to vigtige nye JavaScript-nøgleord: let og const.

Disse to søgeord giver Block Scope i JavaScript.

Variabler erklæret inde i en { } blok kan ikke tilgås fra uden for blokken:

Eksempel

{ 
  let x = 2;
  }
// x can NOT be used here

Variabler, der er erklæret med var nøgleordet, kan IKKE have blokomfang.

Variabler erklæret inde i en { } blok kan tilgås fra udenfor blokken.

Eksempel

{ 
  var x = 2; 
  }
// x CAN be used here

Genangivelse af variabler

Genangivelse af en variabel ved hjælp af var nøgleordet kan give problemer.

Genangivelse af en variabel inde i en blok vil også generklære variablen uden for blokken:

Eksempel

var x = 10;
// Here x is 10

{ 
var x = 2;
// Here x is 2
}

// Here x is 2

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using var</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10

{  
var x = 2;
// Here x is 2
}

// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Genangivelse af en variabel ved hjælp af let nøgleordet kan løse dette problem.

Generklæring af en variabel inde i en blok vil ikke generklære variablen udenfor blokken:

Eksempel

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Forskellen mellem var, let og const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

Hvad er godt?

let og const har blokeringsområde.

let og const kan ikke genopgives.

let og const skal deklareres før brug.

let og const binder ikke til dette.

let og const er ikke hejst.

Hvad er ikke godt?

var skal ikke deklareres.

var er hejst.

var binder sig til dette.

Browser support

Søgeordene let og const er understøttes ikke i Internet Explorer 11 eller tidligere.

Følgende tabel definerer de første browserversioner med fuld understøttelse:


Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

Generklærer

Genangivelse af en JavaScript-variabel med var er tilladt hvor som helst i et program:

Eksempel

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>

<p id="demo"></p>

<script>
var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Med let er generklæring af en variabel i samme blok IKKE tilladt:

Eksempel

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

Generklæring af en variabel med let, i en anden blok, ER tilladt:

Eksempel

let x = 2;   // Allowed
{
let x = 3;   // Allowed
  }
  
  {
let x = 4;    // Allowed
  }

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>

<p id="demo"></p>

<script>
let x = 2;   // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Lad hejsning

Variabler defineret med var er hejst til toppen og kan initialiseres til enhver tid. <p>Betydning: Du kan bruge variablen, før den erklæres:

Eksempel

Det er i orden:

 carName = "Volvo";
  var carName;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

Hvis du vil lære mere om hejsning, så læs kapitlet JavaScript-hejsning. <p>Variabler defineret med let er også hejst til toppen af blokken, men ikke initialiseret.

Betydning: Brug af en let-variabel, før den erklæres, vil resultere i en ReferenceError:

Eksempel

carName = "Saab";
let carName = "Volvo";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>