JavaScript

FUNKTIONER

Funktioner, repetition och begrepp

  • En funktion är ett kodblock som kan återanvändas
  • En funktion körs när man anropar den. Kan anropas flera gånger, även inne i en funktion
  • En funktion kan ta in olika parametrar som funktionen kan  använda sig av
  • En funktion kan  returnera ett värde, eller köras utan definierat returvärde

Exempel

// Definition av en funktion
function doSomething() {
	console.log('This is a call from a function')
}
// Funktionen anropas, körs. Eng function call, running, invoking 

doSomething()

// Kan köras igen och igen...
doSomething()
doSomething()


// En funktionsdefinition som tar in två parametrar och returnerar ett värde
function processor(apelsin, morot) {

	const juice = `Denna funktion gör härlig, saftig juice av ${apelsin} apelsiner och 
	${morot} morötter. Smaka gärna av slutprodukten!`; //Inne i funktionen så är parametrarna referade som argument

	return juice; // Det reserverade ordet return anger vad som ska skickas ut ("returnas") från funktionen

}

let juice = processor(5, 3) // Nu körs juicen..




# Funktioner

Funktionsdeklaration

Kodblock som körs

function multiply(a,b) {

    let result = a * b;
   
    return result;
}


let result = multiply(3,4);
console.log(result); // Skriver ut 12

Valbart namn på funktion

vad funktionen skickar ut (returnerar) 

vad funktionen skickar in parametrar) 

Eng. Function declaration

Funktionsuttryck

Kodblock som körs

const multiply = function(a,b) {

    let result = a * b;
   
    return result;
}


let result = multiply(3,4);
console.log(result); // Skriver ut 12

Eng. Function expression

Här tilldelas funktionen i en variabel som sedan anropas

const book = {
  author: "JK Rowling",
  title: "Harry Potter och de vises sten",
  type: "Fiktion",
  getDetails: function() {
    return `Författare ${this.author} och boken ${this.title} i kategori ${this.type}`;
  }
};

console.log(book.getDetails());
# PRESENTING CODE

 Definiera en funktion inuti ett objekt

Funktionsdeklaration v.s Funktionsuttryck

  • Hoisting Funktionsdeklarationer flyttas (hissas) till toppen av sitt scope innan koden körs. Det innebär att en funktion kan anropas före den är definiera. Detta gäller inte Funktionsuttryck då de sparas i en variabeln - variabler hoistas inte i JavaScript
  • Beroende på situation. När man vill definiera en funktion i ett objekt måste man använda funktionsuttryck
  • Kodningstil - eller hur vill vi koda? En del förespråkar endast funktionsuttryck eftersom det säkerställer att man anropar efter funktionsdefinition

Exempel Hoisting

// Funktionsdeklarationer "hoistas", d.v.s hissas till toppen och blir 
// åtkomliga i det omringande scopet. Fördelen är att man kan anropa 
// funktionen innan dess definition
foo()

function foo() {
    console.log("This function has been hoisted")
  }

foo()

bar() // ReferenceError: Cannot access 'bar' before initialization

// Funktionsuttryck hoistas inte eftersom just dessa funktioner tilldelas
// till en variabel. Variabeltilldelningar hoistas inte.
const bar = function() {
    console.log("Will this work?")
  }

bar()
# FUNKTIONER
// Funktionsutryck utan parametrar
let myFunction = function() {
    console.log('Inside function expression');
};



# FUNKTIONER

Arrow function, sv. pilfunktioner

Det närmsta du kommer Robin hood 🏹

// Funktionsutryck utan parametrar
const myFunction = function() {
    console.log('Inside function expression');
};



# FUNKTIONER

Arrow function, sv. pilfunktioner

Det närmsta du kommer Robin hood 🏹

// Samma funktionsuttryck fast med arrow function
const myFunction = () => { 
console.log('Inside arrow function'); 
};


// Funktionsutryck med en parameter
const displayGreeting = function(name) {
    console.log('Hello', name);
};

# PRESENTING CODE

Arrow function med parametrar

// Funktionsutryck med en parameter
const displayGreeting = function(name) {
    console.log('Hello', name);
};

# PRESENTING CODE

Arrow function med parametrar

// Samma funktionsutryck fast med arrow function
const displayGreeting = (name) => {
    console.log('Hello', name);
};

// Funktionsutryck med en parameter
const displayGreeting = function(name) {
    console.log('Hello', name);
};

# PRESENTING CODE

Arrow function med parametrar

// Samma funktionsutryck fast med arrow function
const displayGreeting = (name) => {
    console.log('Hello', name);
};

// Med fler paramterar
let displayGreeting = (greeting, name) => { 
    console.log(greeting + name); 
}
# PRESENTING CODE

Arrow function med implicit return

// Samma funktionsuttryck fast med arrow function
const myFunction = (a, b, c) => a + b + c;  //Returnerar summan 

const getSomething = thing => `This is a ${thing}!` // Returnerar strängen

// Går alltså bra att ta bort parenteserna om endast en parameter!

En funktion som returneras utan att ange "return", blir kort och koncist!

Allt med Arrow functions är bara

SYNTAXISKT SOCKER

Alltså ingen skillnad i funktion

Utan bara lite snabbare att koda!

Dock finns det en liten skillnad hur this beter sig, mer om det en annan gång.

First-class functions

När ett programmeringsspråk har egenskapen "first-class functions" kan en funktion användas på flera sätt

  • En funktion kan tilldelas till en variabel (funktionsuttryck)
  • En funktion kan vara ett argument till en annan funktion
  • En funktion kan returneras i en annan funktion

Endast ett koncept. En egenskap som Javascript har.

Det man kan göra med funktioner

// Tilldela funktionen till en variabel
const foo = () => {
  console.log("foobar");
};
foo(); // Invoke it using the variable
// foobar


// En funktion är argument till en annan funktion
function sayHello() {
  return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, "JavaScript!");
// Hello, JavaScript!


// Returneras i en annan funktion
function sayHello() {
  return () => {
    console.log("Hello!");
  };
}
# FUNKTIONER

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

The return of the high- order functions

 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!

setTimeout(function(){
   console.log('hello!');
}, 1000);

// 1 second later
'hello!'
# PRESENTING CODE

setTimeout och setInterval

setInterval(function(){
   console.log('hello');
}, 1000)

// 1 second
'hello!'
// 2 seconds 
'hello!'

JavaScript Funktioner

By sandra-larsson

JavaScript Funktioner

  • 45

More from sandra-larsson