JavaScript

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

Funktionaalinen ohjelmointi JavaScriptissä: map, filter, find, foreach

JavaScriptin taulukot tarjoavat monia sisäänrakennettuja metodeja taulukkomuotoisen datan käsittelyyn. Näistä keskeisimmät menetelmät ovat:

Nämä metodit käyttävät usein funktio-ilmaisuja tai nuolifunktioita (arrow functions), jotka tekevät koodista tiiviimpää ja luettavampaa. Funktioiden käyttö taulukkometodeissa, kuten map, filter ja reduce, vie JavaScriptin funktionaaliseen ohjelmointiin ja tekee koodista tiiviimpää, selkeämpää ja helpommin ylläpidettävää.

array.forEach() - toista toiminto jokaiselle alkiolle

forEach() suorittaa annetun toiminnon jokaiselle taulukon alkiolle. Sitä käytetään, kun halutaan tehdä jotain jokaiselle taulukkoon tallennetulle arvolle jokin toiminto. Seuraava esimerkki tulostaa konsoliin listauksen hedelmistä: 


let hedelmat = ["omena", "banaani", "appelsiini"];

hedelmat.forEach(function(hedelma) {
  console.log("Hedelmä: " + hedelma);
});

array.map() – Luo uusi taulukko muutetuista arvoista

map()-metodi käy jokaisen taulukon alkion läpi ja palauttaa uuden taulukon muunnetuista arvoista ilman että alkuperäinen taulukko muuttuisi.


let hedelmat = ["omena", "banaani", "appelsiini"];

let isotKirjaimet = hedelmat.map(function(hedelma) {
  return hedelma.toUpperCase();
});

console.log(isotKirjaimet); // ["OMENA", "BANAANI", "APPELSIINI"]

Map()-menetelmä on erittäin keskeinen funktionaalisessa ohjelmoinnissa, koska se tekee datan käsittelystä selkeää, luettavaa ja tehokasta muuttamatta alkuperäistä dataa.

array.filter() – Suodattaa ehdon täyttävät arvot

filter() palauttaa uuden taulukon vain niistä arvoista, jotka täyttävät annetun ehdon.


let hedelmat = ["omena", "banaani", "kiivi", "meloni"];

let pituusyli5 = hedelmat.filter(function(hedelma) {
  return hedelma.length > 5;
});

console.log(pituusyli5); // ["banaani", "meloni"]

array.find() – Palauttaa ensimmäisen sopivan arvon

find() palauttaa ensimmäisen arvon, joka täyttää ehdon. Jos sopivaa arvoa ei löydy, palautetaan undefined. Huomaathan, että find soveltuu vain tilanteisiin joissa haetaan ensimmäistä osumaa. Jos etsit kaikkia täsmääviä arvoja edellä esitelty filter()on parempi työkalu.


let hedelmat = ["omena", "banaani", "kiivi", "meloni"];

let alkaaK = hedelmat.find(function(hedelma) {
  return hedelma.startsWith("k");
});

console.log(alkaaK); // "kiivi"

array.reduce() - yhdistää alkiot

reduce()-metodi suorittaa toiminnot taulukon jokaiselle alkiolle ja palauttaa yksittäisen arvon. Tämä on erittäin tehokas tapa laskea summia tai yhdistää arvoja.


const luvut = [1, 2, 3, 4];
const summa = luvut.reduce(function(acc, luku) {
    return acc + luku;
}, 0);

console.log(summa); // 10

array.push() ja array.pop() – Lisää tai poistaa taulukon lopusta

push()-menetelmä lisää uuden alkion taulukon loppuun, pop() poistaa taulukon viimeisen alkion. Nämä perustoiminnot ovat olennaisia, kun työskennellään esimerkiksi jonojen (queu) tai pinojen (stack) kanssa.


let hedelmat = ["omena", "banaani"];
hedelmat.push("appelsiini");
console.log(hedelmat); // ["omena", "banaani", "appelsiini"]

hedelmat.pop();
console.log(hedelmat); // ["omena", "banaani"]

array.shift() ja array.unshift() – Lisää tai poistaa taulukon alusta

Shift() ja unshift() toimivat kuten pop() ja push(), mutta niiden vaikutus kohdistuu taulukon alkuun. 


let hedelmat = ["omena", "banaani"];
hedelmat.unshift("kiivi");
console.log(hedelmat); // ["kiivi", "omena", "banaani"]

hedelmat.shift();
console.log(hedelmat); // ["omena", "banaani"]

Artikkelin tiedot

Otsikko: Funktionaalinen ohjelmointi JavaScriptissä: map, filter, find, foreach

Kuvaus: Opi funktionaalisen ohjelmoinnin perusperiaatteet JavaScriptissä. Tutustu taulukon metodeihin kuten map, filter, find ja foreach.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: