JavaScript ES6
År 2015 släppte ECMAScript-gruppen en ny standard för JavaScript vilket de kallar för ECMAScript 2015 men de flesta kallar för ECMAScript 6 (ES6).
Anledningen till att de kallar JavaScript för ECMAScript är att JavaScript är ett trademark som ägs av Oracle ...
European Computer Manufacturers Association (ECMA) är en kommitté som utvecklar "standarder" inom data.
Förra versionen av JavaScript kallades ES5 och introducerade bland annat Array.map och String.match. De flesta webbläsare har i dag stöd för ES5 och kommer inom en snar framtid att även stödja ES6.
ES5 var en ganska liten uppdatering jämfört med ES6. Tack och lov är tidigare versioner av ECMAScript kompatibla med varandra, så nuvarande JavaScript kommer fortfarande att fungera när webbläsarna implementerar stöd för ES6.
Jag har gjort en lista på de nyheter som du troligtvis snart kommer att stöta på "ute i det vilda", både bra och dåliga ...
Nya funktioner i JavaScript ES6 / ECMAScript 2015
Kod säger mer än tusen ord!? Jag har kommenterat bort hur koden kunde se ut innan ES6
Attribut förkortning
Man behöver inte skriva båda variablernas namn om de är lika ...
var förnamn = "Jan";
var efternamn = "Banan";
var ålder = 32;
//var person = {förnamn: förnamn, efternamn: efternamn, ålder: ålder};
var person = {förnamn, efternamn, ålder};
Standardvärde i funktionens argument
function addera(termA = 2, termB = 2)
// if(termA === undefined) termA = 2;
// if(termB === undefined) termB = 2;
return termA + termB;
}
Template strängar
Gör det enklare att använda strängar som sträcker sig över flera rader. Man slipper även konkatenera strängen för att infoga variabler.
var rum = "köket";
var person = "min sambo";
var html = `<ul>
<li>Städa ${rum}</li>
<li>Diska</li>
<li>Laga mat åt ${person}</li>
<ul>`;
Binära värden och array
Det är nu möjligt att komma åt och manipulera rå binär data, till exempel audio och video via Websocket, FileReader, XMLHttpRequest och ImageData.
Dåliga nyheter
Här är en lista på nya funktioner som jag inte tycker är lika bra ...
Anonyma pilar
I stället för anonyma funktioner kan du göra anonyma pilar. Och du slipper skriva function och return
Undvik anonyma funktioner (och anonyma pilar) då de gör koden svårare att debugga och ofta resulterar i djupa pyramider (engeska: Pyramid of Doom, Christmas tree from hell).
//personer.forEach(skickaBrev);
//function skickaBrev(person) { ... };
personer.forEach((person) => {...});
//function addera(termA, termB) {return termA + termB}
addera = (termA, termB) => termA + termB;
// Pyramid of Doom, Christmas tree from hell etc:
g(()=>{
o(()=>{
d(()=>{
j(()=>{
u(()=>{
l(()=>{
}
}
}
}
}
}
Lista resterande argument i funktion
Om funktionen kan ta olika många argument, använd object eller array i stället!
//adderaMånga([1, 2, 3]);
//function adderaMånga(termer) {return termer.reduce(addera)}
adderaMånga(1, 2, 3);
function adderaMånga(...termer) {return termer.reduce(addera)}
Modulsystem
Det finns redan ett modulsystem i JavaScript som kallas "commonJS". Detta modulsystem används i NodeJS och är mycket bättre än det modulsystem ESCMA har förslagit. Detta har gjort att muduler i JavaScript befinner sig i limbo då webbläsarna varken har support för ECMA-moduler eller CommonJS moduler
Om du programmerar JavaScript i NodeJS, fortsätt använda require! (commonJS)
//var städrobot = require("städrobot");
import * as städrobot from "städrobot.js"
Klasser
Det går redan att skapa klass-liknande objekt i JavaScript, så kallada mallar genom att använda prototype. Fortsätt använda prototype!
// function Moppe() {this.modell = "Yamaha"; this.växel = 1;}
// Moppe.prototype.gasa = function() {...}
Class Moppe {
constructor() {
this.modell = "Yamaha";
this.växel = 1;
}
gasa() {
console.log("Javvlar va fort det går med " + this.modell + "!");
}
}
Löften (Promise)
Funktioner kan returnera ett så kallat Promise som går att köra i ett senare skede genom att anropa metoden then.
Fortsätt använda asynkrona funktioner!
// läsFil("minfil.txt", läst)
// function läst(err, text) { ... }
var filLöfte = lovaAttLäsaFil("minfil.txt");
filLöfte.then(läst).catch(error);
function läst(text) {...};
function error(fel) {...};
I ES7 (efter ES6) planerar ECMA att införa await vilket kommer göra att programmet väntar ...
Vilket gör att man slipper skriva then, dock måste man använda try catch i stället för catch för att fånga errors.
try {
var text = await lovaAttLäsaFil("minfil.txt");
}
catch(fel) { ...}
Omstrukturering av variabler
Det går att deklarera variabler genom att omstrukturera ett object eller array.
var person = {förnamn: "Jan", efternamn: "Banan", ålder: 32};
//alert("Hej + " person.förnamn);
var {förnamn, efternamn, ålder} = person;
alert("Hej " + förnamn);
Det är dock ofta onödigt att skapa nya variabler för objektens attribut och metoder, när man kan skriva objekt.attribut. Det är även lättare att förstå att person.förnamn är personens förnamn när det skrivs ihop.
Fågelvings-definitions-område med let, const och function
Variabler deklarerade med var kommer fortfarande att ha funktionen som definitionsområde (engelska: function scope).
Men variabler deklarerade med let eller const kommer att ha måsvingarna {} som definitionsområde (engelska: block scope).
function test() {
// Funktionens definitionsområde
{ // Måsvingen
// Måsvingens definitionsområde
var förnamn = "Per";
let efternamn = "Persson";
console.log("Innanför måsvingen är förnamn=" + förnamn); // Per
console.log("Innanför måsvingen är efternamn=" + efternamn); // Persson
}
console.log("Innanför funktionen är förnamn=" + förnamn); // Per
console.log("Innanför funktionen är efternamn=" + efternamn); // undefined
}
test();
console.log("Utanför funktionen är förnamn=" + förnamn); // undefined
console.log("Utanför funktionen är efternamn=" + efternamn); // undefined
Om du är van vid "function scope", fortsätt då använda var. Men använd let om du är van vid "block scope" som är vanligt i andra programmerings-språk.
const gör att det inte går att peka om variabeln, vilket är användbart för globala variabler för att undvika att de skrivs över.
Fortsätt använda STORA_BOKSTÄVER för globala (statiska) variabler.
Tänk på att det fortfarande går att peka om attribut och metoder i ett objekt, även om det har deklarerats med const
Skrivet av Johan Zetterberg Oktober 21, 2016.
