JavaScript

HUR DET FUNGERAR

UTIFRÅN OCH IN 👀

JavaScript-motorn

Den som exekverar JS-kod.

v

V8 för Chrome och Node.js. JS-motorn utvecklas av respektive webblÀsare, men ska följa EcmaScript-standard

KĂ€llkod => Maskinkod i JS

Kompilering, Intepretering, Just-in-time (JIT) kompilering

?

KĂ€llkod => Maskinkod i JS

KĂ€llkod

Maskinkod

Programmet körs

KOMPILERING

INTEPRETERING

JUST-IN-TIME KOMPILERING

KĂ€llkod

Programmet körs

Kompilering

Exekvering

Exekveras rad för rad

KĂ€llkod

Maskinkod

Programmet körs

Kompilering

Exekvering sker direkt

Text

(sparas ej)

Dynamisk typning

Javascript intepreteraren (eller JIT) tilldelar vÀrdet en datatyp vid runtime. En "10" blir en string och 10 blir ett Number. Och programmeraren kan sedan typomvandla vid behov.

Motsvarigheten heter statisk typning och dÀr mÄste programmeraren explicit ange datatyp som string, int, osv. SÄ Àr fallet i programmeringsprÄk som C++, C#, Java, etc

JavaScript Runtime-miljö

WEB API

Text

Text

(i kursmÄlen refereras Web API som Browser API)

Ni har hunnit anvÀnda en del frÄn Web API.

DOM, fetch, Local Storage..

Sen finns det en hel del till:

Geolocation, Canvas, Fullscren, WebGL

MDN Web API:s

Alla webblÀsare har ett (urval av) av inbyggt support av Web API

Call Stack

Hur Javascriptmotorn hÄller reda pÄ hur funktionen anropas. Vilka funktioner som körs och vilka funktioner som vÀntar pÄ att köras o.s.v.

Callstack arbetar utifrÄn principen LIFO - last in first out.

NÀr en funktion anropas kommer den att lÀggas till call stack, nÀr den returnas kommer information om funktionen tas bort frÄn call stack.

function firstFunction(){
  console.log("Hello from firstFunction");
}

function secondFunction(){
  firstFunction();
  console.log("The end from secondFunction");
}

secondFunction();

I vilken ordning kommer dessa exekveras i Call Stack?

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);
# CALL STACK

Call Stack enligt LIFO

Bra verktyg för visualisering

Loupe

Stack overflow

Om antalet exekveringar överskrider antal möjliga som kan finnas pÄ call stack resulteras det i stack overflow. Testa denna...

function fn() {
    fn();
}

fn(); // stack overflow

Single-threaded

 Call Stack som anvÀnds för exekvering hanterar bara en instruktion i taget. För varje given tid kan alltsÄ bara en process köras.

 

Det finns andra programmeringsprÄk som Àr multi-threaded som C/C++ , men dÄ riskerar man Àven komma i scenarios som exempelvis deadlock.

 

Men om Javascript Àr single-threaded hur kan Javascript dÄ göra asynkrona anrop?

Tips pÄ bra genomgÄng!

Philips verktyg Loupe

Scope

I ett programmeringssprĂ„k innebĂ€r "scope” av en variabel den synlighet och livslĂ€ngd den har utifrĂ„n dĂ€r den har deklarerats.

Vi ska gÄ i djupare detalj, men först ett kort exempel. Vad kommer att skrivas ut?

let a = "hello";

function greet() {
    let b = "World"
    console.log(a + b);
}

greet();
console.log(a + b);

Scope

I Javascript finns det tre olika omrÄden utifrÄn var variabeln Àr deklarerad. D.v.s tre olika typer av scope.

1. Global scope

2. Block scope

3. Function scope

Global Scope

En variabel Àr deklarerad utanför en funktion eller ett block.

En variabel deklarerad i global scope Àr Ätkomligt överallt - alltsÄ i hela scriptet, modulen...

let a = "hello";

function greet () {
    console.log(a);
}

greet(); // hello

Variabeln a Àr deklarerad i global scopet

Block Scope

Variabler deklarerade inuti ett block Àr endast Ätkomliga inom blocket.

Allt innanför { } betraktas som ett block - funktion, for-loop, etc

Kan ocksÄ kallas Local Scope

let a = "hello";

function greet() {
    let b = "World"
    console.log(a + b);
}

greet();
console.log(a + b); // error

Variabeln b Àr deklarerad i ett block => Block Scope

Detta Àr alltsÄ förfarandet för deklarering med let och const (ES6)!

Function Scope

Variabler deklarerade inuti en funktion Àr endast Ätkomliga inom funktionen.

Den Àldre deklareringen med var skapade endast function scope och inte block scope.

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar

  for(let i = 0; i < 5; i++) {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();

Scope Chain

let a = 'Hello';

function greet() {

    // local variable
    let b = 'World';

    console.log(a + ' ' + b);

    if (b == 'World') {

        // block-scoped variable
        let c = 'hello';

        console.log(a + ' ' + b + ' ' + c);
    }

    // variable c cannot be accessed here
    console.log(a + ' ' + b + ' ' + c);
}

greet();
# SCOPE

Variabler som inte hittas i sitt scope söker efter variabeln i det yttre scopet. Och sÄ vidare..

Leta efter variabler uppĂ„t ☝ 

inte nerĂ„t 🙃

Lexical Scope

Just detta förfarande hur Javascript hanterar scope kallas för Lexical Scope. Det Àr en konvention som Àven andra programsprÄk har.

Primitiver v.s Objekt

string

number

booelan

undefined

null

symbol

bigint

Object {}

Arrays

Funktioner

Klasser

Dates

...

egentligen allt annat representeras som ett objekt

"Pass by value" v.s "Pass by reference"

Fundamentalt att förstÄ för att undvika buggar!

Exempel: Du har ett objekt eller array och gör en kopia pĂ„ denna. Sen Ă€ndrar du i orginalarrayen och det visar sig att kopians vĂ€rden ocksĂ„ Ă€ndrades 😒

Men detta hÀnder ju inte om vi kopierar primitiva vÀrden...

Vad Àr skillnaden mellan att kopiera primitiva vÀrden och objekt?

Primitiver sparas pÄ Stack-minnet

Men Objekt sparas i Stack-minnet endast som en referens som anger  (pekar) var i Heap-minnet objektets vÀrde finns

NÀr man kopierar en primitivs variabel i stack-minnet Àr de oberoende av varandra

Men nÀr man kopierar ett objekt, sÄ Àr det referensen som man kopierar och de pekar pÄ samma adress i Heap-minnet