FJS26 · V46 · KURSSTART
Första passet i Avancerad frontendutveckling och TypeScript.
Chas Academy · Tisdag 10 november 2026
Avancerad frontendutveckling och TypeScript, 9 november – 3 januari.
KURSSTART
KURSSTART
Skriftlig tentamen och praktiskt prov i JavaScript. Quiz kl. 10.00, praktiskt prov 13.00–16.00. Kursmål 1, 2, 3 och 6.
Bedömd kodgranskning. Granska och refaktorera TypeScript-kod på plats. Kursmål 10.
Individuell uppgift i TypeScript. Släpps 3 december. Kursmål 4 och 9.
Projektarbete i grupp med muntlig presentation. [kursmål]
Idag och i morgon: kursmål 3. Redogöra för programmeringsparadigm, funktionell och objektorienterad programmering, och när varje paradigm är lämpligt.
Prövas på quizet 26 november
VARFÖR NU?
Förra veckan skulle vi inte ändra arrayer på plats. Idag skriver vi en klass som gör just det.
const addTodo = (todos, todo) => [...todos, todo]; const next = addTodo(todos, 'Handla'); // todos är orörd
class TodoList {
#todos = [];
add(todo) {
this.#todos.push(todo);
}
}
list.add('Handla');Det är inte ett nytt regelbyte. Det är två svar på samma fråga: var bor datan, och vem får ändra den?
VARFÖR NU?
VARFÖR NU?
Varje gång ni skriver new skapar ni en instans av en klass.
new Date() för datum och tidnew Error('...') när något går fel, och thrownew URLSearchParams() och new URL() för adressernew AbortController() för att avbryta en fetchnew Map() och new Set()document.createElement('li') ger en instans av HTMLLIElementVARFÖR NU?
this och new, som annars är mystiska.private och implements.Ett sätt att tänka kring och strukturera kod: en uppsättning principer för hur ett problem delas upp och var datan bor.
PARADIGM
Samma uppgift tre gånger: summera priset på varorna som finns i lager.
Steg för steg: hur det ska göras.
let total = 0;
for (const p of products) {
if (p.inStock) {
total += p.price;
}
}Beskriv vad du vill ha.
const total = products
.filter((p) => p.inStock)
.reduce(
(sum, p) => sum + p.price,
0,
);Data och beteende i ett objekt.
const cart = new Cart(products); cart.total();
PARADIGM
PARADIGM
Saker med eget tillstånd som lever en stund och ändras: en spelare, en kortlek, en varukorg, en anslutning.
Data som omvandlas: listor som filtreras, sorteras och räknas om. Lätt att testa, eftersom samma indata alltid ger samma utdata.
Korta, enkla steg, och när du behöver full kontroll över hur något görs, till exempel en loop som ska avbrytas i förtid.
De flesta moderna JavaScript-projekt är en hybrid av OOP och funktionell stil, men trenden har gått mot mer funktionell stil.
Funktionell stil tar vi i morgon
OOP oavsett programspråk.
Ett paradigm där koden byggs av objekt som efterliknar saker i verkligheten. Varje objekt har egenskaper (data) och beteenden (metoder).
OBJEKT OCH KLASSER
OBJEKT OCH KLASSER
OBJEKT OCH KLASSER
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
login() { /* ... */ }
createPost(text) { /* ... */ }
}const fritiof = new User( 'fritiof', 'fritt@tech.com', ); const saga = new User( 'saga', 'saga@tech.com', ); fritiof.login();
FYRA PRINCIPER
Visa bara det som behövs för att använda objektet, och göm resten.
Håll ihop data och metoderna som rör den, och skydda datan utifrån.
Låt en klass få en annan klass egenskaper och metoder, så att du slipper upprepa dig.
Olika klasser har samma metod, men var och en gör den på sitt sätt.
ABSTRAKTION
INKAPSLING
ARV
POLYMORFISM
KLASSER I JAVASCRIPT
class, med ungefär samma syntax som i andra språk.class gör dem lättare att skriva och läsa.KLASSER I JAVASCRIPT
class Song {
constructor(title, artist) {
this.title = title;
this.artist = artist;
}
play() {
console.log(
`Spelar ${this.title}`,
);
}
}const song = new Song( 'Dancing Queen', 'ABBA', ); song.play(); // Spelar Dancing Queen song.title; // 'Dancing Queen'
KLASSER I JAVASCRIPT
En metod som körs automatiskt när du skriver new. Den tar emot argumenten och ger objektet dess startvärden.
Pekar på objektet som äger koden just nu. I constructor är det det nya objektet. I en metod är det objektet du anropade metoden på: i song.play() är this samma sak som song.
Övning
Skapa en klass för ett recept. Varje recept har en titel, en tidsåtgång, en lista med ingredienser och en lista med instruktioner. Skriv en constructor, metoder som lägger till och tar bort ingredienser och instruktioner, och en metod som skriver ut hela receptet i konsolen. Skapa sedan två recept.
15 min
Du kan skriva en klass med constructor, egenskaper och metoder, och skapa instanser av den.
INKAPSLING I PRAKTIKEN
Med # går fältet inte att nå utanför klassen. Ett get ger läsrätt utan skrivrätt.
class BankAccount {
#balance = 0;
deposit(amount) {
if (amount <= 0) return;
this.#balance += amount;
}
get balance() {
return this.#balance;
}
}const account = new BankAccount(); account.deposit(100); account.balance; // 100 account.#balance = 1e6; // SyntaxError account.deposit(-50); // ignoreras
ARV I PRAKTIKEN
class Car {
constructor(brand) {
this.brand = brand;
}
present() {
return `En ${this.brand}`;
}
}
class Model extends Car {
constructor(brand, model) {
super(brand);
this.model = model;
}
}extends ger Model alla metoder från Car. super(brand) kör förälderns constructor, och den måste köras innan du använder this.
const car = new Model('Volvo', 'EX30');
car.present(); // 'En Volvo'STATISKA METODER
En statisk metod anropas på klassnamnet, inte på en instans. Den passar för saker som rör flera instanser, eller ingen alls.
class Square {
constructor(side) {
this.side = side;
}
static larger(a, b) {
return a.side >= b.side ? a : b;
}
}const a = new Square(3); const b = new Square(5); Square.larger(a, b); // b a.larger(a, b); // TypeError
OOP gömmer mutationen bakom metoder. Funktionell stil undviker den helt. Båda är sätt att ha kontroll över vem som ändrar datan.
EFTER PASSET
Skapa klasserna Card, Deck och Player med ES6-klasser. Repo: github.com/chasacademy-sandra-larsson/js--oop-poker
EFTER PASSET