Fyrirlestur – JavaScript föll

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones.

—Donald Knuth

---

Föll

• Föll eru blokkir af kóða sem geta haft nafn
• Notum til að skipuleggja kóða og draga úr endurtekningu
• Engar eða fleiri færibreytur (viðföng, argument)
• Hugsanlega með skilagildi, skilgreindu með return
  • Ef ekki, þá skilar fall undefined

---

Skilgreind föll

• Skilgreinum fall með function (function declaration)
• Getum kallað í áður en skilgreint
  • Öll föll eru fundin áður en forrit er keyrt og því aðgengileg

---

// skilgreint fall
function hello(name) {
  return `hello, ${name}!`;
}

hello('world'); // 'hello, world!'

hello(1); // 'hello, 1!'

---

Föll sem segðir

• Getum skilgreint föll sem segð (function expression)
• Geta verið nafnlaus (anonymous) eða með nafni
• Geta verið gildi breytu

---

// nafnlaust fall      👇 megum nefna hér
const square = function (x) {
  return x * x;
};

console.log(typeof square); // "function"
square(3); // 9

---

• function
• declaration

---

Scope

• Breytur eru skilgreindar með lexical scope per fall
  • Breytan er aðeins aðgengileg innan falls
• En aðeins ef breyta er skilgreind með let, const eða var

---

• Ef ekki er breytan sett í global scope
  • Getur valdið leiðinlegum böggum
• Breytur skilgreindar utan falla eru í global scope

---

var, let & const

• Áður en let og const voru skilgreind var aðeins var
• var er skilgreint fyrir global scope eða lexical scope falls
• let og const eru skilgreind fyrir block, eru block scoped

---

let a = 1;
{ // nýtt scope fyrir block
  let a = 2;
  console.log(a); // 2
}
console.log(a); // 1

---

let x = 10;
if (true) {
  let y = 20;
  var z = 30;
  console.log(x + y + z);
  // 60
}
// y ekki sýnilegt hér, en z er það
console.log(x + z);
// 40

---

var i = 10;

function add(x) {
  // i er aðgengilegt úr global scope
  return x + i;
}

add(10);

// 20

---

function add(x, y) {
  // sum fer hér í global scope!
  sum = x + y;
  return sum;
}
add(1, 2); // 3

console.log(sum); // 3

let sum = 5; // 5

add(5, 6); // 11

console.log(sum); // 11

---

• scope

---

Hoisting

• Þegar breytur eru skilgreindar með var og þeim gefið gildi innan falls, er skilgreiningu breytu ýtt efst í scope
• Þessi hegðun kallast hoisting og getur látið forrit virka skringilega ef maður veit ekki af

---

Hoisting dæmi

var foo = 1;
(function () {
  console.log(foo); // undefined
  var foo = 2;
  console.log(foo); // 2
})();

---

// túlkað sem...
var foo = 1;
(function () {
  var foo; //  undefined
  console.log(foo); // undefined
  foo = 2;
  console.log(foo); // 2
})();

---

let & const

• let og const eru block scoped og losna við að þurfa hoisting
  • Notum því eingöngu í stað var

---

• hoisting

---

Arrow functions

• Stuttur syntax fyrir föll með „fat arrow“: () => {}
  • Megum sleppa sviga ef ein færibreyta
  • Skila gildi ef eitt statement, annars return

---

// eitt statement, sjálfkrafa skilað
const multiply = x => x * 2;
console.log(multiply(10)); // 20

---

const addition = (x, y) => {
  const sum = x + y;
  return sum;
};
console.log(addition(1, 2)); // 3

---

• arrow

---

Nafnlaus föll

• Við getum bundið föll við breytur án þess að gefa þeim nöfn
  • anonymous function
• Þar sem föll eru gildi getum við líka skilað föllum úr föllum

---

const hi = function (name) {
  return `hello, ${name}`;
};

hi('world');

// 'hello, world!'

hi = null; // fallið horfið!

hi('world');

// Uncaught TypeError: hi is not a function

---

Föll sem skilagildi

function greeter(greeting) {
  // Hér myndum við _lokun_ yfir greeting
  return name => `${greeting} ${name}`;
}

const hello = greeter('hello');
const hi = greeter('hi');

hello('world'); // "hello world"

hi('world'); // "hi world"

---

• anon
• return-func

---

Færibreytur (parameters)

• Færibreytur á föllum hafa ekki týpur heldur gildið
• Fall getur því tekið inn færibreytur sem geta verið hvaða gildi sem er
• Primitives (string, number, boolean, undefined) eru pass by value
• Objects eru pass by reference

---

function alter(obj) {
  obj.bar = 1;
}

const foo = { bar: 2 };
alter(foo);

foo.bar;

// 1

---

Fall sem færibreyta

function foo(x, g) {
  return x + g();
}

foo(1, () => 2);

// 3

---

Sjálfgefin gildi í föllum

function add(a = 0, b = 0) {
  return a + b;
}

add(); // 0
add(1); // 1
add(1, 2); // 3

---

Variadic functions

• Getum skilgreint föll sem taka óskilgreindan fjölda af færibreytum
  • variadic function

---

• Höfum arguments hlut innan hvers fall sem er geymsla (ekki fylki) af færibreytum
  • Ekki fylki að því leiti að við höfum ekki aðgang að algengum fylkja föllum eins og pop, push
  • Frá og með ECMAScript 6 er þetta ekki lengur ráðlögð leið, sjáum með fylkjum ráðlagða aðferð

---

Dæmi

// eldri leið til að skilgreina variadic föll
function avg() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum / arguments.length;
}

---

• args

---

Innri föll

• Getum skilgreint föll innan falls
• Innri föll eru aðeins í scope fyrir ytra fall
• Innri föll hafa aðgang að scope ytra falls

---

Lokanir – closures

• Þegar við höfum innri föll þá myndum við lokun um umhverfi þess
• Innra fall hefur aðgang að ytra scope meðan það lifir
• Breytu nöfn í innriföllum skrifa yfir ytri

---

Lokanir - dæmi

function makeAdder(x) {
  // þetta fall hefur alltaf aðgang að x
  // því við myndum lokun
  return y => x + y;
}
const add4 = makeAdder(4);
console.log(add4(6)); // 10

---

function outer(a) {
  const x = 1;
  function inner(b) {
    const y = 2;
    function innerinner(c) {
      const z = 3;
      return x + y + z + c;
    }
    return innerinner(b);
  }
  return inner(a);
}
outer(10); // 16

---

• closures