{"id":348,"date":"2025-01-08T08:45:00","date_gmt":"2025-01-08T06:45:00","guid":{"rendered":"http:\/\/localhost:8888\/wordpress\/?p=348"},"modified":"2025-01-05T09:57:34","modified_gmt":"2025-01-05T07:57:34","slug":"es6-ecmascript-2015","status":"publish","type":"post","link":"https:\/\/www.pilvikoodari.net\/?p=348","title":{"rendered":"Javascript: ES6 \/ ECMAScript 2015"},"content":{"rendered":"\n

Vuonna 2025 tulee kuluneeksi 10 vuotta Javascript-ohjelmointikielen merkitt\u00e4v\u00e4st\u00e4 virstaanpylv\u00e4\u00e4st\u00e4: silloin julkaistiin Javascript kielen p\u00e4ivitys, joka sai nimekseen ES6<\/strong> tai toiselta nimelt\u00e4\u00e4n ECMAScript 2015<\/strong>.<\/p>\n\n\n\n

Miksi kyseess\u00e4 oli merkitt\u00e4v\u00e4 p\u00e4ivitys? Koska silloin luotiin monet merkitt\u00e4v\u00e4t k\u00e4yt\u00e4nn\u00f6t, jotka kehittiv\u00e4t Javasciptist\u00e4 paljon k\u00e4ytett\u00e4v\u00e4mm\u00e4n ohjelmointikielen. N\u00e4m\u00e4 uudistukset ovat edelleen 10 vuoden j\u00e4lkeen keskeisess\u00e4 osassa Javascript -ohjelmointia.<\/p>\n\n\n\n

K\u00e4ymme t\u00e4ss\u00e4 artikkelissa l\u00e4pi ES6 -p\u00e4ivityksen merkitt\u00e4vimpi\u00e4 muutoksia.<\/p>\n\n\n\n

Muuttujien m\u00e4\u00e4rittely let ja const -m\u00e4\u00e4rityksill\u00e4<\/h3>\n\n\n\n

Aikaisemmissa versioissa Javascript-muuttuja m\u00e4\u00e4ritettiin yleisesti ottaen var<\/code> -m\u00e4\u00e4rityksell\u00e4. Siin\u00e4 oli kuitenkin muutamia ongelmia, kuten lohkon sis\u00e4isen skoopin puuttuminen. Muuttuja oli silloin ns. ”globaali” muuttuja.<\/p>\n\n\n\n

Uusi tapa muuttujien m\u00e4\u00e4rittelyyn tarjoaa paremman muuttujien hallinnan ja suojaa muuttujia asettamalla niille lohkon sis\u00e4isen skoopin, jolloin muuttuja ei n\u00e4y ohjelmakoodissa ”liian kauas”.<\/p>\n\n\n\n

    \n
  • let<\/code>: M\u00e4\u00e4rittelee muuttujan, jonka arvoa voidaan muuttaa, ja sill\u00e4 on lohkon sis\u00e4inen skooppi<\/li>\n\n\n\n
  • const<\/code>: M\u00e4\u00e4rittelee vakion, jonka arvoa ei voida muuttaa, ja sill\u00e4 on my\u00f6s lohkon sis\u00e4inen skooppi<\/li>\n<\/ul>\n\n\n\n

    Nuolifunktiot (arrow functions)<\/h3>\n\n\n\n

    Lyhyempi syntaksi funktioiden m\u00e4\u00e4rittelyyn, joka tekee koodista selke\u00e4mp\u00e4\u00e4 ja helpommin luettavaa. Erityisesti niist\u00e4 on iloa lyhyiden funktioiden m\u00e4\u00e4rittelyss\u00e4, jolloin koko funktio voidaan m\u00e4\u00e4ritell\u00e4 yhdelle riville.<\/p>\n\n\n\n

    Esimerkki<\/p>\n\n\n\n

    Vanha toteutus (ES5):<\/strong><\/p>\n\n\n\n

    function sum(a, b) {\n    return a + b;\n}\n<\/code><\/pre>\n\n\n\n
    Uusi toteutus (ES6):<\/strong><\/p>\n\n\n\n
    const sum = (a, b) => a + b;<\/code><\/pre>\n\n\n\n

    Lupaukset (promises)<\/h3>\n\n\n\n
    Lupaukset (promises) tarjoavat tehokkaan tavan k\u00e4sitell\u00e4 asynkronisia operaatioita, kuten API-kutsuja, tiedostonlukua ja muita viiveellisi\u00e4 toimintoja. Ne my\u00f6s tekev\u00e4t koodista yksinkertaisempaa.<\/p>\n\n\n\n
    Promise on olio, joka edustaa asynkronisen<\/em> operaation lopullista tulosta. Asynkroninen operaatio on teht\u00e4v\u00e4, joka suoritetaan taustalla ilman, ett\u00e4 se est\u00e4\u00e4 p\u00e4\u00e4ohjelman suoritusta. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 ohjelma voi jatkaa muiden teht\u00e4vien suorittamista samalla, kun asynkroninen operaatio odottaa valmistumistaan. <\/h4>\n\n\n\n
    Promise voi olla kolmessa tilassa:<\/p>\n\n\n\n
      \n
    1. Pending (odottava)<\/strong>: Alkuper\u00e4inen tila, jossa lopputulosta ei ole viel\u00e4 m\u00e4\u00e4ritelty<\/li>\n\n\n\n
    2. Fulfilled (t\u00e4ytetty)<\/strong>: Operaation onnistunut suoritus, joka palauttaa arvon<\/li>\n\n\n\n
    3. Rejected (hyl\u00e4tty)<\/strong>: Operaation ep\u00e4onnistuminen, joka palauttaa syyn (yleens\u00e4 virheen)<\/li>\n<\/ol>\n\n\n\n
      Asynkroniset operaatiot ovat erityisen hy\u00f6dyllisi\u00e4, kun suoritetaan teht\u00e4vi\u00e4, jotka voivat kest\u00e4\u00e4 kauan, kuten verkkopyynt\u00f6j\u00e4, tiedostonlukua tai ajastettuja tapahtumia.<\/p>\n\n\n\n
      Promise-k\u00e4sittelyyn k\u00e4ytet\u00e4\u00e4n\u00a0then<\/code>,\u00a0catch<\/code>\u00a0ja\u00a0finally<\/code>\u00a0-metodeja:<\/p>\n\n\n\n
      promise\n    .then(result => {\n        console.log(result); \/\/ \"Operation successful!\"\n    })\n    .catch(error => {\n        console.error(error); \/\/ \"Operation failed.\"\n    })\n    .finally(() => {\n        console.log(\"Operation completed.\");\n    });<\/code><\/pre>\n\n\n\n
      Ennen ES6:ta JavaScriptiss\u00e4 k\u00e4siteltiin asynkronisia operaatioita p\u00e4\u00e4asiassa k\u00e4ytt\u00e4m\u00e4ll\u00e4 callback-funktioita. Niiss\u00e4 oli kuitenkin omat hankaluutensa, kuten ns. ”callback hell” jossa callbackit kertyv\u00e4t syv\u00e4lle toistensa sis\u00e4\u00e4n, tehden koodista vaikeasti luettavaa ja yll\u00e4pidett\u00e4v\u00e4\u00e4.<\/p>\n\n\n\n
      Luokat (classes)<\/h3>\n\n\n\n
      Nyky\u00e4\u00e4n luokkien tukea olio-ohjelmoinnissa pidet\u00e4\u00e4n oikeastaan itsest\u00e4\u00e4n selvyyten\u00e4, mutta Javascriptiin luokat tulivat ES6:n mukana.<\/p>\n\n\n\n
      Ennen ES6:ta JavaScriptiss\u00e4 ei ollut luokkia sellaisina kuin ne nyky\u00e4\u00e4n tunnetaan. Sen sijaan k\u00e4ytettiin prototyyppipohjaista perint\u00e4\u00e4 ja funktiokonstruktoreita olioiden ja niiden k\u00e4ytt\u00e4ytymisen m\u00e4\u00e4rittelyyn. T\u00e4m\u00e4 tapa saattoi kuitenkin olla hieman monimutkainen ja vaikeasti ymm\u00e4rrett\u00e4v\u00e4 ainakin niille ohjelmoijille, jotka olivat tottuneet k\u00e4ytt\u00e4m\u00e4\u00e4n luokkia.<\/p>\n\n\n\n

      Moduulit (modules)<\/h3>\n\n\n\n
      Mahdollistavat koodin jakamisen pienempiin, uudelleenk\u00e4ytett\u00e4viin osiin, mik\u00e4 parantaa koodin hallittavuutta ja uudelleenk\u00e4ytett\u00e4vyytt\u00e4. Moduulit k\u00e4ytt\u00e4v\u00e4t\u00a0export<\/code>\u00a0ja\u00a0import<\/code>\u00a0-avainsanoja ominaisuuksien ja funktioiden jakamiseen tiedostojen v\u00e4lill\u00e4.<\/p>\n\n\n\n
      ES6-moduulien sijasta Javascriptiss\u00e4 k\u00e4ytettiin aiemmin mm. CommonJS -moduulij\u00e4rjestelm\u00e4\u00e4, jota k\u00e4ytet\u00e4\u00e4n erityisesti Node.js:ss\u00e4. Se k\u00e4ytt\u00e4\u00e4\u00a0require<\/code>\u00a0ja\u00a0module.exports<\/code>\u00a0-avainsanoja moduulien tuontiin ja vientiin. CommonJS kehitettiin vuonna 2009. Projekti aloitettiin Mozilla-insin\u00f6\u00f6ri Kevin Dangoorin toimesta ja se tunnettiin alun perin nimell\u00e4 ServerJS. Elokuussa 2009 projekti nimettiin uudelleen CommonJS:ksi. CommonJS:n tavoitteena oli standardoida JavaScriptin moduuliekosysteemi erityisesti palvelinpuolen JavaScriptille, mutta sit\u00e4 k\u00e4ytet\u00e4\u00e4n my\u00f6s selainpuolella vaikka selainymp\u00e4rist\u00f6iss\u00e4 koodi t\u00e4ytyy yleens\u00e4 pakata transpilointity\u00f6kalujen avulla.<\/p>\n\n\n\n
      Esimerkkej\u00e4:<\/p>\n\n\n\n
      CommonJS<\/strong><\/h4>\n\n\n\n
      Tiedosto: math.js<\/code><\/h4>\n\n\n\n
      const add = (a, b) => a + b;\n\nconst subtract = (a, b) => a - b;\n\nmodule.exports = {\n    add,\n    subtract\n};\n<\/code><\/pre>\n\n\n\n
      Tiedosto: main.js<\/code><\/h4>\n\n\n\n
      const math = require('.\/math');\n\nconsole.log(math.add(2, 3)); \/\/ 5\nconsole.log(math.subtract(5, 2)); \/\/ 3<\/code><\/pre>\n\n\n\n
      ES6 Modules<\/strong><\/h4>\n\n\n\n
      Tiedosto: math.js<\/code><\/h4>\n\n\n\n
      export const add = (a, b) => a + b;\n\nexport const subtract = (a, b) => a - b;<\/code><\/pre>\n\n\n\n
      Tiedosto: main.js<\/code><\/h4>\n\n\n\n
      import { add, subtract } from '.\/math.js';\n\nconsole.log(add(2, 3)); \/\/ 5\nconsole.log(subtract(5, 2)); \/\/ 3<\/code><\/pre>\n\n\n\n

      Destrukturointi (destructuring)<\/h3>\n\n\n\n
       Helpottaa taulukoiden ja olioiden arvojen purkamista muuttujiksi. Esimerkki:<\/p>\n\n\n\n
      const user = {\n    username: 'johndoe',\n    email: 'john@example.com',\n    location: {\n        city: 'Helsinki',\n        country: 'Finland'\n    }\n};\n\n\/\/ Purkaminen muuttujiksi\nconst { username, email, location: { city, country } } = user;\n\nconsole.log(username); \/\/ \"johndoe\"\nconsole.log(email);    \/\/ \"john@example.com\"\nconsole.log(city);     \/\/ \"Helsinki\"\nconsole.log(country);  \/\/ \"Finland\"<\/code><\/pre>\n\n\n\n

      Spread ja rest -operaattorit<\/h3>\n\n\n\n
      N\u00e4m\u00e4 operaattorit tehostavat taulukoiden ja objektien k\u00e4sittely\u00e4. Spread-operaattori levitt\u00e4\u00e4 taulukon tai olion arvot, kun taas rest-operaattori ker\u00e4\u00e4 useita arvoja yhteen taulukkoon.<\/p>\n\n\n\n
      Spread-operaattori<\/strong><\/h4>\n\n\n\n
      Spread-operaattoria (...<\/code>) k\u00e4ytet\u00e4\u00e4n taulukoiden ja olioiden arvojen levitt\u00e4miseen. Se on hy\u00f6dyllinen esimerkiksi taulukoiden yhdist\u00e4misess\u00e4 ja olioiden kopioinnissa.<\/p>\n\n\n\n
      Taulukon yhdist\u00e4minen<\/h4>\n\n\n\n
      const fruits = ['apple', 'banana'];\nconst moreFruits = ['cherry', 'date'];\n\nconst allFruits = [...fruits, ...moreFruits];\n\nconsole.log(allFruits); \/\/ [\"apple\", \"banana\", \"cherry\", \"date\"]<\/code><\/pre>\n\n\n\n
      Olion kopioiminen ja yhdist\u00e4minen<\/h4>\n\n\n\n
      const user = {\n    username: 'johndoe',\n    email: 'john@example.com'\n};\n\nconst additionalInfo = {\n    age: 30,\n    location: 'Helsinki'\n};\n\nconst userProfile = { ...user, ...additionalInfo };\n\nconsole.log(userProfile);\n\/\/ { username: \"johndoe\", email: \"john@example.com\", age: 30, location: \"Helsinki\" }\n<\/code><\/pre>\n\n\n\n
      Rest-operaattori<\/strong><\/h4>\n\n\n\n
      Rest-operaattoria (...<\/code>) k\u00e4ytet\u00e4\u00e4n funktioiden parametreissa ker\u00e4\u00e4m\u00e4\u00e4n useita argumentteja yhteen taulukkoon. Se on hy\u00f6dyllinen esimerkiksi silloin, kun halutaan k\u00e4sitell\u00e4 muuttuva m\u00e4\u00e4r\u00e4 argumentteja.<\/p>\n\n\n\n
      Funktioiden parametrit<\/h4>\n\n\n\n
      function sum(...numbers) {\n    return numbers.reduce((total, num) => total + num, 0);\n}\n\nconsole.log(sum(1, 2, 3)); \/\/ 6\nconsole.log(sum(4, 5, 6, 7)); \/\/ 22<\/code><\/pre>\n\n\n\n
      Taulukon destrukturointi<\/h4>\n\n\n\n
      const [first, second, ...rest] = [10, 20, 30, 40, 50];\n\nconsole.log(first);  \/\/ 10\nconsole.log(second); \/\/ 20\nconsole.log(rest);   \/\/ [30, 40, 50]<\/code><\/pre>\n\n\n\n
      Template Literals<\/h3>\n\n\n\n
      Template literals tarjoaa k\u00e4tev\u00e4n tavan ty\u00f6skennell\u00e4 merkkijonojen (string<\/code>) kanssa. Ne mahdollistavat monirivisten merkkijonojen ja muuttujien k\u00e4yt\u00f6n merkkijonon sis\u00e4ll\u00e4 ilman monimutkaista syntaksia.<\/p>\n\n\n\n
      const name = 'John';\nconst greeting = `Hello, my name is ${name}.`;\nconsole.log(greeting); \/\/ \"Hello, my name is John.\"\n<\/code><\/pre>\n\n\n\n
      Oletusparametrit (Default Parameters)<\/h3>\n\n\n\n
      Default parameters mahdollistavat oletusarvojen m\u00e4\u00e4ritt\u00e4misen funktioiden parametreille. <\/p>\n\n\n\n
      function greet(name = 'Guest') {\n    return `Hello, ${name}!`;\n}\n\nconsole.log(greet()); \/\/ \"Hello, Guest!\"\nconsole.log(greet('John')); \/\/ \"Hello, John!\"<\/code><\/pre>\n\n\n\n
      Enhanced Object Literals<\/h3>\n\n\n\n
      ES6 paransi objektien kirjaimellista syntaksia, mik\u00e4 tekee objektien m\u00e4\u00e4rittelyst\u00e4 selke\u00e4mp\u00e4\u00e4 ja tiiviimp\u00e4\u00e4.<\/p>\n\n\n\n
      const name = 'John';\nconst age = 30;\n\nconst person = {\n    name,\n    age,\n    greet() {\n        console.log(`Hello, my name is ${this.name}.`);\n    }\n};\n\nperson.greet(); \/\/ \"Hello, my name is John.\"<\/code><\/pre>\n\n\n\n
      Map ja Set<\/h3>\n\n\n\n
      Map<\/code> ja Set<\/code> ovat tietorakenteita, jotka tarjoavat tehokkaat tavat tallentaa ja k\u00e4sitell\u00e4 tietoja.<\/p>\n\n\n\n
      const map = new Map();\nmap.set('key', 'value');\nconsole.log(map.get('key')); \/\/ \"value\"\n\nconst set = new Set([1, 2, 3, 3]);\nconsole.log(set.has(2)); \/\/ true\nconsole.log(set.size); \/\/ 3 (duplikaatit poistetaan)<\/code><\/pre>\n\n\n\n
      Yhteenveto<\/h2>\n\n\n\n
      K\u00e4vimme t\u00e4ss\u00e4 artikkelissa l\u00e4pi ES6:n t\u00e4rkeimpi\u00e4 ominaisuuksia, jotka ovat viel\u00e4 t\u00e4n\u00e4\u00e4nkin oleellisessa osassa Javascript-ohjelmoinnissa. P\u00e4ivityksi\u00e4 on tullut sen j\u00e4lkeenkin, mutta ES6 p\u00e4ivitys j\u00e4i legendaariseen asemaan kattavan sis\u00e4lt\u00f6ns\u00e4 vuoksi.<\/p>\n\n\n\n
      J\u00e4lkikirjoitus (async\/await)<\/h2>\n\n\n\n
      Ehk\u00e4 yksi maininta on tarpeen tehd\u00e4 yll\u00e4 olevien osuuksien osalta: lupaukset (Promises) on edelleen yksi tapa  k\u00e4sitell\u00e4 asynkronista ohjelmakoodia, mutta ECMAScript 2017 toi vuonna 2017 uuden tavan: async \/ await. Se perustuu lupauksiin (promises), mutta mahdollistaa asynkronisen koodin kirjoittamisen synkronisen koodin tapaan.<\/p>\n\n\n\n
      await<\/code>-avainsana<\/strong>: T\u00e4t\u00e4 k\u00e4ytet\u00e4\u00e4n\u00a0async<\/code>-funktion sis\u00e4ll\u00e4 odottamaan lupauksen t\u00e4yttymist\u00e4.\u00a0await<\/code>-avainsana pys\u00e4ytt\u00e4\u00e4 funktion suorituksen, kunnes lupaus t\u00e4yttyy.<\/p>\n\n\n\n
      async<\/code>-avainsana<\/strong>: T\u00e4t\u00e4 k\u00e4ytet\u00e4\u00e4n funktioiden m\u00e4\u00e4rittelyss\u00e4, jotka palauttavat lupauksen.\u00a0async<\/code>-funktio palauttaa aina lupauksen.<\/p>\n\n\n\n
      Esimerkki:<\/p>\n\n\n\n
      const fetchUserData = async () => {\n    try {\n        const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users\/1');\n        const user = await response.json();\n        console.log(user);\n    } catch (error) {\n        console.error('Error fetching user data:', error);\n    }\n};\n\n\/\/ Kutsutaan funktiota ilman await-avainsanaa\nfetchUserData();<\/code><\/pre>\n\n\n\n
      Lis\u00e4tietoja ES6:n sis\u00e4ll\u00f6st\u00e4<\/h2>\n\n\n\n
      Lis\u00e4tietoja ES6 sis\u00e4ll\u00f6st\u00e4 voi katsoa esim. osoitteesta:<\/p>\n\n\n\n
      https:\/\/www.w3schools.com\/Js\/js_es6.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
      Vuonna 2025 tulee kuluneeksi 10 vuotta Javascript-ohjelmointikielen merkitt\u00e4v\u00e4st\u00e4 virstaanpylv\u00e4\u00e4st\u00e4: silloin julkaistiin Javascript kielen p\u00e4ivitys, joka sai nimekseen ES6 tai toiselta nimelt\u00e4\u00e4n ECMAScript 2015. Miksi kyseess\u00e4 oli merkitt\u00e4v\u00e4 p\u00e4ivitys? Koska silloin luotiin monet merkitt\u00e4v\u00e4t k\u00e4yt\u00e4nn\u00f6t, jotka kehittiv\u00e4t Javasciptist\u00e4 paljon k\u00e4ytett\u00e4v\u00e4mm\u00e4n ohjelmointikielen. N\u00e4m\u00e4 uudistukset ovat edelleen 10 vuoden j\u00e4lkeen keskeisess\u00e4 osassa Javascript -ohjelmointia. K\u00e4ymme t\u00e4ss\u00e4 artikkelissa l\u00e4pi … Lue lis\u00e4\u00e4<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-348","post","type-post","status-publish","format-standard","hentry","category-ohjelmointi"],"_links":{"self":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=348"}],"version-history":[{"count":11,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":843,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=\/wp\/v2\/posts\/348\/revisions\/843"}],"wp:attachment":[{"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pilvikoodari.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}