El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

A la lliçó anterior vas escriure el teu primer programa: unes quantes línies que imprimien el resum d'una tasca de Taller Nómada. Funcionava, però en vas copiar la forma sense conèixer-ne les regles. Ara les aprendràs. La sintaxi és la gramàtica del llenguatge: quins símbols existeixen, com se separen les instruccions, quins noms pots fer servir i com es llegeix un programa. Dominar-la és el que converteix els errors del tipus "no sé què passa" en "ah, falta un punt i coma a la línia 12". És la base sobre la qual s'aguanta absolutament tota la resta.

Contingut

Sentències i punt i coma
La inserció automàtica de punt i coma (ASI)
Blocs amb claus {}
Sensibilitat a majúscules i minúscules
Regles i convencions per als noms
Paraules reservades
Espais en blanc, sagnat i estil
Expressions enfront de sentències
Literals
strict mode: el mode estricte
Com es llegeix un programa de dalt a baix
Errors Habituals i Consells
Exercicis
Conclusió

Sentències i punt i coma

Un programa és una seqüència de sentències (o instruccions): ordres completes que el motor executa una rere l'altra. Cada sentència acaba amb punt i coma (;).

const titol = 'Redissenyar la sala polivalent';
const responsable = 'Iván';
console.log(titol, responsable);

Aquí hi ha tres sentències: dues declaracions i una crida a funció. S'executen en ordre, de dalt a baix.

Tècnicament en pots posar diverses a la mateixa línia si les separes amb ;, però no ho facis: es llegeix molt pitjor.

// Vàlid però il·legible: evita-ho
const prioritat = 'alta'; const hores = 12; console.log(prioritat, hores);

1.1 Sentències que no porten punt i coma

Hi ha excepcions importants. Els blocs de codi no porten punt i coma després de la clau de tancament:

// Correcte: no hi ha punt i coma després de la clau de tancament
if (prioritat === 'alta') {
  console.log('Tasca urgent');
}

// Tampoc no en porta una declaració de funció
function mostrarTasca() {
  console.log('Tasca de Taller Nómada');
}

Ara bé, quan una funció s'assigna a una variable, sí que porta punt i coma, perquè la sentència completa és l'assignació:

const mostrarTasca = function () {
  console.log('Tasca de Taller Nómada');
}; // ← aquest punt i coma tanca l'assignació

La regla mental és senzilla: el punt i coma tanca una sentència, no un bloc.

La inserció automàtica de punt i coma (ASI)

Aquí arriba una de les particularitats més discutides de JavaScript. El llenguatge té un mecanisme anomenat ASI (Automatic Semicolon Insertion): si una línia s'acaba i el motor considera que la sentència és completa, hi insereix un punt i coma pel seu compte.

Per això aquest codi funciona sense errors:

const responsable = 'Lucía'
const hores = 8
console.log(responsable, hores)

Aleshores, cal escriure'ls? El problema és que ASI encerta gairebé sempre, però no sempre, i quan falla l'error resultant és desconcertant.

2.1 El cas perillós: `return`

// Parany! ASI insereix un punt i coma després de return
function obtenirResum() {
  return
  {
    titol: 'Preparar el taller de serigrafia'
  };
}

console.log(obtenirResum()); // undefined

El motor llegeix return, veu el final de línia, decideix que la sentència és completa i insereix ;. L'objecte de les línies següents queda orfe i la funció retorna undefined. La solució és posar la clau d'obertura a la mateixa línia que return.

2.2 El cas perillós: línies que comencen per `(` o `[`

const horesIvan = 12
const horesLucia = 8

// Aquesta línia comença per un parèntesi
;(function () {
  console.log('Bloc independent');
})();

Sense aquest punt i coma inicial, el motor interpretaria que 8(...) és una crida a funció sobre el nombre 8, i llançaria un TypeError. El mateix problema passa amb les línies que comencen per [.

2.3 La recomanació

Estil	Avantatges	Inconvenients
Escriure sempre `;`	Predictible, sense sorpreses, majoritari al sector	Un caràcter més per línia
Ometre'ls	Codi una mica més net a la vista	Exigeix conèixer i recordar les excepcions

En aquest curs escriurem sempre el punt i coma. És l'opció segura mentre aprens, i la més habitual als equips professionals. Si algun dia treballes en un projecte que els omet, una eina de format se n'encarregarà automàticament.

Blocs amb claus `{}`

Un bloc agrupa diverses sentències perquè es tractin com una unitat. Es delimita amb claus.

if (prioritat === 'alta') {
  console.log('Avisar el responsable');
  console.log('Marcar al tauler');
}

Les claus apareixen en condicionals, bucles, funcions i classes. Dues observacions per a principiants:

Primera: si un if té una sola sentència, les claus són opcionals. Però ometre-les és una font clàssica d'errors:

// Parany clàssic: només la primera línia depèn de l'if
if (prioritat === 'alta')
  console.log('Avisar el responsable');
  console.log('Aquesta línia SEMPRE es mostra');

El sagnat suggereix que les dues línies depenen de l'if, però només ho fa la primera. Posa sempre les claus, encara que hi hagi una sola línia.

Segona: els blocs creen àmbit per a let i const. Una variable declarada dins d'un bloc no existeix fora d'ell. És una idea central que veuràs en detall a Variables i Tipus de Dades i a fons a Àmbit i Closures.

{
  const nota = 'Només visible dins del bloc';
  console.log(nota); // funciona
}
// console.log(nota); // ReferenceError: nota is not defined

Sensibilitat a majúscules i minúscules

JavaScript distingeix majúscules de minúscules. Sense excepcions i sense avisos.

const horesEstimades = 12;

console.log(horesEstimades); // 12
// console.log(HoresEstimades); // ReferenceError
// console.log(horesestimades); // ReferenceError

Aquestes quatre escriptures són quatre identificadors diferents: tasca, Tasca, TASCA, tAsCa.

Això també afecta les paraules clau i les funcions del llenguatge:

Correcte	Incorrecte	Error resultant
`console.log()`	`Console.log()`	`ReferenceError: Console is not defined`
`const`	`Const`	`SyntaxError`
`if`	`If`	`ReferenceError: If is not defined`
`Math.round()`	`math.round()`	`ReferenceError: math is not defined`

Fixa't en una cosa reveladora: console va en minúscula però Math en majúscula. No hi ha cap lògica que ho expliqui; és història del llenguatge. Quan dubtis, consulta la documentació.

Regles i convencions per als noms

Un identificador és el nom que dones a una variable, funció o classe. Hi ha regles (obligatòries) i convencions (acords del sector).

5.1 Regles obligatòries

Un identificador vàlid:

Comença per una lletra, un guió baix (_) o un símbol de dòlar ($).
Després pot contenir lletres, dígits, _ i $.
No pot començar per un dígit.
No pot contenir espais ni guions (-).
No pot ser una paraula reservada.

// Vàlids
const titol = 'Preparar el taller';
const hores2026 = 40;
const _intern = true;
const $element = null;

// Invàlids
// const 2hores = 10;        // SyntaxError: comença per dígit
// const hores-totals = 10;  // SyntaxError: el guionet és l'operador de resta
// const const = 10;         // SyntaxError: paraula reservada

Tècnicament JavaScript admet accents i caràcters com la ç (const àmbitTaller = 'disseny'; funciona), però no ho facis: complica la col·laboració, provoca problemes de codificació i no és la pràctica del sector. Els identificadors, en anglès o en català sense accents.

5.2 Convencions de nomenclatura

Convenció	Aspecte	S'utilitza per a	Exemple a Nómada Tasques
camelCase	Primera paraula en minúscula, les següents amb inicial majúscula	Variables i funcions	`horesEstimades`, `dataLimit`, `calcularCarrega`
PascalCase	Totes les paraules amb inicial majúscula	Classes i constructors	`Tasca`, `GestorDeTasques`
UPPER_SNAKE_CASE	Tot en majúscules, paraules separades per `_`	Constants globals fixes	`PRIORITATS_VALIDES`, `MAX_HORES_SETMANA`
_guioBaixInicial	Comença per `_`	Convenció antiga per a "ús intern"	`_cacheInterna`

Aplicat al projecte:

// Constant global de configuració: UPPER_SNAKE_CASE
const MAX_HORES_SETMANA = 40;

// Variables normals: camelCase
const responsableTasca = 'Marta';
const horesEstimades = 6;
const dataLimit = '2026-10-15';

5.3 Noms que s'entenen

Les convencions diuen com escriure; el criteri diu què escriure.

Mal nom	Bon nom	Per què
`x`	`horesEstimades`	`x` no diu res
`d`	`dataLimit`	Les abreviatures d'una lletra s'obliden
`dades`	`tasquesPendents`	"Dades" descriu tot i res
`flag`	`estaCompletada`	Els booleans es llegeixen millor com una afirmació
`tmp2`	`horesRestants`	Els noms numerats amaguen el significat

Regla pràctica: si necessites un comentari per explicar què desa una variable, canvia-li el nom.

Paraules reservades

Són termes amb significat propi al llenguatge; no els pots fer servir com a identificadors.

Categoria	Paraules
Declaració	`var`, `let`, `const`, `function`, `class`
Control de flux	`if`, `else`, `switch`, `case`, `default`, `for`, `while`, `do`, `break`, `continue`, `return`
Errors	`try`, `catch`, `finally`, `throw`
Objectes	`new`, `this`, `super`, `delete`, `in`, `instanceof`, `typeof`, `void`
Mòduls	`import`, `export`, `from`, `as`
Asincronia	`async`, `await`, `yield`
Valors	`true`, `false`, `null`
Reservades per al futur	`enum`, `implements`, `interface`, `package`, `private`, `protected`, `public`, `static`

// const class = 'disseny';  // SyntaxError
// const new = 'tasca';      // SyntaxError

// Alternatives correctes
const classe = 'disseny';
const tascaNova = 'tasca';

Dos matisos curiosos: undefined no és una paraula reservada (és una variable global, tot i que no l'hagis de reassignar), i await només és reservada dins de funcions async i en mòduls.

Espais en blanc, sagnat i estil

Per al motor, els espais en blanc i els salts de línia són irrellevants (llevat que siguin dins de cadenes de text). Aquestes dues versions són idèntiques per a JavaScript:

const t={titol:'Revisar factures',responsable:'Marta',hores:3};

const t = {
  titol: 'Revisar factures',
  responsable: 'Marta',
  hores: 3
};

Idèntiques per a la màquina, però radicalment diferents per a una persona. I el codi es llegeix moltes més vegades de les que s'escriu.

Convencions habituals:

Aspecte	Convenció	Exemple
Sagnat	2 espais per nivell	`console.log(x);`
Espais al voltant dels operadors	Sí	`const total = a + b;`
Espai després de les comes	Sí	`console.log(a, b, c);`
Clau d'obertura	A la mateixa línia	`if (x) {`
Espai després d'`if`, `for`, `while`	Sí	`if (prioritat === 'alta') {`
Espai abans del parèntesi en cridar	No	`calcularCarrega(tasques)`
Longitud de línia	Uns 80-100 caràcters	—

No memoritzis aquesta taula: al Mòdul 8 configuraràs eines que apliquen el format automàticament en desar. L'important ara és que triïs un estil i el mantinguis.

Expressions enfront de sentències

Aquesta distinció sembla teòrica i resulta ser tremendament pràctica.

Una expressió és un tros de codi que produeix un valor.
Una sentència és una ordre completa que fa alguna cosa.

La prova definitiva: puc posar això on s'espera un valor? Si sí, és una expressió.

// Expressions: cadascuna produeix un valor
12                          // el nombre 12
12 + 8                      // 20
'Marta'                     // el text 'Marta'
horesEstimades > 10         // true o false
'alta' === 'alta'           // true
calcularCarrega('Iván')     // el que retorni la funció

// Sentències: són ordres, no valors
const responsable = 'Lucía';
if (hores > 8) { console.log('Jornada llarga'); }
for (let i = 0; i < 3; i++) { console.log(i); }

Les expressions s'imbriquen dins de les sentències:

//        ┌──── sentència de declaració ────┐
const totalHores = 12 + 8 + 6;
//                 └── expressió: val 26 ──┘

Per què importa? Perquè explica què es pot escriure i on. Un if és una sentència, així que no el pots assignar a una variable:

// const resultat = if (hores > 8) { 'llarg' } else { 'curt' }; // SyntaxError

Però l'operador ternari sí que és una expressió, i per això funciona:

const jornada = hores > 8 ? 'llarga' : 'normal'; // correcte

Aquest operador l'estudiaràs a Operadors Bàsics. Queda't amb la idea: les expressions valen; les sentències manen.

Literals

Un literal és un valor escrit directament al codi, tal qual.

Tipus de literal	Exemple	Descripció
Numèric	`12`, `3.5`, `1_000_000`	Nombres escrits directament
De cadena	`'Marta'`, `"alta"`	Text entre cometes
De plantilla	`Tasca de ${responsable}`	Text entre accents greus, admet interpolació
Booleà	`true`, `false`	Els dos valors lògics
Nul	`null`	Absència intencionada de valor
D'objecte	`{ titol: 'Revisar', hores: 3 }`	Un objecte escrit directament
D'array	`['disseny', 'espai']`	Una llista escrita directament
D'expressió regular	`/^\d{4}-\d{2}-\d{2}$/`	Un patró de text

// Diferents literals descrivint una tasca de Taller Nómada
const id = 1;                            // numèric
const titol = 'Redissenyar la sala';     // de cadena
const estaFeta = false;                  // booleà
const etiquetes = ['disseny', 'espai'];  // d'array
const assignadaA = null;                 // nul

El guió baix com a separador de milers (1_000_000) és una comoditat moderna: el motor l'ignora i per a tu el nombre és molt més llegible.

`strict mode`: el mode estricte

El mode estricte activa una versió més rigorosa de JavaScript: converteix en errors alguns comportaments silenciosos i prohibeix sintaxi problemàtica heretada.

S'activa escrivint 'use strict'; com a primera línia d'un fitxer o d'una funció:

'use strict';

// A partir d'aquí, el motor és més exigent
const responsable = 'Iván';

10.1 Què canvia

Sense mode estricte	Amb mode estricte
`x = 5;` sense declarar crea una variable global silenciosament	`ReferenceError: x is not defined`
Assignar a una cosa de només lectura falla en silenci	Llança `TypeError`
`this` en una funció solta val l'objecte global	`this` val `undefined`
S'admeten paràmetres duplicats a les funcions	`SyntaxError`
Paraules futures utilitzables com a noms	Prohibides

El primer cas és el que causa més problemes:

'use strict';

function registrarTasca() {
  horesTotals = 12; // ReferenceError: horesTotals is not defined
}
registrarTasca();

Sense mode estricte, aquesta línia crearia una variable global sense avisar. És una errada que pot trigar setmanes a manifestar-se. Amb mode estricte, l'error apareix a l'instant.

10.2 Quan cal escriure'l

Bona notícia: cada vegada menys. El mode estricte està activat automàticament en dos contextos molt habituals:

Dins de mòduls de JavaScript (fitxers carregats amb <script type="module"> o amb import/export). Es veuen a Mòduls i Importació/Exportació.
Dins del cos de les classes.

Així que la regla pràctica és: escriu 'use strict'; al principi dels fitxers de script clàssics, i no te'n preocupis quan treballis amb mòduls o classes.

Un detall: la directiva ha de ser literalment la primera sentència (els comentaris anteriors no compten). Si la poses més avall, s'ignora sense avisar.

Com es llegeix un programa de dalt a baix

Un motor de JavaScript executa les sentències en l'ordre en què estan escrites, de dalt a baix i d'esquerra a dreta. Segueix aquest programa mentalment abans de llegir-ne el resultat:

'use strict';

console.log('1. Comença el programa');           // A

const responsable = 'Marta';                     // B
console.log('2. Responsable:', responsable);     // C

const horesDilluns = 3;                          // D
const horesDimarts = 5;                          // E
const horesTotals = horesDilluns + horesDimarts; // F

console.log('3. Hores totals:', horesTotals);    // G
console.log('4. Final del programa');            // H

Sortida:

1. Comença el programa
2. Responsable: Marta
3. Hores totals: 8
4. Final del programa

Detall de la línia F: primer s'avaluen les expressions (horesDilluns val 3, horesDimarts val 5, la suma val 8) i només després s'assigna el resultat. Sempre en aquest ordre: primer es calcula el costat dret, després es desa a l'esquerre.

flowchart TD
    A["Línia 1: missatge inicial"] --> B["Línia 2: desar 'Marta'"]
    B --> C["Línia 3: imprimir responsable"]
    C --> D["Línies 4-5: desar 3 i 5"]
    D --> E["Línia 6: avaluar 3 + 5 → 8<br/>i assignar a horesTotals"]
    E --> F["Línies 7-8: imprimir resultats"]

Conseqüència pràctica: no pots fer servir una cosa abans de crear-la. Això falla:

console.log(responsable); // ReferenceError: Cannot access 'responsable' before initialization
const responsable = 'Lucía';

Existeix un mecanisme anomenat hoisting que fa que les declaracions de funció sí que es puguin fer servir abans d'aparèixer al codi, i que explica el missatge concret d'aquest error. És un tema amb prou substància per tenir la seva pròpia lliçó: Hoisting i el Context d'Execució. Per ara, la regla segura és: declara abans de fer servir.

Errors Habituals i Consells

Errors habituals

Posar punt i coma després de la clau de tancament d'un if, for o function. No és un error greu, però és incorrecte i delata un principiant.
Ometre les claus en un if d'una sola línia. El sagnat enganya; el motor no.
Fallar amb les majúscules. Console, Math en minúscula, getElementByID en lloc de getElementById. Provoquen ReferenceError o TypeError desconcertants.
Fer servir guions als noms. hores-totals s'interpreta com hores - totals, una resta. L'error resultant no esmenta el guionet per a res.
Escriure 'use strict'; enmig del fitxer. S'ignora silenciosament. Ha de ser la primera sentència.
Creure que el sagnat té significat. En JavaScript no en té (a diferència de Python): el sagnat només és per a les persones. Els blocs els defineixen les claus.
Noms d'una lletra. S'escriuen en dos segons i costen hores de desxifrar. Llevat de la i d'un bucle curt, posa noms complets.

Consells

Escriu sempre el punt i coma mentre aprens. T'estalvia les excepcions d'ASI.
Posa sempre les claus.
Deixa una línia en blanc entre blocs lògics. El codi respira i es llegeix millor.
Anomena en camelCase i en un sol idioma. Barrejar taskTitle i responsableTasca al mateix fitxer cansa.
Formata amb Maj + Alt + F a VS Code. Un codi ben alineat revela errors d'estructura a simple vista.
Quan vegis un SyntaxError, mira també la línia anterior a la indicada. El motor detecta el problema on deixa d'entendre el codi, que sol ser una línia després d'on falta el símbol.

Exercicis

Exercici 1: Corregeix la sintaxi

El fragment següent té sis errors de sintaxi o de convenció. Troba'ls i escriu-ne la versió corregida.

'use strict'

const 1titol = 'Revisar inventari del taller';
const hores-estimades = 4;
const RESPONSABLE = 'Lucía';
const class = 'manteniment';

if (hores-estimades > 3)
  Console.log('Tasca llarga');
  console.log('Avisar la Marta');

Exercici 2: Expressió o sentència?

Classifica cada fragment com a expressió o sentència, i en el cas de les expressions indica quin valor produeix:

40
const maxHores = 40;
horesEstimades * 2
console.log('Nómada Tasques')
if (estat === 'feta') { console.log('Completada'); }
'alta' === 'baixa'
estat = 'en-curs'

Exercici 3: Anomena correctament

Reescriu aquests noms seguint les regles i convencions de JavaScript, i explica en cada cas què estava malament:

Hores Estimades (variable amb les hores previstes d'una tasca)
2responsable (nom de la segona persona assignada)
data-limit (data màxima de la tasca)
nombre_maxim_de_hores_per_setmana (constant fixa de configuració)
tasca (classe que representarà una tasca)
f (variable amb la data límit)

Solucions

Exercici 1

Els sis errors:

'use strict' sense punt i coma (funciona per ASI, però és incoherent amb l'estil del curs).
1titol: un identificador no pot començar per un dígit.
hores-estimades: el guionet és l'operador de resta; cal fer servir camelCase.
class: paraula reservada.
Console.log: console va en minúscula.
L'if sense claus fa que la segona línia s'executi sempre, malgrat el sagnat.

Versió corregida:

'use strict';

const titol = 'Revisar inventari del taller';
const horesEstimades = 4;
const responsable = 'Lucía';
const categoria = 'manteniment';

if (horesEstimades > 3) {
  console.log('Tasca llarga');
  console.log('Avisar la Marta');
}

Nota addicional: RESPONSABLE en majúscules no és un error sintàctic, però per convenció UPPER_SNAKE_CASE es reserva per a constants globals de configuració, no per a dades concretes.

Exercici 2

#	Classificació	Valor que produeix
1	Expressió (literal numèric)	`40`
2	Sentència (declaració)	—
3	Expressió (aritmètica)	El doble d'`horesEstimades`
4	Expressió (crida a funció)	`undefined` (imprimeix, però no retorna res)
5	Sentència (condicional)	—
6	Expressió (comparació)	`false`
7	Expressió (assignació)	`'en-curs'`

Els casos 4 i 7 són els interessants. Una crida a funció és una expressió encara que la funció no retorni res útil: per això la consola mostra undefined sota els teus console.log. I una assignació també és una expressió el valor de la qual és allò assignat; per això a = b = 5 funciona, tot i que no sigui recomanable escriure-ho.

Exercici 3

Original	Corregit	Problema
`Hores Estimades`	`horesEstimades`	Els espais no s'admeten; a més, camelCase
`2responsable`	`segonResponsable`	No pot començar per dígit
`data-limit`	`dataLimit`	El guionet és l'operador de resta
`nombre_maxim_de_hores_per_setmana`	`MAX_HORES_SETMANA`	Constant fixa: UPPER_SNAKE_CASE i més concís
`tasca`	`Tasca`	Les classes fan servir PascalCase
`f`	`dataLimit`	Un nom d'una lletra no diu res

Conclusió

Ja coneixes la gramàtica de JavaScript. Saps què és una sentència i per què convé tancar-la sempre amb punt i coma tot i l'existència d'ASI; utilitzes blocs {} correctament i saps que creen àmbit; tens clar que el llenguatge distingeix majúscules de minúscules; coneixes les regles dels identificadors i les convencions camelCase, PascalCase i UPPER_SNAKE_CASE; saps què són les paraules reservades; distingeixes expressions (produeixen un valor) de sentències (donen una ordre); reconeixes els diferents literals; entens què activa el strict mode i on ve activat de sèrie; i segueixes mentalment l'execució de dalt a baix d'un programa.

Amb això ja pots llegir codi sense que la forma et distregui. El que et falta és el contingut: les dades. A la lliçó següent, Variables i Tipus de Dades, veuràs en profunditat com declarar variables amb let i const, per què var està desaconsellat, i quins tipus de valors existeixen en JavaScript: textos, nombres, booleans, undefined, null i uns quants més. En acabar-la podràs modelar amb precisió tots els camps d'una tasca de Nómada Tasques.

Sintaxi i Conceptes Bàsics de JavaScript

Contingut

Sentències i punt i coma

1.1 Sentències que no porten punt i coma

La inserció automàtica de punt i coma (ASI)

2.1 El cas perillós: return

2.2 El cas perillós: línies que comencen per ( o [

2.3 La recomanació

Blocs amb claus {}

Sensibilitat a majúscules i minúscules

Regles i convencions per als noms

5.1 Regles obligatòries

5.2 Convencions de nomenclatura

5.3 Noms que s'entenen

Paraules reservades

Espais en blanc, sagnat i estil

Expressions enfront de sentències

Literals

strict mode: el mode estricte

10.1 Què canvia

10.2 Quan cal escriure'l

Com es llegeix un programa de dalt a baix

Errors Habituals i Consells

Exercicis

Exercici 1: Corregeix la sintaxi

Exercici 2: Expressió o sentència?

Exercici 3: Anomena correctament

Solucions

Conclusió

Curs de JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

2.1 El cas perillós: `return`

2.2 El cas perillós: línies que comencen per `(` o `[`

Blocs amb claus `{}`

`strict mode`: el mode estricte