Skip to main content

Funcions, Arrow Functions i el Context de this

Les funcions són blocs de codi reutilitzables que encapsulen una sèrie d'instruccions per executar una tasca concreta. Permeten estructurar el codi, millorar la llegibilitat i reutilitzar comportaments.

Beneficis de fer servir funcions​

  • Reutilització: escrius una vegada, reutilitzes tants cops com vulguis.
  • Modularitat: cada funció té una responsabilitat.
  • Mantenibilitat: canvis en una funció afecten a tot arreu on s’utilitza.
  • Claredat: codi més llegible i amb noms descriptius.

Estructura bàsica d'una funció​

function saludar(nom) {
  return `Hola, ${nom}!`;
}
  • Paràmetres: variables que reps (nom)
  • Arguments: valors que passes ("Joan")
  • return: indica el valor que retorna la funció

Bones pràctiques​

  • Usa noms descriptius (calcularMitjana, validarUsuari)
  • Utilitza camelCase
  • Comença amb verbs
  • Evita noms genèrics com funcion1
  • Documenta amb JSDoc si és complexa
/**
 * Calcula l’àrea d’un triangle.
 * @param {number} base
 * @param {number} altura
 * @returns {number}
 */
function areaTriangulo(base, altura) {
  return (base * altura) / 2;
}

Activitats bàsiques​

  1. Crea calcularAreaRectangle(base, altura)
  2. Escriu esPar(num) que retorni true/false
  3. Fes una funció que imprimeixi "Hola" X cops
  4. Escriu convertirEuroADolar(euro, canvi)
  5. Escriu calcularNotaFinal(t1, t2, ex) amb mitjana ponderada

Expresions de funcions​

const sumar = function (a, b) {
  return a + b;
};
  • Pot ser anònima
  • No fa hoisting

Arrow functions (funcions de fletxa)​

Introduïdes a ES6, tenen una sintaxi més compacta i no tenen el seu propi this.

const sumar = (a, b) => a + b;

Si hi ha més d’una instrucció:

const saludar = (nom) => {
  console.log("Hola");
  return nom;
};

Característiques especials​

  • Sintaxi concisa
  • No tenen this, arguments ni super propis
  • Són sempre expressions, no declaracions
  • Ideal per funcions simples o callbacks

Comparació de sintaxi​

// Declaració
function sumar(a, b) {
  return a + b;
}

// Expressió
const sumar = function (a, b) {
  return a + b;
};

// Arrow
const sumar = (a, b) => a + b;

Activitats funcions fletxa​

  1. Converteix saludar(nom) en arrow
  2. Passa calcularArea(base, alt) a arrow
  3. Fes una arrow que comprovi si un número és divisible per 3
  4. Escriu una arrow que retorni el primer caràcter d’una cadena

El context de this​

this fa referència a l’objecte des d’on s’invoca la funció. El seu comportament depèn de com i on es fa la crida.

En context global​

console.log(this); // window (navegador)

En funcions normals​

function mostrar() {
  console.log(this);
}
mostrar(); // `this` = window

En objectes​

const persona = {
  nom: "Joan",
  parlar: function () {
    console.log(this.nom); // "Joan"
  },
};

En funcions fletxa​

const persona = {
  nom: "Joan",
  parlar: () => {
    console.log(this.nom); // `this` no és "persona"
  },
};

Mètodes, constructores i mode estricte​

En class constructors​

class Persona {
  constructor(nom) {
    this.nom = nom;
  }

  saludar() {
    console.log(`Hola, sóc ${this.nom}`);
  }
}

En mode estricte​

"use strict";
function test() {
  console.log(this); // undefined
}

Activitats amb this​

  1. Crea un objecte usuari amb nom i saludar()
  2. Afegeix saludar() com a funció fletxa i observa el resultat
  3. Crea una classe Cotxe amb marca i presentar()
  4. Fes servir this dins un event listener sobre un botó

Aquest capítol t’ajuda a dominar les funcions i entendre el context real d’execució. Saber quan i com usar this, return, i quina sintaxi escollir et farà escriure codi més robust i llegible.