Arrow Functions in simple Danglish

Standard syntax

Arrow syntax

Parametre skrives først

Keyword function erstattes med =>

Arrow functions er anonymous
- men kan tildeles variabler

b1.addEventListener("click", function(){
    if(x<6){x++;}else{x=1;}
    foto.src="images/cadiz"+x+".jpg";
});

b2.addEventListener("click", ()=>{
    if(x<6){x++;}else{x=1;}  
    foto.src="images/cadiz"+x+".jpg";
});

b3.addEventListener("click", skift3);
function skift3(){
    if(x<6){x++;}else{x=1;}
    foto.src="images/cadiz"+x+".jpg";
}

Standard functions er hoisted, så man kan kalde dem inden de er declared.

const skift4 = () => {
    if(x<6){x++;}else{x=1;}  
    foto.src="images/cadiz"+x+".jpg";
};
b4.addEventListener("click", skift4);

Arrow functions er ikke hoisted, så man skal erklære dem først.

0 parametre:

function myFunction(){
    //statements
}

const myFunction = () => { //statements }

1 parameter:

function myFunction(param){
    //statements
}

const myFunction = (param) => { //statements }

eller, da paranteserne ikke er nødvendige med 1 parameter:

const myFunction = param => { //statements }

2 eller flere parametre:

function myFunction(p1, p2){
    //statements
}

const myFunction = (p1, p2) => { //statements }

Returning an expression:

function (param){
    return param * 2;
}

i stedet for return , fjern de krøllede paranteser:

(param) => param * 2

b5.addEventListener("click", moms1);
function moms1(){
    let price=Number(document.querySelector("#ind1").value);
    document.querySelector("#result1").value=addmoms(price);
}
function addmoms(pris){
    return pris+(pris/4);
}

const addmoms2 = (nypris) => nypris + (nypris/4);
            
b6.addEventListener("click", ()=>{
    let price=Number(document.querySelector("#ind2").value);
    document.querySelector("#result2").value = addmoms2(price);
});

Arrow functions don't bind 'this':

this = ?

            
for (let i=0; i<thumbs1.length; i++){
    thumbs1[i].addEventListener("click", show1);
}
function show1(){
    let newPhoto=this.getAttribute("src");
    big1.setAttribute("src", newPhoto);
}

this = ?

            
const show2 = (e)=>{
    let newPhoto=e.target.getAttribute("src");
    big2.setAttribute("src", newPhoto);
};
for (let i=0; i<thumbs2.length; i++){
    thumbs2[i].addEventListener("click", show2);
}