JS 1.1 JavaScript / ECMAScript
Table of contents
ECMAScript och standardiseringar
- JS har gått från att vara ett marknadsknep 1995 (det heter JavaScript pga Java var ett populärt språk) till att bli ett av de mest populära och snabbast växande utvecklingsmiljöerna 2021
- En idé om en enkel version av Java som kunde köras på internet
- Hette först Mocha, sen LiveScript, sen JavaScript.
- JS körs inte bara på webben utan används i allt från physical computing till NASA’s design av rymddräkter
- Började i frontend men nu är mycket JS också i backend
- ECMA sätter standarden,JavaScript får standardiseringsnamnet ES (ECMAScript) av en kommitté som heter TC39
- JavaScript har dock en del funktionalitet som inte finns i ECMAScript
- När det kommer en ny standard, så får vi som utvecklare tillgång till nya verktyg
- Sedan 2015 kommer en ny version varje år
Begrepp
ECMAScript
Ett språk som standardiseras av ECMA International och ses över av TC39 kommittén, det är den standarden som refereras till när vi säger ECMAScript.
JavaScript
Namnet för implementationer av ECMAScript standarden. Inte knuten till en specifik version av språket utan kan hänvisa till vilken som.
ECMASCript 5 (ES5)
5:e versionen av ECMAscript, standardiserades 2009, stöds fullt ut i alla moderna webbläsare.
ECMAscript 6 (ES6)
6:e versionen av ECMA script, standardiserades 2015. Är implementerad i de flesta moderna webbläsare (vissa undantag).
ES.Next
Nästa version av ES, kallas bleeding edge. Har börjat implementeras men inte gått i drift än.
TC39 process
Varje förslag på tillägg i ECMAscript går igenom s.k maturity stages:
De fyra (fem) stegen
- Steg 0 - Strawman
- idéer för nya tillägg
- input till specifikationen
- Steg 1 - Proposal
- formell ansökan för tillägg
- beskriv lösningen
- identifiera eventuella svårigheter
- Steg 2 - Draft
- en version med det som ska in i specifikatioen
- beskriv syntax och semantik formellt i specifikationens språk
- Steg 3 - Candidate
- feedback och implementation
- Steg 4 - Finished
- förslaget klart att läggas till i den formella standarden
Syntax
Nedan följer lite olika exempel på JavaScripts syntax.
Variabler
Tre sätt att definiera variabler:
const- konstant, kan inte ändras, bör användas som standardlet- variabel som kan ändrasvar- deprecated efter ES6
Problemet med var är att variabeln går att deklarera igen, och blir då uppdaterad.
Exempel
var greeting = 'hi';
// update variable 'greeting'
greeting = 'hey there';
// this also updates 'greeting
var greeting = 'hello';
Med letså skulle det senare exemplet istället ge en error. Det här beteendet som var har ställer till problem. Om vi t.ex har deklarerat en global variabel som heter greeting, och sen skapar en annan lokal variabel med samma namn, så kommer JS att tro att vi vill uppdatera den globala variabeln. 1
Exempel
var greeting = 'hi';
function varTest() {
var greeting = 'hello'; // this updates global variable
console.log(greeting); // hello
}
// global variable updated
console.log(greeting); // hello
let greeting = 'hi';
function letTest() {
let greeting = 'hello'; // declare local variable with same name
console.log(greeting); // hello
}
// global variable hasn't changed
console.log(greeting); // hi
Rekommenderat är därför att aldrig använda var, och att använda const som standard, så vi inte råkar updatera en variabel som inte ska uppdateras (det är omöjligt att ändra värde på const).
Funktioner
En funktion är ett eller flera statements som utför en uppgift eller räknar ut något. Den tar ofta en input och returnar en output. En funktion kan ta in en eller flera parametrar som definieras inom parentes () och separeras med komma-tecken ,. Parametrarna är som placeholders för de argument (värden) vi skickar in när vi kallar på (invokar) funktionen. Inuti funktionen beter sig parametrarna/argumenten som lokala variabler. 2
Det finns lite olika sätt att deklarera funktioner i JavaScript. Basic syntax för funktioner annoteras med nyckelordet function. Funktionsnamnet skrivs med camelCase.
Exempel 3
function fnName(parameter) {
return statement;
}
// invoke function
fnName(argument);
Funktion med parameter
function square(a) {
return a * a;
}
// invoke function
square(10); // 1000
Funktion med flera parametrar
function addition(a, b) {
return a + b;
}
// invove function
addition(4, 6); // 10
Function utan parametrar
function bark() {
return 'woof-woof';
}
// invoke function
bark(); // woof-woof
Om en function inte skrivs direkt i det globala scopet, eller deklareras i en variabel, så kallas det function expression. I ett function expression kan vi ha både anonyma och namnade funktioner, det senare fallet är bara nödvändigt om vi måste hänvisa till funktion i funktionen i sig, då namnet bara blir lokalt till funktionens scope. 4
Exempel
Anonym function expression
const name = function(firstName, lastName) {
return `${firstName} ${lastName}`;
}
// invoke function
name('Bosse', 'Stenwall'); // Bosse Stenwall
Namnad function expression 4
let math = function factorial(n) {
console.log(n)
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
}
// invoke function
math(3) //3;2;1;
Ett enklare (och mer och mer vanligare) sätt att skriva function expressions på är genom arrow functions. Beroende på hur simpla funktionerna är så går de att förenkla väldigt mycket. Arrow är alltid anonyma och skrivs med en s.k. fat arrow (=>).
Exempel
Arrow function
const square = (a) => {
return a * a;
}
square(10); // 1000
Om funktionen bara har ett return statement så kan vi strunta i nyckelordet return, parentesen (såvida vi bara har en parameter) och måsvingarna om vi skriver allting på en rad.
const square = a => a * a;
square(10); // 1000
Om funktionen inte har några parametrar måste vi dock ha med parenteserna. Detsamma gäller om vi har fler än en parameter.
const bark = () => 'woof-woof';
bark(); // woof-woof
const addition = (a, b) => a + b;
addition(4, 6); // 10
Vi kan också sätta default value på våra parametrar.
const name = (firstName, lastName = 'Stenwall') {
return `${firstName} ${lastName}`;
}
// invoke function
name('Bosse', 'Stenwall'); // Bosse Stenwall