Fyrirlestur – JavaScript gildi, týpur og virkjar

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Eloquent JavaScript

Yfirferð fylgir Eloquent JavaScript að einhverju leiti, sleppum einhverju, bætum einhverju við.

---

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

– MDN: JavaScript

---

Sagan

• Staðlað hjá ECMA, sem ECMAScript, fyrst árið 1997
• „Forritunarmál vefsins“
• Flestar, ef ekki allar, tölvur í dag innihalda a.m.k. einn JavaScript túlk

---

If you want to write imperative code that runs in a web browser, you only have one choice: JavaScript.

—Resilient Web Design, chapter 4: Languages

---

JavaScript borrows most of its syntax from Java, but also inherits from Awk and Perl, with some indirect influence from Self in its object prototype system.

—Brendan Eich — JavaScript 1.1 specification

---

Java is to JavaScript as ham is to hamster.

—Resilient Web Design, chapter 4: Languages

---

Java VS. JavaScript

Mörg atriði eru ólík, en það sem skiptir mestu máli í fyrstu:

• Java er þýtt en JavaScript er túlkað
  • JavaScript kóði er túlkaður í hverri keyrslu, engin þýðandi
• Breytur í Java hafa týpu, gildi í JavaScript hafa týpu

---

JavaScript túlkar

• Höfum aðgang að JavaScript túlk vafra í gegnum DevTools
  • Opnum DevTools og förum í console og skrifum skipanir og forrit
• Node.js er líka með JavaScript túlk, getum keyrt með node í terminal

---

TC39

• ECMAScript/JavaScript er staðlað í útgáfum
  • Frá og með útgáfu 6 er ný útgáfa á hverju ári
• Tafla með stuðning á virkni í JavaScript túlkum
• TC39 er hópur sérfræðinga sem sér um stöðlun á ECMAScript gegnum tillögur

---

console

• Flest umhverfi sem keyra JavaScript bjóða upp á console hlut
• Gefur aðgang að aðferðum sem leyfa okkur að birta hluti í console
• console.log('Halló, heimur!'); // skrifar 'Halló, heimur!' í "console"
• Fleiri aðferðir, hópa saman skilaboðum, tímamæla o.s.fr.

---

Athugasemdir

• /* comment */
• // comment
• /* má /* ekki nesta */ fáum syntax villu */

---

Týpur

Breytur í JavaScript hafa ekki týpu, gildi hafa týpu.

Í grunninn höfum við primitive týpur

• string, number, bigint
• boolean, undefined, null, symbol

---

object

• Fyrir gildi sem eru ekki primitive höfum við object
• Möppun á milli key og value (nafn-gildis pör)

---

Primitive wrappers

• Öll primitive gildi fyrir utan null og undefined eiga sér primitive wrapper
• Hlutir sem halda utan um föll og gildi sem við notum til að eiga við og vinna með gildin
  • T.d. String fyrir string og Number fyrir number

---

Strengir – string

• Skilgreinum strengi innan ', " eða `
  • 'Halló, heimur!' eða "Halló, heimur!"
• Notum \ til að escapea sérstaka stafi eða sérstök tákn (t.d. newline eða tab)
  • "Halló, \"heimur\""

---

'Tvær\nLínur\tog tab'

túlkað sem

Tvær
línur	og tab

---

"A newline character is written: \"\\n\"."

túlkað sem

A newline character is written: "\n"

---

• Venjan að skilgreina strengi með ' ekki "
  • Líklegra að við þurfum ekki að escape’a '
• Strengur er óbreytanleg röð af Unicode stöfum, hver stafur er 16 bitar
  • 'texti' eða "texti" eða '中文'
  • 16 bitar ekki nóg til að birta allt unicode, stafir taka stundum „tvö pláss“ til að ná 32 bitum

---

• length gefur lengd
  • 'halló'.length; // 5
• + virki milli tveggja strengja skeytir þeim saman
  • 'Halló, ' + 'heimur' // 'Halló, heimur'

---

Template literals

• Betri strengjavinnsla, skilgreind í ECMAScript 6
• Notar ` (backtick) til að skilgreina strengi
• Getum sett inn segð í strengi án +

---

• Getum skilgreint streng í mörgum línum auðveldlega
• Notum þetta helst þegar við erum með „flóknari“ strengi: innihalda fleiri línur af texta, blandar saman strengjum, eða bætir við segðum

---

`1+1 eru ${1 + 1}
10*10 eru ${10 * 10}`

túlkað sem

1+1 eru 2
10*10 eru 100

---

• string dæmi

---

number

• Notum mest eina týpa fyrir tölur í JavaScript, number
• 64 bitar: 1 í sign, 11 bitar í brot, 52 bitar í gildi
  • 1.25

---

• Öll brot með punkti (ekki kommu eins og í íslenskum brotum)
• Þurfum að passa upp á nákvæmni í brotum
  • 0.2 + 0.1 = 0.30000000000000004
  • Er vegna skilgreiningar tölu sem double-precision 64-bit binary format IEEE 754 value

---

• Scientific notation:
  • 1.25e6 // 1.25 * 10^6 = 1250000
• Infinity og -Infinity – gildi sem geta komið upp í útreikningum
  • 9e999 // Infinity
  • 1/0 // Infinity

---

number – virkjar

• Höfum virkja (operators) til að framkvæma reikning
  • 5 * 10 + 2 // 52
• Fylgja forgangi reikniaðgerða en getum notað sviga
  • 5 * (10 + 2) // 60

---

Forgangur

• Í JavaScript er forgangur virkja vel skilgreindur
  • /, * og % hafa sama forgang sem er hærri en á + og -
• Höfum fleiri virkja og flóknari reglur

---

number – afgangs

• % er afgangs virki (remainder), deilir og skilar afgangi
  • 10 % 2 // = 0, jöfntala skilar alltaf 0
  • 11 % 2 // = 1, oddatala skilar alltaf 1

---

number – NaN

• NaN – „Not a number“, skilað þegar ekki er hægt að reikna
  • 0 / 0 // NaN
  • 1 - 'a' // NaN

---

isNaN

• Number.isNaN() – fall sem segir til um hvort gildi sé NaN (kastar gildi í tölu áður!)
  • Number.isNaN(1) // false
  • Number.isNaN('a') // true
  • Number.isNaN('1') // false

---

BigInt

• BigInt er týpa fyrir heiltölur sem fara út fyrir skilgreint bil number
  • Number.MAX_SAFE_INTEGER og Number.MIN_SAFE_INTEGER
• Skilgreinum með n eftir tölu, t.d. 2n ** 100n
• Nýleg viðbót við JavaScript

---

Number.isFinite()

• Number.isFinite() segir til um hvort gildi sé Infinity eða ekki
  • Number.isFinite(1) // true
  • Number.isFinite(1 / 0) // false

---

Number.parseInt()

• Number.parseInt(str, radix) – reynir að ná heiltölu úr streng, skilar henni eða NaN
• radix er það tölukerfi sem við miðum við, oftast tugakerfi, 10
  • Number.parseInt('0100', 10) // 100
  • Number.parseInt('a100', 10) // NaN
  • Number.parseInt('0100', 2) // 4

---

Number.parseFloat()

• Number.parseFloat(str) - reynir að ná heiltölu með broti úr streng, skilar tölu eða NaN
  • Number.parseFloat('100.123') // 100.123
• .toFixed([digits]) – formar tölu með [digits] aukastöfum, skilar streng
  • 100.66.toFixed(1) // 100.7 — Já! Er partur af number

---

• number dæmi

---

Boolean

• true eða false
• Notum oft í flæðistýringu þegar við berum saman gildi

---

Einstæðir virkjar

• Einstæðir virkjar (unary operators) virka á eitt gildi á meðan að tvístæðir (binary operators) virka á tvö gildi og þrístæðir (ternary operators) á þrjú
• Mínus getur verið bæði unary (t.d. -1) og binary (t.d. 2 - 1)
• Ekki allir virkjar (operators) eru skilgreindir sem tákn, orð eru líka notuð, t.d. typeof

---

Typeof

• typeof er einstæður (unary) virki sem gefur týpu á gildi sem streng

typeof 'halló' // "string"

typeof 1 // "number"

typeof true // "boolean"

---

Symbol

• Symbol skilgreinir symbol gildi
• Alltaf einstakt gildi
• Symbol('foo') === Symbol('foo') // false
• typeof Symbol('foo') // "symbol"

---

undefined

• Gildi á breytum sem ekki hafa verið skilgreindar
• Gildi á eigindum hluta sem ekki hafa verið skilgreindir
• typeof hallo // "undefined", hér er hallo óskilgreind breyta

---

null

• Gildi sem stendur fyrir að vísvitandi fjarveru gildis
• Getum lent í að fá null reference villur ef við höldum að eitthvað sé ekki null
  • null.length
  • Uncaught TypeError: Cannot read property 'length' of null

---

• Týpa á null er samt skilgreind sem object (sem er böggur í ECMAScript)
  • typeof null // "object"
  • Of seint að leiðrétta þennan bögg

---

Veikar týpur

• Þegar við notum gildi getur þeim verið kastað óbeint
  • Svipað og (int)foo í Java og C nema óbeint
• Reglur um hvernig þeim er kastað, type coercion

---

Öruggar týpur

• Minnkar líkur á týpu villum á keyrslutíma
• Type coercion þvingar týpur til að spila saman
• Reglur skilgreindar í spec en geta komið manni á óvart
  • MDN: Equality comparisons and sameness

---

'1' + 1 // "11"
NaN + 'a' // "NaNa"

---

Samanburður

• Getum athugað hvort tölur eða strengir séu minni eða stærri en aðrir
  • 3 > 2 // true
  • 'foo' > 'bar' // false
• Samanburður á strengjum er ekki „réttur“, stór stafur er alltaf „minni en“ lítill o.fl.

---

• Höfum jafnt eða stærra >= og jafnt eða minna <= virkja
• Fyrir jöfnuð og ójöfnuð höfum við !=, ==, !==, ===

---

• Samanburður með == og != mun byrja á að kasta báðum gildum
  • Getur valdið rugling og vitlausum niðurstöðum
• Samanburður með === og !== mun byrja á að bera saman týpur og passa uppá að þær passi (eða ekki)
  • Notum === fyrir allan samanburð!

---

1 == '1' // true

1 === '1' // false

false == 0 // true

false === 0 // false

---

Truthy & falsy

• Þegar við erum með hluti sem haga sér eins og boolean án þess að vera það, tölum við um að þeir séu truthy eða falsy
• Byggir á type coercion

---

Falsy

• false
• 0
• '' // tómi strengur
• null
• undefined
• NaN

---

Truthy

• Allt sem er ekki falsy
• null og undefined eru ekki jöfn neinu nema sjálfu sér
• NaN er ekki jafnt neinu, ekki einu sinni sjálfu sér

---

if (NaN) { return 1; } // skilar ekki 1

if ('halló') { return 1; } // skilar 1

if ('') { return 1; } // skilar ekki 1

---

Lógískir virkjar

• Getum unnið með boolean gildi með and, or og not virkjum
• &&, tvístæður (binary) and virki sem skilar true þá og því aðeins að bæði stök séu true, annars false
  • true && false // false
  • true && true // true

---

• ||, tvístæður (binary) or virki sem skilar true ef annað gildi er true
  • true || false // true
  • false || false // false

---

Neitun

• !, einstæður (unary) neitunarvirki, kastar segð úr true í false og öfugt
  • !true // false
• Virkar fyrir öll gildi út af truthy og falsy

---

!true // false

!'' // true

!!'' // false
// falsy gildi verður „alvöru“ false

---

• Boolean primitive wrapper er samt betri lausn til að kasta gildi í boolean

Boolean('') // false

Boolean(true) // true

---

ternary virki

• Þrístæður virki
• Athugar gildi og skilar út frá því hvort gildið er truthy eða falsy öðrum gildum

gildi ? 'skilað ef truthy' : 'skilað ef falsy'

---

0 ? 'truthy' : 'falsy' // falsy

true ? 1 : 0 // 1

'' ? 'Ekki tómur' : 'Tómur' // 'Tómur'

---

Skammhlaup – short circuit

• || og && valda skammhlaupi – skila seinasta gildi sem var skoðað
• a || b – Ef a er truthy er því skilað, annars b
• a && b – Ef a er falsy er b skilað, annars a

---

0 || 'bar' // 'bar'

null || 1 // '1'

'baz' && 0 // 0

---

• Getum séð sem leið til að stytta kóða (gildi && 'Birtist þá og því aðeins að gildi sé truthy í staðinn fyrir if eða ternary virkja)
• Eða setja gildi ef ekkert er skilgreint í föllum (value = providedValue || defaultValue)
  • Leyst með alvöru default value í föllum í nýrri útgáfu af JavaScript