Frontend Academy · Oppitunti

Tietotyypit: string, number, boolean, null ja undefined

Tutustu JavaScriptin primitiivityyppeihin, tarkastele niitä typeof-operaattorilla ja opi null- ja undefined-arvojen ero.

Oppitunti 2/413 vaihetta

Tietotyypit: string, number, boolean, null ja undefined on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

JavaScriptin tyyppijärjestelmä

JavaScript on dynaamisesti tyypitetty: muuttujilla ei ole tyyppejä, vaan arvoilla on. Sama muuttuja voi sisältää ensin merkkijonon, sitten numeron ja lopuksi null-arvon. Seitsemän primitiivityypin ymmärtäminen ehkäisee suuren joukon virheitä.

string

Merkkijonot esittävät tekstiä. Käyttäkää yksinkertaisia lainausmerkkejä, kaksoislainausmerkkejä tai backtick-merkkiä (template literal). Merkkijonot ovat muuttumattomia: merkkijonometodit palauttavat uusia merkkijonoja. Merkkijonoilla on .length-ominaisuus ja monia sisäänrakennettuja metodeja.

const greeting = 'Hello';
const lang = "JavaScript";
const sentence = `I love ${lang}`;  // template literal

console.log(greeting.length);   // 5
console.log('hello'.toUpperCase()); // 'HELLO'
console.log(' trim me '.trim()); // 'trim me'

number

JavaScriptissä on yksi numeerinen tyyppi. Kaikki luvut — kokonaisluvut ja liukuluvut — ovat 64-bittisiä liukulukuja (IEEE 754). Siksi 0.1 + 0.2 !== 0.3. Erikoisarvoja ovat Infinity, -Infinity ja NaN (Not a Number).

const age = 30;
const price = 19.99;
console.log(0.1 + 0.2);          // 0.30000000000000004
console.log(typeof NaN);          // 'number'
console.log(isNaN('hello'));      // true
console.log(Number.isNaN('hello')); // false (safer check)

boolean

Totuusarvot ovat true tai false. Niitä käytetään ehdoissa ja vertailuissa. Jokaisella JavaScriptin arvolla on luontainen totuusarvo: falsy-arvoja ovat false, 0, '', null, undefined ja NaN. Kaikki muut arvot ovat truthy-arvoja.

const isActive = true;
const isAdmin = false;

// Falsy values:
if (0) { /* never runs */ }
if ('') { /* never runs */ }
if (null) { /* never runs */ }

null

null on muuttujaan tarkoituksella määritetty tyhjä arvo. Se tarkoittaa, että arvoa ei ole tarkoituksella. Käyttäkää nullia, kun haluatte tyhjentää muuttujan tai ilmaista arvon puuttumisen. typeof null === 'object' on kuuluisa JavaScriptin virhe, joka on säilytetty taaksepäin yhteensopivuuden vuoksi.

let selectedUser = null;  // no user selected yet
selectedUser = { name: 'Alice' };
selectedUser = null;       // cleared

undefined

undefined tarkoittaa, ettei arvoa ole vielä määritetty. Muuttujat, jotka on ilmoitettu mutta joita ei ole alustettu, ovat undefined. Puuttuvat funktion argumentit ovat undefined. Puuttuvien objektin ominaisuuksien arvoksi palautetaan undefined.

let x;                       // undefined
function greet(name) {
  console.log(name);           // undefined if called as greet()
}
const obj = {};
console.log(obj.foo);         // undefined

null vs undefined

null = tarkoituksella puuttuva arvo. undefined = arvoa ei ole vielä määritetty. Nyrkkisääntö: antakaa moottorin määrittää undefined, mutta käyttäkää omassa koodissanne nullia eksplisiittisesti, kun tarkoitatte tyhjää arvoa.

typeof-operaattori

Tarkastelkaa arvon tyyppiä suorituksen aikana typeof-operaattorilla. Se palauttaa merkkijonon: 'string', 'number', 'boolean', 'undefined', 'object', 'function', 'bigint', 'symbol'. Muistakaa, että typeof null === 'object' on tunnettu virhe.

typeof 'hello'     // 'string'
typeof 42          // 'number'
typeof true        // 'boolean'
typeof undefined   // 'undefined'
typeof null        // 'object' ← historical bug
typeof {}          // 'object'
typeof []          // 'object'
typeof function(){} // 'function'

Symbol ja BigInt

Symbol: yksilöllinen, muuttumaton tunniste, jota käytetään objektien ominaisuusavaimina ilman törmäyksiä. BigInt: kokonaisluvut, jotka ovat suurempia kuin Number.MAX_SAFE_INTEGER (2^53-1). Luokaa niitä käyttämällä 42n tai BigInt(42). Niitä ei yleensä tarvita frontend-kehityksessä.

Tyyppimuunnosten sudenkuopat

JavaScript muuntaa tyyppejä hiljaisesti vertailuissa ja operaatioissa. Käyttäkää ===-operaattoria (tarkka yhtäsuuruus) älkääkä ==-operaattoria (väljä yhtäsuuruus), jotta vältätte yllättävät tyyppimuunnokset.

0 == false        // true (coercion)
0 === false       // false (strict, no coercion)
'' == false       // true
'5' == 5          // true
'5' === 5         // false ✓ use this

Tyyppien muuntaminen

Muuntaa tyypit eksplisiittisesti käyttämällä Number()-, String()-, Boolean()- tai parseInt()- ja parseFloat()-funktioita. Eksplisiittinen muuntaminen on aina selkeämpää kuin tyyppimuunnokseen luottaminen.

Number('42')      // 42
Number('')        // 0
Number('abc')     // NaN
String(42)        // '42'
Boolean(0)        // false
Boolean('hello')  // true
parseInt('10px')  // 10

Pikatarkistus

Mitä typeof null palauttaa JavaScriptissä?

Vastaa interaktiivisessa oppitunnissa

Kertaus: JavaScriptin tietotyypit

Seitsemän primitiivityyppiä: string, number, boolean, null, undefined, symbol ja bigint. Tarkastelkaa tyyppejä typeof-operaattorilla. Käyttäkää vertailuissa ===-operaattoria tyyppimuunnosten välttämiseksi. Erottakaa null (tarkoituksella tyhjä) ja undefined (ei vielä määritetty). Kaikki muut arvot ovat objekteja.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tietotyypit: string, number, boolean, null ja undefined” ilmainen?

Kyllä – oppitunnin ”Tietotyypit: string, number, boolean, null ja undefined” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tietotyypit: string, number, boolean, null ja undefined”?

Tutustu JavaScriptin primitiivityyppeihin, tarkastele niitä typeof-operaattorilla ja opi null- ja undefined-arvojen ero. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Tietotyypit: string, number, boolean, null ja undefined”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Muuttujat: let, const, var ja näkyvyysalue
Tietotyypit: string, number, boolean, null ja undefined
Funktiot: määritykset, lausekkeet ja nuolifunktiot
Ohjausvirta: if, else, switch, for ja while

← Takaisin: Frontend Academy