Domande da colloquio per sviluppatore full stack junior
Milad Bonakdar
Autore
Preparati ai colloqui full stack junior con domande pratiche su HTML, CSS, JavaScript, React, Node.js, API, SQL, Git e debug.
Parti dalle basi full stack
Un colloquio full stack junior di solito verifica se sai spiegare come funziona una semplice app web dal browser al database: HTML e CSS strutturano la pagina, JavaScript aggiunge comportamento, React gestisce lo stato dell’interfaccia, Node.js esegue la logica server, le API collegano i livelli, SQL salva i dati e Git rende il lavoro revisionabile.
Usa questa guida per esercitarti prima con risposte brevi e chiare. Poi collega ogni risposta a un piccolo progetto che hai costruito. Per un ruolo junior raramente serve architettura avanzata, ma servono fondamentali solidi, buone abitudini di debug e spiegazioni oneste dei trade-off.
Come prepararti
- Allenati a raccontare un progetto dall’evento UI alla richiesta API fino alla query sul database.
- Parla degli errori che hai risolto, non solo delle funzionalità consegnate.
- Mantieni le risposte pratiche: definizione, piccolo esempio e un errore comune da evitare.
HTML & CSS
1. Spiega il Box Model in CSS.
Risposta: Il CSS Box Model è il fondamento del layout sul web. Ogni elemento è rappresentato come una scatola rettangolare.
- Content: Il testo o l'immagine effettiva.
- Padding: Area trasparente intorno al contenuto (all'interno del bordo).
- Border: Un bordo che circonda il padding e il contenuto.
- Margin: Area trasparente all'esterno del bordo (crea spazio tra gli elementi).
Rarità: Molto Comune Difficoltà: Facile
2. Qual è la differenza tra display: block, inline e inline-block?
Risposta:
- Block: Inizia su una nuova riga e occupa l'intera larghezza disponibile (ad esempio,
<div>,<p>). - Inline: Non inizia su una nuova riga e occupa solo la larghezza necessaria. Le proprietà
widtheheightnon hanno effetto (ad esempio,<span>,<a>). - Inline-block: Come gli elementi inline, ma è possibile impostare
widtheheight. Utile per griglie o menu di navigazione.
Rarità: Comune Difficoltà: Facile
3. Cos'è l'HTML semantico e perché è importante?
Risposta: HTML semantico significa utilizzare tag che trasmettono il significato del contenuto, non solo il suo aspetto.
- Esempi:
<header>,<nav>,<article>,<footer>invece di soli<div>. - Importanza:
- Accessibilità: Gli screen reader utilizzano questi tag per aiutare gli utenti con problemi di vista a navigare.
- SEO: I motori di ricerca comprendono meglio la struttura e l'importanza del contenuto.
- Leggibilità: Il codice è più facile da capire per gli sviluppatori.
Rarità: Comune Difficoltà: Facile
4. Spiega Flexbox vs. CSS Grid.
Risposta:
- Flexbox: Un modello di layout unidimensionale (riga O colonna). Ideale per allineare elementi all'interno di un contenitore o distribuire lo spazio (ad esempio, una barra di navigazione).
- CSS Grid: Un modello di layout bidimensionale (righe E colonne). Ideale per definire il layout generale di una pagina (ad esempio, header, sidebar, contenuto principale, footer).
Rarità: Comune Difficoltà: Media
JavaScript
5. Qual è la differenza tra var, let e const?
Risposta:
var: Ambito a livello di funzione (o globale). Può essere ridichiarato e aggiornato. Subisce l'hoisting all'inizio del suo scope.let: Ambito a livello di blocco (esiste solo all'interno di{}). Può essere aggiornato ma non ridichiarato nello stesso scope.const: Ambito a livello di blocco. Non può essere aggiornato o ridichiarato. Deve essere inizializzato durante la dichiarazione. Usalo per impostazione predefinita a meno che tu non abbia bisogno di riassegnare.
Rarità: Molto Comune Difficoltà: Facile
6. Spiega async e await.
Risposta:
async e await (introdotti in ES2017) fanno sembrare e comportare il codice asincrono più come codice sincrono.
async: Posto prima di una funzione, assicura che la funzione restituisca una Promise.await: Usato all'interno di una funzioneasync, mette in pausa l'esecuzione fino a quando la Promise non viene risolta.- Vantaggio: Più pulito e leggibile rispetto all'incatenamento di
.then()e.catch().
Rarità: Comune Difficoltà: Media
7. Cos'è il DOM?
Risposta: Il DOM (Document Object Model) è un'interfaccia di programmazione per documenti web. Rappresenta la pagina in modo che i programmi (JavaScript) possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti.
Rarità: Comune Difficoltà: Facile
8. Qual è la differenza tra == e ===?
Risposta:
==(Uguaglianza debole): Confronta i valori dopo aver eseguito la type coercion (convertendoli in un tipo comune). Ad esempio,5 == "5"ètrue.===(Uguaglianza stretta): Confronta sia il valore che il tipo. Nessuna type coercion. Ad esempio,5 === "5"èfalse.- Best Practice: Usa sempre
===per evitare bug inaspettati.
Rarità: Comune Difficoltà: Facile
React
9. Cos'è il Virtual DOM?
Risposta: Il Virtual DOM è una copia leggera del DOM reale mantenuta in memoria.
- Processo: Quando lo stato cambia, React aggiorna prima il Virtual DOM. Quindi confronta il nuovo Virtual DOM con quello precedente (diffing) e calcola il modo più efficiente per aggiornare il DOM reale (reconciliation).
- Vantaggio: Riduce al minimo la manipolazione diretta del lento DOM reale, migliorando le prestazioni.
Rarità: Comune Difficoltà: Media
10. Cosa sono Props e State?
Risposta:
- Props (Properties): Dati di sola lettura passati da un componente padre a un componente figlio. Consentono ai componenti di essere riutilizzabili e dinamici.
- State: Dati gestiti all'interno del componente. Può cambiare nel tempo (ad esempio, input dell'utente, risposta API). Quando lo stato cambia, il componente viene renderizzato di nuovo.
Rarità: Molto Comune Difficoltà: Facile
11. Cosa sono gli Hook di React? Nomina alcuni di quelli comuni.
Risposta: Gli Hooks sono funzioni che permettono ai componenti funzionali di usare funzionalità React come state, context, refs ed effects.
useState: Salva lo stato locale del componente, per esempio il valore di un form o una tab selezionata.useEffect: Sincronizza un componente con qualcosa fuori da React, come il caricamento dati o una sottoscrizione a un evento. Non va usato per ogni calcolo.useContext: Legge un context condiviso senza passare manualmente props a ogni livello.- Consiglio da colloquio: Cita le Rules of Hooks: chiamare gli hook al livello superiore di un componente React o di un custom hook, non dentro cicli o condizioni.
Rarità: Comune Difficoltà: Media
Node.js & Backend
12. Cos'è Node.js e perché è single-threaded?
Risposta: Node.js è un runtime JavaScript basato sul motore V8. Esegue JavaScript su un thread principale, ma può gestire molte attività I/O perché l’event loop coordina il lavoro asincrono.
- Thread principale: Esegue le callback JavaScript.
- I/O non bloccante: Operazioni su file, rete e database possono essere delegate al sistema operativo o a libuv e riprese quando il risultato è pronto.
- Limite importante: JavaScript molto pesante sulla CPU può comunque bloccare l’event loop. Per lavoro costoso, usa worker thread, una job queue o spostalo fuori dal percorso della richiesta.
- Buon esempio: Un server API che attende molte chiamate a database o rete.
Rarità: Comune Difficoltà: Media
13. Cosa sono NPM e package.json?
Risposta:
- NPM (Node Package Manager): Il gestore di pacchetti predefinito per Node.js. Ti permette di installare e gestire librerie (dipendenze).
package.json: Il file di manifesto per un progetto Node.js. Elenca i metadati (nome, versione) e le dipendenze (librerie necessarie per eseguire l'app).
Rarità: Comune Difficoltà: Facile
14. Spiega la differenza tra GET e POST.
Risposta:
- GET: Recupera una risorsa. Dovrebbe essere safe, quindi non modificare intenzionalmente lo stato del server, e idempotente, cioè ripetere la stessa richiesta dovrebbe avere lo stesso effetto.
- POST: Invia dati che il server deve elaborare, spesso per creare una risorsa o attivare un’azione. Non è garantito che sia idempotente, quindi ripetere un POST può creare duplicati se l’API non lo impedisce.
- Esempio pratico: Usa GET per caricare una lista prodotti; usa POST per inviare un ordine o creare un commento.
Rarità: Comune Difficoltà: Facile
Database (SQL)
15. Cosa sono una Primary Key e una Foreign Key?
Risposta:
- Primary Key: Una colonna (o insieme di colonne) che identifica univocamente ogni riga in una tabella. Non può essere
NULL. - Foreign Key: Una colonna che si collega alla Primary Key di un'altra tabella. Stabilisce una relazione tra due tabelle.
Rarità: Comune Difficoltà: Facile
16. Spiega la differenza tra INNER JOIN e LEFT JOIN.
Risposta:
- INNER JOIN: Restituisce i record che hanno valori corrispondenti in entrambe le tabelle.
- LEFT JOIN (o LEFT OUTER JOIN): Restituisce tutti i record dalla tabella di sinistra e i record corrispondenti dalla tabella di destra. Se non c'è corrispondenza, il risultato è
NULLsul lato destro.
Rarità: Molto Comune Difficoltà: Media
17. Cos'è la Normalizzazione?
Risposta: La normalizzazione è il processo di organizzazione dei dati in un database per ridurre la ridondanza e migliorare l'integrità dei dati.
- Obiettivo: Dividere le tabelle più grandi in tabelle più piccole e collegarle utilizzando le relazioni.
- Forme: 1NF, 2NF, 3NF (La terza forma normale è di solito sufficiente per la maggior parte delle applicazioni).
Rarità: Non Comune (per i Junior) Difficoltà: Media
Generale
18. Cos'è Git e perché lo usiamo?
Risposta: Git è un sistema di controllo della versione distribuito.
- Utilizzo: Traccia le modifiche nel codice sorgente durante lo sviluppo del software.
- Vantaggi: Consente a più sviluppatori di lavorare insieme (collaborazione), mantiene una cronologia delle modifiche (versioning) e consente di ripristinare gli stati precedenti se qualcosa si rompe.
Rarità: Comune Difficoltà: Facile
19. Cos'è un'API?
Risposta: API sta per Application Programming Interface. È un insieme di regole che consente a diverse applicazioni software di comunicare tra loro. Nello sviluppo web, di solito si riferisce a una REST API dove un frontend (Client) richiede dati da un backend (Server).
Rarità: Comune Difficoltà: Facile
20. Come fai il debug di un'applicazione web?
Risposta: Inizia riproducendo il problema e restringendo il punto in cui accade: browser, richiesta di rete, handler backend o database.
- Frontend: Usa i DevTools del browser: Console per errori, Network per stato e payload delle API, Elements per HTML/CSS e React DevTools quando serve.
- Backend: Controlla log strutturati, request ID, stack trace, variabili d’ambiente e query al database. Usa un debugger quando il flusso non è chiaro.
- Buona risposta: Racconta un bug reale che hai corretto, cosa hai controllato per primo e come hai confermato la correzione.
Rarità: Comune Difficoltà: Facile
