Javascript

7. Metoder

När du skapar egna metoder (funktioner) i JavaScript finns det flera viktiga saker att tänka på både för kodkvalitet, prestanda och läsbarhet. Här kommer en strukturerad guide:

🔹 1. Välj rätt sätt att definiera metoden

JavaScript har flera sätt att skapa funktioner/metoder:

Funktiondeklaration (hoistas)

function greet(name) {
  return `Hej, ${name}`;
}

✅ Kan anropas före definitionen (hoisting). ❌ Kan bli förvirrande i stora filer.

Funktionuttryck

const greet = function(name) {
  return `Hej, ${name}`;
};

✅ Mer kontrollerad scope. ❌ Kan inte användas innan den definieras.

Arrow function (kortare syntax)

const greet = (name) => `Hej, ${name}`;

✅ Kort och modern syntax. ❌ Binder inte sitt eget this → viktigt i objekt/metoder.

Metod i objekt

const user = {
  name: "Anna",
  sayHello() {
    return `Hej, jag heter ${this.name}`;
  }
};

🔹 2. Tänk på this

  • I vanliga funktioner sätts this beroende på hur funktionen anropas.
  • I arrow functions är this bundet till omgivande scope.

Exempel:

const obj = {
  value: 10,
  normal: function() { return this.value; },
  arrow: () => this.value
};

console.log(obj.normal()); // 10
console.log(obj.arrow());  // undefined (eller globalt context)

👉 Tips: Använd vanliga funktioner i objekt/metoder, och arrow functions i callbacks.

🔹 3. Parametrar och standardvärden

function greet(name = "gäst") {
  return `Hej, ${name}`;
}
console.log(greet()); // "Hej, gäst"
  • Använd defaultvärden för att undvika undefined.
  • Använd destructuring för tydliga parametrar:
function printUser({name, age}) {
  console.log(`${name} är ${age} år.`);
}

🔹 4. Returnera värden tydligt

  • Använd return för att lämna resultat.
  • Om funktionen inte returnerar något → returnerar undefined.

🔹 5. Håll funktionerna små och fokuserade

  • En funktion ska göra en sak väl.
  • Dela upp långa funktioner i mindre delar.

🔹 6. Dokumentera och namnge bra

  • Namn ska vara verb om de gör något (calculateSum, getUser).
  • Kommentera om funktionen är komplex.

🔹 7. Error handling

  • Använd try/catch för funktioner som kan kasta fel.
function parsejavascriptON(str) {
  try {
    return javascriptON.parse(str);
  } catch (e) {
    console.error("Ogiltig javascriptON:", e);
    return null;
  }
}

🔹 8. Pure functions vs Side effects

  • Pure function: Ger samma output för samma input, ändrar inget utanför sig själv.
  • Side effects: Ändrar globalt tillstånd, DOM, eller data utanför funktionen.

👉 Sträva efter pure functions där det går → enklare att testa/debugga.

🔹 9. Asynkrona metoder

  • Använd async/await för bättre läsbarhet än then().
async function fetchUser() {
  const res = await fetch("/api/user");
  return res.javascripton();
}

✅ Sammanfattning – att tänka på när du skapar egna metoder:

  1. Välj rätt funktionstyp (function, arrow, metod).
  2. Förstå hur this fungerar.
  3. Använd defaultparametrar och destructuring.
  4. Returnera värden tydligt.
  5. Håll funktionerna små och fokuserade.
  6. Namnge bra och dokumentera.
  7. Hantera fel (try/catch).
  8. Sträva efter pure functions när det går.
  9. Använd async/await för asynkrona operationer.