Ohjelmistoprosessin työvälineet

JEST-demo 2

Kerrataan JavaScript-asioita ja käydään läpi uusia asioita mm. reduce, map ja filter. Lisää demot-kansioon uusi .js-tiedosto jossa kokeillaan tämän demon asioita.

Taulukko

Esitellään kaksi taulukkoa:

const games = ["Super Mario Bros", "Metroid", "Donkey Kong", "Zelda"];
const games2 = ["Metroid II", "Super Mario World"];
                    

Lisää funktio printGames(arr) joka tulostaa taulukon sisällön sekä indeksin:

0: Super Mario Bros
1: Metroid
2: Donkey Kong
3: Zelda
4: Donkey Kong Country    

Taulukon muuttaminen

Kokeillaan taulukon muuttamista:

• push
• pop
• concat
• spread

Kokeile miten eroaa taulukon yhdistäminen spread-operaattorilla ja ilman sitä:

const joinGames = [games, games2];    
const joinGames2 = [...games, ...games2];    

Oliotaulu

Tehdään monimutkaisempi taulukko joka sisältää kaksi oliota:

const book = {
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    pages: 1178
};

const book2 = {
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    pages: 295
};

const books = [book, book2];    

map

map palauttaa taulukon ja suorittaa jokaiselle alkuperäisen taulukon alkiolle funktion. mapin käyttö on nuolifunktion avulla varsin tehokasta.

Otsikot omaan tauluun:

const arrTitles = books.map(b => b.title);

Uusi olio uuteen tauluun:

const libraryBooks = books.map(b => {
    let newBook = { ...b, reservations: 0, loans: 0 }
    return newBook;
});    

filter

Filter palauttaa taulukon jonka muodostavat ne alkuperäisen taulukon alkiot jotka täyttävät tietyn ehdon.

const shortBooks = libraryBooks.filter(b => b.pages < 500);

reduce

Reducen avulla voidaan helposti hakea esimerkiksi summa taulukon sisältä.

let totalPages = books.reduce((total, b) => total + b.pages, 0);