JavaScript

Map, filter, reduce...

Higher-order functions

  • En funktion som tar emot en annan funktion som argument är en s.k higher-order function
  • Detta är alltså möjligt då funktioner i Javascript betraktas som first-class functions
  • Själva funktionen som skickas in kallas för callback-funktion 
const doSomething = () => console.log('Button has been clicked')

btn.addEventListener('click', doSomething);

Higher-order funktion

Callback-funktion

Skapa egen higher-order funktion

 function compute(n1, n2, callback) {
     return callback(n1, n2);
 }

"Var en Jedi!"

Skriv callback-funktionen för:

1. Summera två tal, n1 och n2

2. Testkör!

Array metoder (iterativa)

forEach()

map()

filter()

reduce()

find()

const degrees = [-1, -2, -1, 0, 1, 2, 4]




degrees.forEach(function(degree) {
  

  
  
});


# ARRAYMETODER

Exempel forEach()

Higer-order funktion

Callbackfunktion

const degrees = [-1, -2, -1, 0, 1, 2, 4]




degrees.forEach(function(element) {
  
  if(element > 0) {
    console.log(`Today is frozen ${element}`);
  } else {
    console.log(`Today is above or just 0 ${element} `)
  }
  
});


# ARRAYMETODER

Exempel forEach()

Higer-order function

Callbackfunction

const degrees = [-1, -2, -1, 0, 1, 2, 4]




degrees.forEach(function(degree) {
  
  if(degree > 0) {
    console.log(`Today is frozen ${degree}`);
  } else {
    console.log(`Today is above or just 0 ${degree} `)
  }
  
});
// Varje iteration
// 0: function(-1)
// 1: function(-2)
// 2: function(-1)
// 3: function(0)
// ...


# ARRAYMETODER

Exempel forEach()

Higer-order function

Callbackfunction

Applicera en funktion som "mappar om" varje element i listan. Returnerar nya "mappade" arrayen.

const numbers = [65, 44, 12, 4];

function tenTimes(num) {
  return num * 10;
}

const mappedArray = numbers.map(tenTimes);
console.log(mappedArray)  // Output: [650, 440, 120, 40]

MAP

Med anonym funktion som parameter

const numbers = [65, 44, 12, 4];

const mappedArray = numbers.map(function(num) {
  return num * 10;
});

console.log(mappedArray)  // Output: [650, 440, 120, 40]

MAP

Med arrow-funktion

const numbers = [65, 44, 12, 4];

const mappedArray = numbers.map(num => {
  return num * 10;
});

console.log(mappedArray)  // Output: [650, 440, 120, 40]

MAP 

const app = document.getElementById('app')
const ul = document.querySelector('ul')

players = ['Romelu Lukaku', 'Kylian Mbappe', 'Vinicius Junior']

const list = players.map(player => {
	return `<li>${player}</li>`;
}).join('');

ul.innerHTML = list;
# PRESENTING CODE

Smidigt att generera HTML!

join() slår ihop arrayen till en sträng så att vi får applicerbar HTML!

Skapar en ny array med de element som uppfyller villkoret

const ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}
const filteredArray = ages.filter(checkAdult);

console.log(filteredArray) // Output: [32, 33, 40]

FILTER

Skapar en ny array med de element som uppfyller villkoret

const ages = [32, 33, 16, 40];

const filteredArray = ages.filter(age => {
  return age >= 18;
});

console.log(filteredArray) // Output: [32, 33, 40]

FILTER

"Reducerar" arrayen till ett slutgiltigt värde

const numbers = [175, 50, 25];

function reducerFn(accumulator, item) {
  return accumulator + item;
}

let total = numbers.reduce(reducerFn, 0); 
//0 är initiala värdet

console.log(total);

REDUCE

"Reducerar" arrayen till ett slutgiltigt värde

const numbers = [175, 50, 25];

let total = numbers.reduce((accumulator, item) => {
  return accumulator + item;
}, 0); 
//0 är initiala värdet

console.log(total);

REDUCE

Returnerar det första element som uppfyller villkoret

const students = [
  {name: 'Tim', age: 31},
  {name: 'Tom', age: 29}, 
  {name: 'Tommy', age: 28}
]

const student = students.find((element) => {
  return element.age < 30;
});

console.log(student.name); // Output Tom

FIND

Returnerar index för det första element som uppfyller villkoret

const students = [
  {name: 'Tim', age: 31},
  {name: 'Tom', age: 29}, 
  {name: 'Tommy', age: 28}
]

const studentIndex = students.findIndex((element) => {
  return element.age < 30;
});

console.log(studentIndex); // Output 1

FINDINDEX

Returnerar 'true' om villkoret uppfylls för minst ett element, annars 'false'

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

function even(element) {
  return element % 2 === 0;
}

console.log(array.some(even)); // Output: true

SOME

Returnerar 'true' om villkoret uppfylls på alla element, annars 'false'

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

function even(element) {
  return element % 2 === 0;
}

console.log(array.some(even)); // Output: false

EVERY

Sorterar en array utifrån en jämförelsefunktion

 

Hur byter man till fallande ordning? 🤔

const numbers = [175, 50, 25];

let sortedAscending = 
    numbers.sort(comparisonFn); 

function comparisonFn(a, b) {
  //stigande ordning 
   if (a > b) { 
      return 1;
    }
    else if (a < b){
      return -1;
    }
    else {
      return 0;
    }
}

console.log(sortedAscending);

SORT

MDN Array.prototype.sort()

Sammanfattning 👍

Din verktygslåda 🧰

Du ska veta ungefär vad som behövs i vilken situation, du ska känna dig trygg med verktyget. Ok att kolla i manualen för att vara säker.

forEach() some()
map() every()
filter() sort()
reduce()
find()
findIndex

Map, filter, reduce, etc

By sandra-larsson

Map, filter, reduce, etc

  • 109

More from sandra-larsson