Skip to content

Latest commit

 

History

History
238 lines (174 loc) · 5.11 KB

12.1.functional.md

File metadata and controls

238 lines (174 loc) · 5.11 KB
Raw
title
Fyrirlestur 12.1 – Fallaforritun

Fyrirlestur 12.1 – Fallaforritun

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Fallaforritun

  • Ein leið til að vinna með flækjustig
  • Blöndum saman einföldum föllum til að gera flókna hluti
  • Búum til abstraction
for (let i = 0; i < 10; i++) {
  console.log(i);
}
function repeatLog(n) {
  for (let i = 0; i < n; i++) {
    console.log(i);
  }
}
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// → 0
// → 1
// → 2
const labels = [];
repeat(5, (i) => {
  labels.push(`Unit ${i + 1}`);
});
console.log(labels);
// → ["Unit 1", "Unit 2", "Unit 3",
//    "Unit 4", "Unit 5"]

Æðri föll – Higher-order functions

  • Gera a.m.k. annað af:
    • Taka inn eitt eða fleiri fall sem argument
    • Skila falli
  • Önnur föll eru „á fyrstu stétt“
function greaterThan(n) {
  return m => m > n;
}
const greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}
function unless(test, then) {
  if (!test) then();
}
repeat(3, (n) => {
  unless(n % 2 === 1, () => {
    console.log(n, 'is even');
  });
});
// → 0 is even
// → 2 is even

forEach

  • forEach er aðgerð á fylkjum
  • Higher-order fall sem leyfir okkur að ítra yfir fylki
  • Eins og for lykkja en læsilegra í sumum tilvikum
function el(name, ...children) {
  const e = document.createElement(name);
  if (Array.isArray(children)) {
    children.forEach((child) => {
      if (typeof child === 'string') {
        e.appendChild(document.createTextNode(child));
      } else if (child) {
        e.appendChild(child);
      }
    });
  }

  return e;
}

Hrein föll – Pure Functions

  • Skila alltaf sama úttaki fyrir sama inntak
  • Úttak veltur ekki á stöðu eða upplýsingum fyrir utan fall—óháð umhverfi sínu
  • Fall veldur ekki breytingum á umhverfi – engar aukaverkanir

Kostir fallaforritunnar

  • Hugsum meira abstrakt – á hærra stigi
  • Minni hávaði og meiri upplýsingar
  • Getum gert fyrir helling af „venjulegum“ aðgerðum
  • Höfum grunn föll til staðar í málinu

Dæmi um abstract aðgerðir

  • every - á gefið fall við öll stök í fylki?
  • some - á gefið fall við eitthvert stak í fylki?
  • map – útbúa nýtt fylki þar sem búið er að beita aðgerð á hvert stak
  • reduce – vinna fylki niður í eitt stak eftir falli (og reduceRight)
  • filter – skila fylki þar sem stök standast próf

some, every dæmi

const nums = [1, 7, 8, 11];

function belowTen(n) {
  return n < 10;
}

nums.every(belowTen); // false
nums.some(belowTen); // true

reduce dæmi

function sum(nums) {
  return nums.reduce((a, b) => a + b, 0);
}

sum([1, 2, 3, 4, 5, 6, 7, 8, 9]); // 45

map dæmi

// sum einsog í fyrra dæmi
[1, 2, 3, 4, 5, 6, 7, 8, 9]
  .map(i => i * 2)
  .reduce((a, b) => a + b, 0);

// 90

filter dæmi

const colors = [
  'blue',
  'red',
  'darkblue',
  'lightred',
];

colors
  .filter(c => c.indexOf('blue') >= 0);

Dæmi – map & reduce

const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit congue tortor a aliquet. Vivamus ac bibendum nunc. Pellentesque porttitor vel libero sit amet sagittis. In molestie, nibh sed elementum dapibus, neque est bibendum tortor, ac elementum leo nisl vitae neque. Duis vitae lobortis felis. Cras ut risus non diam viverra ultrices. Sed aliquet elit magna, aliquam rhoncus velit pharetra in. Duis fringilla mi vel vulputate vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet risus a fringilla porta. Phasellus ullamcorper sed ipsum eu gravida. Nulla viverra arcu id metus fermentum eleifend. Donec in lacus quis nibh luctus bibendum ac id dolor. Suspendisse sagittis, mauris at cursus auctor, arcu lorem semper dui, quis feugiat eros diam nec urna. Vivamus consequat diam ut nulla luctus, at viverra nisl dapibus. Donec vel tincidunt velit, nec dictum neque.';

text.split('.')
  .map(s => s.trim().length)
  .reduce((prev, current) => {
    if (current > prev) return current;

    return prev;
  }, 0);