Fyrirlestur – JavaScript array og objects

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Samansöfn af gögnum

• Til þess að geta skrifað forrit þurfum við yfirleitt leið til þess að hópa saman gögnum
• Fylki (arrays) og hlutir (objects) leyfa okkur að gera það

---

Array

• Fylki leyfa okkur að safna hlutum í raðaða lista
• Búum til array með []
  • const list = [];

---

• Nálgumst gildi innan fylkis með bracket notation
  • Nálgumst eftir index, byrjar frá 0
  • array[0] nálgast fyrsta stak í index 0, array[1] annað stak í index 1 o.s.fr.
• length skilar fjölda staka í fylki, frá 0 til stærsta index

---

Aðeins um const

• const eru block scoped fastar sem banna endurskilgreiningu á grunngildi
  • Getum bætt við fylki sem eru skilgreindir með const
  • Getum ekki breytt grunngildi úr array yfir í t.d. streng
• const er ekki immutable

---

• Góður vani að skilgreina sem flestar breytur með const
  • Minnkar líkur á að við blöndum saman týpum
  • Að breyta ekki gildum breyta getur dregið úr böggum

---

const list = [1, 2, 3];

list.length; // 3

list[100] = 1; // má þó skilgr sem const

list.length; // 101

list = ''; // TypeError, ný týpa

---

Properties

• Næstum öll JavaScript gildi hafa property (eigindi)
  • 'foo'.length, Math.min()
• Öll nema null og undefined
• Property nálgumst við með:
  • . – dot notation
  • ['foo'] – bracket notation

---

• Notum yfirleitt dot notation nema:
  • Þegar við erum að vinna með property sem heita einhverju sem er óleyfilegt breytunafn
  • Þegar við notum breytu til að vísa í property
• Property innihalda gildi en ef það er function köllum við það method
  • toUpperCase() er method á strengjum sem skilar streng í hástöfum, höfum fleiri methods á strengjum

---

const a = 'hello world';

a.length; // 11

a['length']; // 11

a.toUpperCase(); // "HELLO WORLD"

a['toUpperCase'](); // "HELLO WORLD"?!

---

Array methods

• array.join(s) – breytir fylki í streng með s á milli
• array.push(item) – ýtir item aftast á fylki
• array.pop() – fjarlægir og skilar aftasta hlut í fylki
• concat, shift, slice, sort, splice o.fl.

---

const list = [0, 1, 2];

list[0]; // 0

list.push('þrír'); // 4

list.join(', '); // '0, 1, 2, þrír'

list.pop(); // 'þrír'

---

• array dæmi

---

Object

• Byrjum á að hugsa um object í JavaScript sem geymslu fyrir gildi þar sem gildi á sér nafn
  • Skoðum síðan hvernig við vinnum með erfðir
• Skilgreinum með {}, innan þess skilgreinum við eigindi hluts með heiti: gildi
  • Ef heiti er óleyfilegt breytunafn skilgreinum við sem streng
  • gildi eru öll leyfileg gildi

---

• Eigindi eru oftast skilgreind eitt per línu til að auka lesanleika
  • Seinasta eigindi má hafa kommu á eftir sér, kallað trailing comma
• Ef við biðjum um eigindi sem ekki er skilgreint á hlut fáum við undefined
• Mjög ólíkt object í Java

---

const person = {
  name: 'Jón Jónsson',

  // óleyfilegt breytunafn
  'home-address': 'Aðalgata 1',
  age: 100,
  registered: true,

  // trailing comma
  interests: ['foo', 'bar', 'baz', ],
};

---

const a = {};
a['1%-result']; // undefined

a.1%-result; // SyntaxError

const key = 'result';

a[key] = '10';

a[key]; // '10'

a.result; // '10'

---

delete

• delete er unary operator sem eyðir eigindi af hlut
• Getum eytt gögnum með delete
• Skilar boolean sem segir til um hvort eigindi hafi verið eytt

delete a.result;

---

in

• in er binary operator sem segir til um hvort eigindi sé á hlut
• Skilar boolean
• Ef við setjum property sem undefined eða null er það samt sem áður enn þá tengt hlutnum og in skilar true

---

const obj = { result: 1 };

obj.result; // 1

'result' in obj; // true

obj.info = '10'; // "foo"

obj['result-info'] = true; // true

delete obj.info; // true

'info' in obj; // false

obj; // { result: 1, result-info: true}

---

• Til að fá fylki af öllum eigindum getum við notað Object.keys
• Kemur frá Object
• Object.assign(), Object.freeze(), Object.values() og fleiri

---

const data = { x: 1, y: 2, z: 3 };
Object.keys(data); // ['x', 'y', 'z']
Object.values(data); // [1, 2, 3]

Object.freeze(data);
delete data.x; // false

// afritum data yfir í result
const result = Object.assign({}, data);

const extra = { a: true, x: 9 };

// afritum data yfir í extra, yfirskrifar
Object.assign(extra, data);

---

Array er hlutur

• array er object!
• Til að athuga hvort eitthvað sé í alvöru array getum við notað Array.isArray()

---

const a = [1, 2, 3];
typeof a; // "object"
Array.isArray(a); // true

---

• object dæmi
• typeof-array dæmi

---

Samanburður

• Ef við berum saman hluti fáum við true þá og því aðeins að það séu nákvæmlega sömu hlutirnir
  • Bendi á sama hlutinn í minni
• Að athuga hvort tveir hlutir líti eins út er kallað deep comparsion og er ekki stutt í JavaScript, aðeins shallow comparison

---

const obj = { a: 1 };
obj === { a: 1 }; // false

const result = obj;
obj === result; // true

const data = { a: 1 };
obj === data; // false;

// sama gildir fyrir fylki
const list = [1, 2, 3];
const list2 = [1, 2, 3];

list === list2; // false

---

Array og for lykkjur

• Getum notað for lykkjur og haldið utan um index í fylkinu
• for of lykkjur leyfa okkur að sækja hvert stak í röð án bókhalds
  • Getum þó ekki breytt gildinu

---

const items = [1, 2, 3, 4, 5];

for (let i = 0; i < items.length; i++) {
  items[i] *= 2;
}

items; // [2, 4, 6, 8, 10]

const items = [1, 2, 3, 4, 5];

for (const item of items) {
  console.log(item);
}

1, 2, 3, 4, 5

---

Rest parameters

• Ef við skilgreinum parameter í falli með ... fyrir framan er það rest parameter
  • (parameter er skilgreiningin, argument er raun gildið sem sent er inn)
• Inniheldur rest af argumentum þegar kallað er í fallið

---

• Kemur í staðinn fyrir arguments hlut í föllum
  • Arrow functions hafa ekki arguments hlut en geta notað rest parameter

---

function sum(x, y, ...rest) {
  return x + y + rest.length;
}

sum(1, 2); // 3
sum(1, 2, 3, 4); // 5

---

function avg(...rest) {
  let sum = 0;
  for (const i of rest) {
    sum += i;
  }
  return sum / rest.length;
}

avg(1, 2, 3, 4, 5, 6); // 3.5

---

Spread operator

• Ef við notum ... fyrir utan parameter í föllum kallast það spread operator
• Dreifir úr breytu
• Getum dreift úr string og array, ekki object, number og öðrum gildum

---

const list = [1, 2, 3];
console.log(...list); // 1 2 3

// sama og að hafa gert
console.log(1, 2, 3);

---

function sum(x, y, z) {
  return x + y + z;
}

sum(...list); // 6

// sama og að hafa gert
sum(1, 2, 3);

// getum gert í bland við önnur argument
avg(1, ...list, 10); // 3.4

[1, ...list, 10]; // [1, 1, 2, 3, 10]

// afritum fylki
[...list]; // [1, 2, 3]

---

• rest dæmi
• spread dæmi

---

Destructuring

• Niðurbrot á fylkjum og hlutum í breytur
• Dreifir úr hlutum í þær breytur sem maður vill
• Getum skilgreint sjálfgefin gildi
• Fáum undefined ef ekkert gildi passar, ekki villu

---

const list = [1, 2, 3];
const [a, , b] = list;
console.log(a, b); // 1 3

const obj = { data: 1, result: 'hi' };
const { data, x, result } = obj;

console.log(data, x, result);
// 1 undefined 'hi'

---

• destructuring dæmi

---

Object eigindi

• Þurfum ekki að skilgreina bæði lykil og gildi ef þau heita það sama
• Getum skilgreint eigindi með segð ef við höfum innan []
• Þurfum ekki að skilgreina föll á hlutum með function

---

const a = '1';
const b = '2';
const c = { a, b }; // { a: "1", b: "2" };

const d = {
  result: '10',

  // eigindi úr segð
  [`result${c.a}`]: '10',
};

d; // { result: "10", result1 : "10" }

---

const utils = {

  // í staðinn fyrir sum: function (x, y)
  sum(x, y) {
    return x + y;
  },
};

utils.sum(1, 2); // 3

---

• object-properties dæmi