Introduction

À propos des auteurs

Mariano Álvarez
Freddy Montes
Alfredo Bonilla

HTML
Qu'est-ce que HTML5 ?
Comment puis-je inclure du CSS dans un HTML ?
Où la balise script peut-elle être incluse dans HTML ?
Quelle est la différence entre les attributs async et defer dans la balise script ?
Quelle est la différence entre la balise <b> et <strong> ?
Quelle balise est nécessaire pour que le site soit réactif ?
Qu'est-ce qu'un SVG ?
Quels sont les attributs d'une balise HTML ?
Quelle est la différence entre class et id ?
Qu'est-ce que le HTML sémantique ?

Comment la langue d'un document est-elle définie ?

Qu'est-ce que l'ARIA ? À quoi ça sert ?
Comment rendre une page accessible ?
À quoi sert la balise <base> ?
Qu'est-ce qu'un iframe ?
Comment fonctionne la technique de inlining-fonts ?

CSS
En quoi consiste le modèle de boîte (box model) ?
Qu'est-ce que le box-sizing ?

Quelles sont les différences entre flexbox et grid ?

Comment centrer un élément à l'écran ?
À quoi sert un préprocesseur CSS ?
Sais-tu la différence entre les unités relatives et absolues ?
Quelles sont les unités relatives de CSS que tu connais ?
Quelles sont les unités absolues de CSS que vous connaissez ?
Pouvez-vous mentionner 3 façons de cacher un div ?
Qu'est-ce que !important ?
Quelle est la différence entre normalize et reset ?
Comment optimiseriez-vous l'utilisation des images pour les appareils mobiles ?
À quoi sert le sélecteur * ?
Qu'est-ce que les pseudo-sélecteurs ? Peux-tu expliquer certains d'entre eux ?

Que fait le sélecteur div + p ?

Que fait le pseudo-sélecteur :is ?

2
 Que fait position: absolute ?
Que sont les media queries?
Qu'est-ce que @support ?

À quoi sert le z-index ?

JavaScript
Qu'est-ce que le scope ?
Qu'est-ce que le contexte ?

Qu'est-ce que le hoisting ?

Quelle est la différence entre var, const et let ?

Comment fonctionne .map ?
Comment fonctionne .reduce ?
Comment fonctionne .filter ?
Quelles sont les différences entre == et === ?
JavaScript est-il un langage orienté objet ?
Qu'est-ce que Prototype ?
Qu'est-ce que la coercition implicite ?
Quelle est la différence entre les paramètres et les arguments ?
Quelles fonctions bloquent la boucle d'événements de JavaScript ?
Quelles sont les manières de déclarer une fonction ?
Comment JavaScript est-il si efficace s'il n'est pas multi-thread ?
À quoi sert le "mode strict" ?
Que se passe-t-il si je déclare une variable sans let, var ou const ?
Qu'est-ce qu'un IIFE?
Qu'est-ce qu'un closure ?
Qu'est-ce que les chaînes de modèle ?

Qu'est-ce qu'un callback ?

Qu'est-ce qu'un callback hell ?
Explique la différence entre while et do while
Qu'est-ce qu'une promesse ?
Quand il n'est pas recommandé d'utiliser des fonctions fléchées ?

À quoi sert le mot-clé delete ?

Comment créer une propriété dans un objet de manière dynamique ?
Qu'est-ce que isNaN() ?
Qu'est-ce que null ?
Qu'est-ce que la délégation d'événements ?

Quels sont les états du document ?

Qu'est-ce qu'un polyfill ?
Qu'est-ce qu'un gestionnaire de paquets et quels sont les plus utilisés en JavaScript ?
Qu'est-ce que l'ECMAscript ?

Autres questions

3
 Comment fonctionne AJAX ?
Qu'est-ce qu'une requête HTTP ?
Qu'est-ce que CORS ?
Quels sont les méthodes de requêtes HTTP que vous connaissez et à quoi servent-elles ?

Qu'est-ce que le contrôle de version ?

À quoi sert un CDN ?
Qu'est-ce que webpack ? Connais-tu d'autres alternatives ?
Quelle est la différence entre sessionStorage, localStorage et cookie ?
Comment améliorer les performances d'une page web en général?
Quels sont les formats d'images pris en charge par le navigateur ? Lequel est le plus efficace ?
Comment vérifiez-vous si quelque chose que vous faites est pris en charge par les navigateurs ?
Quelle est la différence entre un framework et une bibliothèque ?
Qu'est-ce que tu étudies en ce moment ?

Exercices
Exercice 1
Exercice 2
Exercice 3
Exercice 4
Exercice 5

La dernière question :
Quelles questions avez-vous ?
Quel est le stack technologique du projet ?
Quels sont les principaux problèmes qu'ils rencontrent actuellement au niveau du projet ?
Quelle méthodologie de développement utilisez-vous dans le projet (waterfall, agile, shape up) ?
Comment se passe le quotidien d'un développeur dans son projet ?
Quel est le chemin professionnel pour les développeurs ? Comment peut-on évoluer à l'intérieur de
l'entreprise?
Quel serait le développeur idéal pour votre entreprise / projet ?
Comment l'organisation s'assure-t-elle de maintenir une culture saine au sein de l'entreprise ?
Quel serait mon rôle au sein du projet/entreprise ?
Quelle est la vision de l'entreprise à court et à long terme ?
Avec qui je travaillerais ?
Qu'est-ce qui suit après cet entretien ?

Conclusion

4
Introduction
Après plus de 30 ans d'expérience combinée dans l'industrie et avoir réalisé plus
De 300 entretiens, nous avons pu déterminer les principaux points où les candidats
fallan et c'est pourquoi nous avons consolidé 99 questions et réponses qui résolvent ce problème.

Nous savons que les entretiens d'embauche représentent un défi important pour tous, c'est pourquoi l'objectif

de ce livre est de vous offrir une solide compilation d'exemples, de questions et de réponses pour que
vous pouvez avoir une meilleure idée de la façon de vous préparer à un entretien d'embauche pour un poste comme

développeur web.

Le livre est divisé en les blocs suivants : HTML, CSS, JavaScript, qui englobent les
trois grandes zones les plus importantes du web avec deux autres blocs de questions et de
exercices supplémentaires qui mettent à l'épreuve la logique de programmation et les connaissances des

particularités du processus de développement d'applications web.

Il existe définitivement plus de 99 questions d'entretien possibles, chaque intervieweur a sa

style il n'est donc pas surprenant que les questions que vous recevrez lors des entretiens soient
différentes des exemples ici présentés, cependant, nous considérons que si tu pratiques le
suffisant et tu comprends les concepts de base du développement web, tu n'auras pas de problèmes pour

répondre adéquatement.

Nous vous recommandons d'utiliser ce livre comme un manuel de consultation, si vous souhaitez en tirer profit.

maximale, écrivez et exécutez les exemples dans votre éditeur de code préféré, apportez des modifications et avec

beaucoup de curiosité, recherchez sur Internet les concepts qui ne sont pas clairs.

Nous espérons que vous apprécierez "99 questions d'entretien pour Développeurs Web".

Mariano, Freddy et Alfredo.

5
À propos des auteurs
Mariano Álvarez

Expert Google Developer et développeur Full-Stack, avec plus de 8 ans d'expérience,

passionné par les technologies web, conférencier. Il aime contribuer et collaborer avec la communauté
web.

Twitter| LinkedIn

Freddy Montes

Développeur Front-End et Designer UX/UI avec plus de 10 ans d'expérience dans le développement
produits numériques, créateur de contenu et enseignant.

Twitter| LinkedIn

Alfredo Bonilla

Développeur web indépendant axé sur les technologies web 3.0 et avec plus de 10 ans d'expérience
expérience en développement d'applications web, leadership d'équipes et organisation de
communautés.

Twitter| LinkedIn

6
Crédits
Un grand merci àOscar Barajas(@gndx), Bezael Pérez(@domini_code), Léonard
Picado(@leopyc), Dany Paredes(@danywalls), pour sa collaboration à la révision,
retour d'information et conseils pour la création de ce livre.

7
HTML
HTML, ou HyperText Markup Language, est le langage de balisage standard du web. Les
les questions liées à HTML visent à évaluer votre niveau de compréhension sur la façon dont
fonctionne et ce que cela implique d'écrire un document web de la manière correcte.

8
Qu'est-ce que HTML5 ?

C'est un acronyme couramment utilisé pour désigner la dernière version de HTML, qui a introduit
nouveaux éléments et capacités comme les balises audio, nav, footer, etc.

Comment puis-je inclure CSS dans un HTML ?

Il existe 4 façons d'être inclus :

1. En ligne (inline), directement dans l'étiquette avec l'attribut style

<p style="color:#000;">Ceci est un paragraphe.</p>

2. Utilisant l'étiquette style

<!DOCTYPE html>
<html>
<tête>
<style>
p{
couleur:#000;
}
</style>
</tête>
<body>
<p>Ceci est un paragraphe.</p>
</body>
</html>

3. Avec l'étiquette lien dans l'étiquette tête

<tête>
<link href="styles.css" rel="stylesheet">
</tête>

9
 4. Utiliser JavaScript

<script>
constnote = document.querySelector('.note');
note.style.backgroundColor ='jaune';
note.style.color ='rouge';
</script>

Où peut-on inclure la balise de script dans

HTML ?

Techniquement, vous pouvez l'inclure n'importe où dans le <head> ou le <body>, mais la plupart des
Il est recommandé de l'ajouter à la fermeture de la balise body (</body>), cela évite les blocages dans le

navigateur permettant d'afficher tout le HTML avant de télécharger le fichier du script.

Quelle est la différence entre les attributs async et defer ?

la balise script ?

Avec async, le fichier se télécharge de manière asynchrone et le code s'exécute dès que possible
termine de se télécharger.

<scriptasyncsrc="utils.js"></script>

Avec le mot-clé defer, le fichier est également téléchargé de manière asynchrone, mais le code s'exécute

quand le reste de la page a fini de charger.

<scriptdefersrc="utils.js"></script>

Quelle est la différence entre la balise <b> et

<strong>? </strong>

Dans un navigateur, les deux balises apparaîtront de la même manière, le texte sera marqué comme "gras" (bold).

mais si le site était lu par un lecteur d'écran, il n'y aurait aucun moyen de le savoir.

10
que est un texte surligné, le même problème s'applique à <i>. Avec <strong> et <em> se
résoudre ce problème.

Quelle balise est nécessaire pour que le site soit

réactif?

La balise est <meta> et reçoit deux attributs "name" et "content".

Pour rendre le site web responsive, il faut ajouter les attributs name="viewport" et
largeur=device-width, échelle-initiale=1

La propriété width contrôle la largeur du viewport. Le viewport est une fenêtre graphique
constitue la zone du site web qui est en train d'être vue à ce moment-là. En termes de navigateur
web, est généralement la même chose que la fenêtre du navigateur, en excluant l'interface utilisateur, le

barre de menus, etc.

Vous pouvez définir la valeur d'un nombre en pixels, par exemple width=1000 ou la valeur "spéciale".
device-width est la largeur de l'écran en pixels CSS à une échelle de 100%.

Qu'est-ce qu'un SVG ?

Un graphique vectoriel évolutif (ou SVG pour son acronyme en anglais) est un type d'image défini
en XMLqui utilise des vecteurs et non des pixels, pour pouvoir s'adapter à n'importe quelle taille sans perdre

fidélité.

11
Quels sont les attributs d'une étiquette HTML ?

Les attributs nous permettent d'assigner des valeurs à certaines propriétés des éléments, par
exemple : style, id, classe. Certains éléments ont des attributs uniques tels que l'attribut alt
pour l'étiquette <img>.

Quelle est la différence entre class et id ?

id est un identifiant unique qui ne doit être associé qu'à un élément au sein de la même page
de HTML.

La classe peut être utilisée dans plus d'un élément.

Les deux peuvent être utilisés comme sélecteurs pour appliquer des styles CSS mais il faut
considérer que l'utilisation de l'id comme sélecteur a une plus grande prévalence que la classe à elle seule.

Qu'est-ce que le HTML sémantique?

C'est écrire HTML d'une manière où l'information est organisée avec des balises qui
représentent leur contenu. Un exemple classique est le suivant :

12
Cette disposition pourrait être construite de la manière suivante

<!DOCTYPE html>
<htmllang="fr">
<head>...</head>
<corps>
<divclass="nav"></div>
<div class="sidebar"></div>
<div class="main">
<div class="section1"></div>
<divclass="section2"></div>
</div>
<divclass="footer"></div>
</corps>
</html>

Ce code n'est pas sémantique, nous utilisons des étiquettes pures pour toutes les sections du site web.

Maintenant un exemple avec du code HTML sémantique :

<!DOCTYPE html>
<htmllang="fr">
<head>...</head>
<corps>
<nav>...</nav>
<aside>...</aside>
<principal>
<section>...</section>
<section>...</section>
</principal>
...
</body>
</html>

Comment définir la langue d'un document ?

Utilisation de l'attribut lang dans la balise <html>. En plaçant le paramètre dans la balise <html>
fais en sorte qu'il soit hérité par tous les autres éléments du document.

13
Qu'est-ce que l'ARIA ? À quoi ça sert ?

ARIA signifie "Applications Internet Riches Accessibles". Ce sont une série d'attributs qui permettent
rendre un document web plus accessible aux personnes handicapées.

Complétez le HTML afin que les interactions dans les applications puissent passer aux
technologies d'assistance quand il n'existe pas d'autre mécanisme.

Par exemple, ARIA permet d'avoir des suggestions pour les formulaires et des messages d'erreur,

mises à jour de contenu en direct, etc. Exemple :

envoyer
envoyer

envoyer un e-mail
envoyer un e-mail

Comment rendre une page accessible ?

Quelques recommandations sont :

Ajouter un texte alternatif pour toutes les images avec un texte descriptif.

2. <button> pour les actions et <a> pour les liens.

Utilisez un contraste suffisant entre l'arrière-plan et la couleur du texte.
4. Utilisez des textes descriptifs dans les liens, pas « cliquez ici ».

5. Utilisez correctement les balises d'en-tête (h1, h2, etc.) et avec leur respectif
hiérarchie dans le document.
6. Ajoutez un titre correct à la page en utilisant la balise <title>.
7. Utilisez <label> dans les champs du formulaire.
8. Implémente lenorme ARIA.

À quoi sert la balise <base> ?

Permet de définir l'URL qui sera utilisée dans toutes les adresses relatives au sein du HTML.

Par exemple

14
 <!DOCTYPE html>
<htmllang="fr">
<tête>
<basehref="/chemin/personnalisé/">
</head>
<corps>
<ahref="about-me.html">À propos de moi</a>
</corps>
</html>

Ajouter la balise <base> fait que le lien "about-me.html" du <a> aille à

/chemin/personnel/a-propos-de-moi.html

Qu'est-ce qu'un iframe ?

C'est un élément en ligne qui permet d'insérer une page HTML dans une autre.

Comment fonctionne la technique des polices inlining ?

C'est une technique où le code CSS des polices est placé dans le <head> de l'HTML,
de cette manière, le navigateur trouve les déclarations plus rapidement et n'a pas besoin
faire une requête et attendre qu'un fichier CSS externe avec le même code soit chargé.

Exemple :

<tête>
<style>
@font-face{
Open Sans
src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2");
}

corps{
police-de-caractère:"Open Sans";
}
</style>
</head>

15
CSS
CSS ou "Feuille de style en cascade" est un langage pour définir et créer la présentation d'un
document structuré écrit dans un langage de balisage et dans ce cas, le langage de
Le balisage dont nous parlons est HTML.

En développant pour le web, vous allez faire face à de nombreux scénarios qui nécessitent que les
les éléments doivent se présenter d'une certaine manière. Les questions de CSS visent à évaluer vos connaissances

sur comment utiliser le langage pour faire en sorte qu'un document HTML réponde à un design
spécifique et en plus comment faire en sorte qu'il ait l'air bien sur différents appareils.

16
En quoi consiste le modèle de boîte (box model) ?

Tous les éléments HTML pour CSS ont une boîte autour. Il existe deux types de boîtes.
"inline" et "block". Le modèle de boîte s'applique principalement à celui de bloc.

Parties de la boîte

● Boîte de contexte : Où son contenu est affiché, vous pouvez lui donner des dimensions

en spécifiant une largeur (width) et une hauteur (height)

● Boîte de remplissage : C'est l'espace interne de la boîte, il est défini par la propriété de remplissage

● Boîte de bordure : C'est la première couche extérieure et elle enveloppe le contenu et le remplissage, se

établit avec la propriété border

● Boîte de marge : C'est la couche la plus externe, elle enveloppe toutes les autres couches et se fix

avec la propriété marge

17
Qu'est-ce que le box-sizing ?

C'est une propriété qui permet de définir comment la largeur totale et la hauteur d'une boîte sont

calculé.

Sa valeur par défaut est content-box qui additionne la bordure et le rembourrage à la valeur de la largeur et de la hauteur.

Son autre valeur est border-box qui n'ajoute rien d'extra à la valeur de largeur et de hauteur.

Quelles sont les différences entre flexbox et grid ?

Les flexbox et les grilles sont des méthodes pour le placement d'éléments sur une page web.

Flexbox permet de répartir les éléments dans une dimension, c'est-à-dire en rangées ou en colonnes, tandis que

que la grille permet de le faire en deux dimensions : lignes et colonnes en même temps.

Typiquement, on recommande flex pour les composants et grids pour les mises en page.

18
Comment centrer un élément à l'écran ?

Il existe différentes façons, une facile est de le faire avec flexbox :

.parent{
affichage : flex;/* Place l'élément en mode flexbox */
hauteur:100vh;/* Met la hauteur au maximum de la fenêtre d'affichage */
largeur:100vw;/* Met la largeur au maximum de la fenêtre d'affichage */
justify-content: center;/* Centre les éléments enfants horizontalement */
align-content: center;/* Centre les éléments enfants verticalement */
}

À quoi sert un préprocesseur CSS ?

Ce sont des langages qui permettent d'étendre la fonctionnalité du CSS. Chaque préprocesseur a ses
particularités et syntaxe, mais en général, écrire un CSS valide est accepté par n'importe quel
préprocesseur. De plus, il apporte des avantages tels que la création de fonctions, de mixins, de variables, entre autres.

Quelques exemples sont : Saas, Less

Sais-tu la différence entre les unités relatives et

absolues?

Une unité relative obtient sa taille par rapport à un autre élément de la page, par exemple :

●em, prend la valeur basée sur la taille de police de son élément parent
●rem, prend la valeur de la taille de police de l'élément racine.

Alors que les unités absolues sont des mesures exactes comme px ou pt.

Quelles sont les unités relatives de CSS que tu connais ?

● em
● rem
● %
● vh

19
 ● vw

Quelles sont les unités absolues de CSS qui

tu connais ?

● px
● pc
cm
● mm
pt

Peux-tu mentionner 3 façons de masquer un div ?

En HTML, on peut utiliser l'attribut hidden.

En CSS, les règles suivantes peuvent être utilisées mais elles ont des comportements différents :

Propriété Occupe de l'espace C'est cliquable

0 ✓ ✓

caché ✓ ✗

afficher: aucun ✗ ✗

Qu'est-ce que !important ?

En ajoutant !important à une propriété CSS, cela écrasera toute règle antérieure
en rompant la cascade de styles. Pour cette raison, son utilisation est considérée comme une mauvaise pratique.

Si vous ressentez le besoin de l'utiliser, il est préférable de bien examiner la spécificité de l'élément et d'essayer.

créer un sélecteur plus spécifique pour appliquer la règle que vous souhaitez.

20
Quelle est la différence entre normalize et reset ?

Par défaut, les documents HTML n'ont aucun style et tous les
Les éléments se ressemblent. Le problème réside dans le fait que les navigateurs ont créé leurs propres
styles de base (ce qu'on appelle la feuille de style user-agent) pour chaque élément, rendant que
un même élément se voit différent dans chaque navigateur.

Normalize aide à standardiser avec une série de styles (définis selon le goût du créateur de celui-ci
bibliothèque) qui sont appliqués aux éléments pour qu'ils apparaissent de la même manière à travers
navigateurs.

Contrairement à Reset, qui élimine les styles de base imposés par le navigateur pour
assurer l'uniformité.

Comment optimiseriez-vous l'utilisation d'images pour

appareils mobiles ?

● Utiliser la balise <picture> car elle permet de passer différentes images en fonction d'un
requête média.
● Utilisant l'attribut lazy et en compressant les images.
●Également en mettant en œuvre .webp, qui est un format moderne qui permet d'utiliser
images de bonne qualité avec un poids moindre.

À quoi sert le sélecteur * ?

C'est le sélecteur universel, qui, s'il est utilisé seul * {} (sans être complété par un autre sélecteur), appliquera

les styles définis à TOUS les éléments dans le HTML. Vous pouvez également l'utiliser à l'intérieur de

un autre sélecteur par exemple header * {} et il s'appliquera à tous les éléments à l'intérieur de l'en-tête.

21
Qu'est-ce que les pseudo-sélecteurs ? Peux-tu expliquer ?

certains ?

C'est un mot-clé ajouté à un sélecteur qui spécifie un état spécial des éléments.
sélectionnés.

● :hover applique les styles à un élément lorsqu'il est dans son état "hover", c'est-à-dire,
lorsque le curseur est au-dessus de l'élément.
● :visited applique des styles à un <a> dont le lien a déjà été visité par l'utilisateur.
● :playing applique les styles à un élément média (audio ou vidéo par exemple)
quand le
l'utilisateur commence la lecture.

Que fait le pseudo-sélecteur :is ?

C'est un pseudo-sélecteur de type fonction qui prend en argument une liste de sélecteurs et les
utilise comme conditionnels pour appliquer le style défini. Par exemple :

/*
Mettez le texte en rouge dans tout <p> à l'intérieur d'un en-tête ou d'un pied de page

C'est l'équivalent d'écrire header p, footer p {}

*/
:is(en-tête,pied-de-page)p{
couleur : rouge;
}

/*
Mettez en bleu tout <div> qui a la classe "some" ou "blue"
C'est l'équivalent de faire div.some, div.blue {}
*/
div:is(.some,.blue) {
bleu
}

22
Que fait le sélecteur div + p ?

Sélectionnez le <p> qui se trouve immédiatement après un <div>.

Exemple :

<div></div>
<p>Sélectionne ceci</p>
<p>Ne sélectionnez pas ceci</p>

Que fait position: absolute ?

La position absolue retire l'élément du flux du document, c'est-à-dire qu'il ne prend plus de place.
comment ils le font static et relative. Lorsqu'il est utilisé dans un élément, il se positionne absolument

en référence au père le plus proche qui ait une position relative.

Un élément avec une position absolue occupe au moins deux valeurs pour sa position, une en X et
un autre en Y et pour les configurer, on utilise les propriétés : haut, bas (pour Y) et gauche, droite (pour
X).

Qu'est-ce que les media queries ?

C'est une fonctionnalité de HTML/CSS qui permet de modifier comment un site Web apparaît et fonctionne.
en fonction du type général de dispositif (comme l'impression ou l'écran) ou des caractéristiques et

paramètres spécifiques (comme la résolution de l'écran ou la largeur du viewport de

navigateur).

Qu'est-ce que @support?

C'est une règle qui permet d'appliquer des styles CSS si le navigateur prend en charge une fonctionnalité ou non.

spécifique à la conditionnelle. Exemple :

23
 @supports(display: grid) {
div{
affichage: grille;
}
}

@supportsnot (display: grid) {

div{
flottant : droite;
}
}

À quoi sert le z-index ?

Contrôle l'ordre de l'empilement vertical des éléments qui se chevauchent et n'affecte que
les éléments qui ont une valeur de position différente de statique (la valeur par défaut).

24
JavaScript
JavaScript est un langage de programmation léger, interprété avec des fonctions de première classe.
Comprendre le fonctionnement de JavaScript est crucial dans le développement web, étant donné que c'est un

langue avec de nombreuses particularités. Les questions de cette section visent à mesurer votre niveau de

expérience et compréhension, ses caractéristiques et les modèles déjà existants dans la langue.

25
Qu'est-ce que le scope ?

C'est la portée qui détermine l'accessibilité des variables à JavaScript.

Il existe deux types de portées :

● Global : les variables peuvent être accessibles dans n'importe quelle partie du code.

● Local : ne peuvent être utilisés et accessibles que dans une partie du code

Quelle est la différence entre var, const et let ?

les variables son qui peuvent être redéfinies

const est une constante qui ne peut pas être redéfinie ou réassignée, cela ne veut pas dire que sa
valeur ne peut pas changer ou est immutable. Par exemple :

constpersona = { nombre:"Mariano"}
persona.nombre ="Juan"
console.log(persona.nombre)// Résultat : Juan

let y const sont des portées de bloc, cela signifie qu'ils ne vivent que dans le bloc (entre {}) où
furent déclarées.

var son des variables qui sont accessibles dans le scope local, peu importe si elles sont à l'extérieur ou à l'intérieur de

un bloc, lorsqu'il est déclaré dans une fonction. S'il est déclaré en dehors d'une fonction, c'est un
variable globale.

Que se passe-t-il si je déclare une variable sans let, var ou const ?

Si le mode strict n'est pas utilisé, la variable devient globale.

26
Qu'est-ce que le contexte ?

C'est la valeur de l'objet auquel fait référence this à l'intérieur d'une fonction. Exemple :

fonctionAnimal(....){
Chien
}

Dans cet exemple, this fait référence à l'objet qui a été créé en utilisant la fonction Animal.

Qu'est-ce que le hoisting ?

Connu en français sous le nom d'"élévation", c'est un comportement prédéterminé de JavaScript

ce que cela fait, c'est d'élever les déclarations au début de l'exécution du codeCeci est une tâche
de l'interprètepour allouer de la mémoire aux déclarations de variables et de fonctions avant le
exécution du code.

Conceptuellement, le hoisting est souvent présenté comme si l'interpréteur «décomposait la déclaration

et l'initialisation des variables, et déplace (uniquement) les déclarations vers le haut du
code

C'est à cause de ce comportement que nous n'avons pas accès à une variable avant sa déclaration et
initialisation postérieure.

// Exemple

console.log(nom)// indéfini
Jon

Ce que fait l'interprète est

constname
console.log(nom)// indéfini
Jon
console.log(nom)// “Jon”

27
 Qu'est-ce qu'un callback ?

C'est une fonction qui est passée en tant qu'argument à une autre fonction pour être exécutée « dans le futur ».

functionsaludar(nom){
console.log(`Bonjour!${name}`);
}

functionobtenirNom(callback){
constname = prompt('Quel est ton nom>');
callback(nom);
}

obtenirNom(saluer);

Comment fonctionne la méthode .map ?

C'est une méthode de tableau qui renvoie un nouveau tableau et "transformé" en utilisant la fonction qui est

passée comme argument (communément appelée callback). Elle s'exécutera avec chaque élément
qu'il ait le tableau.

Comment fonctionne la méthode .reduce ?

C'est une méthode du tableau qui renvoie une valeur "réduite" ou calculée lors de l'exécution d'une fonction

réductrice (le rappel qui lui est passé) sur chaque élément du tableau, donnant comme résultat un
valeur de sortie unique.

La fonction réductrice reçoit en paramètres la valeur "accumulée" de l'itération précédente et le

valeur actuelle du tableau.

Comment fonctionne la méthode .filter ?

Cette fonction retourne un nouveau tableau uniquement avec les éléments qui remplissent la condition
qui est défini en fonction du rappel.

28
Quelles sont les différences entre == et === ?

== comparaison des valeurs, par exemple 2 == '2' est vrai

=== comparaison stricte des valeurs et des types, par exemple 2 === '2' est faux

JavaScript est-il un langage orienté objet ?

Bien que cela soit possible de créer des objets et d'utiliser des classes dans le JavaScript moderne en réalité

c'est un langage orienté vers les prototypes, il peut être facilement démontré :

● Dans les langages orientés objet, en définissant une classe, toutes ses instances vont avoir
les mêmes propriétés et fonctions.
● En JavaScript, les objets utilisent d'autres objets comme base pour définir leurs propriétés.
mais à son tour peuvent définir les leurs, que ce soit au moment de la création ou en temps de
exécution. Cela démontre qu'il s'agit d'un langage basé sur des prototypes.

Qu'est-ce que Prototype ?

C'est une propriété de l'Object, le "parent" dont dérivent tous les autres objets.

Lorsqu'on essaie d'accéder à une propriété d'un objet qui ne l'a pas, il la cherche dans son
prototype

Le prototype contient des méthodes et des propriétés partagées par tous les objets.

Qu'est-ce que la coercition implicite ?

Ternime compliqué, pour expliquer que JavaScript convertit une variable d'un type à un autre
automatiquement.

console.log("1"+1).//résultat : "11"

Le 1 se transforme en "1" et se concatène avec la chaîne.

29
Quelle est la différence entre paramètres et arguments ?

Les arguments sont les valeurs qui sont passées à la fonction lorsque celle-ci est exécutée, par exemple :

somme(2,3)où 2 et 3 sont les arguments.

Les paramètres sont les valeurs qui sont censées être appelées par la fonction, par exemple :

functionsommer(num1, num2){
......
}

Où num1 et num2 sont les paramètres.

Quelles fonctions bloquent la boucle d'événements de JavaScript ?

window.alert, window.prompt et window.confirm bloquent la boucle d'événements et ne continueront qu'une seule fois

voyez que l'utilisateur ferme ces fenêtres. Ils sont considérés comme une mauvaise pratique, et éventuellement
cela pourrait poser des problèmes dans l'application.

Quelles sont les façons de déclarer une fonction ?

constgetName = function(){}

constgetName =() =>{}

functiongetName(){}

Comment JavaScript est-il si efficace s'il n'est pas multi-thread ?

JavaScript gère la concurrence basée sur le modèle de la boucle d'événements, cela fonctionne de cette manière :

Les appels de fonctions sont ajoutés à la pile d'appels, où la première fonction qui entre est
la dernière à se résoudre étant donné qu'elle va d'abord exécuter ce que la fonction contient en elle-même. Les

les fonctions asynchrones ne font pas partie du runtime de JavaScript en soi (comme le setTimeout, AJAX),

30
elles sont ajoutées par le navigateur, elles constituent les Web APIs, et sont exécutées dans un autre fil

de cette manière, ils ne bloquent pas le thread principal. Le rappel qui est passé à la fonction asynchrone
est pris et ajouté à la file d'attente des rappels (par exemple : une fonction chargée du clic d'un
(button), au moment où cette fonction doit s'exécuter, la boucle d'événements l'exécutera une fois que le
la pile d'appels est vide.

Il est important que tu saches qu'aucune des fonctions de l'API Web n'est exécutée.
immédiatement, si la pile d'appels est très pleine, elle devra attendre qu'elle soit vidée pour pouvoir
exécuter les appels de la file d'attente des rappels.

Ceci est une explication très simple et brève, nous vous suggérons d'approfondir vos recherches.
le comprendre mieux.

À quoi sert le 'mode strict' ?

C'est une fonctionnalité introduite dans ECMAScript5 dans laquelle certaines règles sont ajoutées telles que :

● Corrige les erreurs qui compliquent le travail des moteurs JavaScript.

optimisations.
● Interdit l'utilisation de la syntaxe qui pourrait être utilisée dans de futures versions.

● Évite que this pointe vers le scope global s'il est undefined.

31
 ● De plus, cela élimine certaines erreurs silencieuses qui ne peuvent pas être capturées en mode

normal.

Qu'est-ce qu'un IIFE ?

Expression de fonction immédiatement invoquée - C'est une fonction qui s'exécute immédiatement
à peine se définit.

(fonction() {
....
})();

Qu'est-ce qu'un closure ?

Une fermeture est une fonction qui conserve des références de l'état adjacent, c'est-à-dire
une fonction à l'intérieur qui peut accéder à la portée d'une fonction parente.

function creerPersonnage(tipo) {
constpoderBase = 50;

Cette fonction peut accéder à la puissance de base du personnage et à son type.

// de plus, retourne une autre fonction qui peut être utilisée pour générer un
// objet de personnage.
retourner fonction(nombre){
constpersonaje = {
nombre
pouvoirDeBase
type
};
retournerpersonnage;
}
}

......

.........

32
 // Cette ligne déclare une position mémoire pour la fonction "interne"
// retournée par notre fonction "exterieur" creerPersonnage
const créerMago = créerPersonnage("mago")

// Maintenant, avec la fonction créerMago, nous pouvons créer tous les mages
que nous ayons besoin en utilisant la même puissance de base
// référencé dans la fonction créerPersonnage
const miMago = créerMago("Gandalf")
const miOtroMago = créerMago("Merlin")

Une des raisons pour lesquelles cette technique est utilisée est de pouvoir créer des variables privées, dans
l'exemple ci-dessus powerBase est une variable privée, sa valeur n'est pas exposée et ne peut être que
être accédé à l'intérieur du closure.

Qu'est-ce que les chaînes de modèle ?

Ce sont des chaînes délimitées par des backticks (``) ce qui permet de déclarer des chaînes
multi ligne et en outre interpoler des variables de cette manière :

99 questions de
${titre}entretien

Qu'est-ce qu'un callback hell ?

C'est un anti-modèle qui se crée lorsque nous avons une série de fonctions qui reçoivent plus
fonctions, créant des rappels imbriqués. Une solution possible à cela est d'utiliser Promise.

getUser(id, function(user) {
getOrders(user.id,function(orders){
mettreÀJourPropriétaireCommande(commandes, fonction(résultat){

console.log('C'est un enfer de callbacks!')

});
});
});

33
Explique la différence entre while et do while

● pendant que le code s'exécute si la condition est remplie

● faire tant que le exécute jusqu'à ce que cela soit réalisé, donc on peut dire que le code se
corre une fois "de plus" parce qu'il va vérifier la condition après s'être exécuté.

Qu'est-ce qu'une Promise ?

C'est un objet asynchrone qui sera éventuellement terminé et retournera une valeur ou échouera. Il a
3 états :

●en attente : état initial, ni complété ni rejeté.

se résolut de manière satisfaisante.
rejeté : l'opération a échoué.

Vous pouvez créer une promesse de cette manière :

const miPromesa = new Promise((resolve, reject) => {

setTimeout(() =>{
résoudre('foo');
},300);
});

resolve et reject sont les fonctions qui permettent de compléter la promesse.

Avec .then(), on obtient le résultat de la promesse et avec .catch(), on capture les erreurs.

miPromesa
.then(resultado => { console.log(resultado) })
catch(error => { console.log(error); });

Un des objectifs des promesses est d'éliminer les « callback hells » mais tu dois avoir
Faites attention, vous pouvez vous retrouver avec le même problème, par exemple :

34
 miPromesse
.alors(res1 =>{
miPromesa2(res2)
.alors(res3 =>{
miPromesa3(res4)
.then(res4 =>{
console.log(res4)
})
})
})
.catch(error =>{console.log(error) });

Heureusement, les promesses peuvent être chaînées, résolvant le problème :

miPromesa
.alors(res1 =>{
returnmiPromesa(res1)
})
.alors(res2 =>{
returnmiPromesa2(res2)
})
.alors(res3 => {
returnmiPromesa3(res3)
})
.alors(res3 =>{
console.log(res4)
})
Si vous souhaitez écrire un code encore plus propre, vous pouvez utiliser async/await :

const resultat = async () => {

constres1 = await miPromesa();
constres2 =awaitmiPromesa(res1);
constres3 =awaitmiPromesa(res2);
console.log(res3);
}

35
Quand il n'est pas recommandé d'utiliser des fonctions fléchées ?

Une des grandes différences entre une fonction et une fonction fléchée est le comportement de
ce à l'intérieur d'elles.

Dans une fonction, le this fait référence à un contexte dynamique, en fonction de l'endroit où il se trouve.

invocada. Alors qu'une fonction fléchée pointera toujours vers le contexte externe.

Par conséquent, si nous avons besoin que le contexte référencé par le biais de this soit dynamique,
alors nous devrions utiliser une fonction au lieu d'une fonction fléchée.

constchat
miaou
function() { return this.saludo; }
}
// Cet appel va retourner "miau" car la fonction utilise
// cela comme une référence à l'objet qui contient la fonction.
gato.saluer()

Le texte fourni ne contient pas de phrase complète à traduire.

ouaf
() =>this.saludo
}
// Cet appel va retourner *undefined* étant donné que
// ceci est une référence au contexte externe,
// dans ce cas, le contexte global où la variable
// *salutation* n'est pas définie.
perro.saluer()

À quoi sert le mot clé delete ?

Il est utilisé pour supprimer une propriété directement dans l'objet. Exemple :

{
pomme
30
C'est de couleur rouge
};

36
 deleteproducto.descripcion

console.log(produit);// {nom: 'pomme', prix: '30'}

Comment créer une propriété dans un objet de

manière dynamique ?

Avec les propriétés calculées, il est possible de créer dynamiquement une propriété dans un objet. Exemple :

profession

constpersona
Daniela
edad:27,
Administratrice
};

console.log(persona.profesion);// Administratrice

Qu'est-ce que isNaN() ?

C'est une fonction qui retourne vrai si la valeur d'une variable n'est pas un nombre.

function estNombre(num) {
if(isNaN(num)) {
Ce n'est pas un nombre
}
C'est un numéro
}
console.log(estUnNombre('1000F'));
NON, ce n'est pas un nombre

console.log(estUnNombre(1000));
C'est un numéro

37
Qu'est-ce que null ?

C'est une valeur qui représente l'inexistence d'un objet ou d'une valeur, c'est-à-dire que ce n'est ni un objet,

chaîne, booléen ou nombre. Important : ce n'est pas un type.

Qu'est-ce que la délégation d'événements ?

C'est une pratique dans laquelle un événement est assigné au parent/conteneur d'autres éléments.
même type.

Par exemple, si vous avez un menu comme celui-ci :

<nav>
<a>Un</a>
Deux
<a>Trois</a>
</nav>

Au lieu d'itérer et d'assigner l'événement à chaque <a>, il est assigné au <nav> et avec la propriété
currentTarget vous pouvez savoir sur lequel des <a> a été celui qui a exécuté l'événement.

Quels sont les états du document ?

document.readystate est une propriété qui permet de déterminer l'état de chargement d'un
document

Peut contenir les valeurs suivantes :

le document est en cours de chargement

● interactif : le document a fini de se charger et il est possible d'interagir avec les élément
du DOM mais les ressources externes comme les scripts, les images, les styles et les frames sont

chargement encore.
● complet : le document et toutes ses ressources sont chargés.

38
Qu'est-ce qu'un polyfill ?

C'est un code ajouté pour fournir un support, fourni par d'autres navigateurs, à un qui ne le fait pas.

a de manière native.

Qu'est-ce qu'un gestionnaire de paquets et quels sont les plus courants ?

utilisés en JavaScript ?

C'est un logiciel qui automatise le processus d'installation, de mise à jour, de configuration et

suppression de paquets.

Dans le monde de JavaScript, le plus connu est npm (Node Package Module) et cela permet
gérer les dépendances d'un projet mais aussi créer et publier ses propres paquets.

Un autre très utilisé est yarn qui, comme npm, permet de gérer des paquets mais offre également
capacités de gestion de projets et de monorepos.

Qu'est-ce qu'ECMAScript ?

ECMAscript est la norme qui définit les règles et les directives permettant l'interopérabilité
entre navigateurs.

39
Autres questions
Le développement web est un univers immense, donc de nombreuses questions peuvent aller au-delà des
langages utilisés.

Ces questions visent à analyser les connaissances que vous avez en général sur le web comme
plateforme, le navigateur et vos propres processus pour résoudre des problèmes liés à ceux-ci.

40
Comment fonctionne AJAX ?

AJAX signifie JavaScript asynchrone et XML (JavaScript asynchrone et XML) et c'est un

ensemble de techniques de développement web qui comprennent :

1. HTML.
2. Manipulation du DOM (JavaScript).
3. XML, bien que maintenant on utilise JSON pour l'échange de données.
4. Y XMLHttpRequest pour la communication avec le serveur bien que maintenant on utilise le fetch

API.

Avant d'expliquer comment cela fonctionne, analysons l'exemple suivant : Imaginez que vous êtes sur votre réseau

social favorite, et tu laisses un commentaire sur un post, l'UI se met à jour, en ajoutant le texte, sans
aucun besoin de recharger la page, cela se fait avec AJAX, mais comment cela fonctionne-t-il ?

1. Le navigateur effectue un appel à un serveur avec XMLHttpRequest (ou fetch), cela le

fait en arrière-plan.
Le serveur reçoit des données du navigateur, les traite et renvoie de nouvelles données.

3. Le navigateur reçoit ces données et met à jour le DOM avec les informations reçues.

Qu'est-ce qu'une requête HTTP ?

C'est un "message" envoyé depuis le client (par exemple : le navigateur) vers le serveur. Il est utilisé pour

réaliser un échange d'informations entre les deux.

Il existe deux types de messages : les demandes envoyées (request) par le client pour déclencher
une action sur le serveur, et la réponse du serveur (response).

Quels sont les méthodes de requêtes HTTP que vous connaissez et à quoi servent-elles ?

usan?

● GET : pour demander des informations

● PUT : pour mettre à jour une entité
● POST : pour créer une entité

41
 ● SUPPRIMER : pour supprimer une entité
● OPTIONS : permet au client d'identifier quels méthodes le service prend en charge.

Qu'est-ce que CORS ?

CORS (partage de ressources entre origines) est un mécanisme pour restreindre l'accès de
ressources stockées dans un domaine différent.

Qu'est-ce que le contrôle de version ?

C'est un outil chargé de gérer et de contrôler les modifications apportées au code.

De cette manière, un historique est créé où il est possible de suivre chaque modification.
le plus couramment utilisé s'appelle Git mais autrefois on utilisait des systèmes comme SVN ou TFS.

À quoi sert un CDN ?

Le Réseau de Distribution de Contenu - c'est un réseau de serveurs qui est réparti dans différentes parties

du monde avec des copies du contenu, dans le but de minimiser la latence au moment où
que se solicitan les fichiers statiques, cela aide non seulement la latence mais aussi le SEO.

Qu'est-ce que webpack ? Connaissez-vous une autre alternative ?

C'est un "module bundler". Fondamentalement, il prend tout le code de l'application et le "traite" pour
qu'il soit utilisable par le navigateur.

Alternatives

Colis
2. Vite
3. Esbuild
4. Snopack

42
Quelle est la différence entre sessionStorage et localStorage
y cookie?

● Le stockage de session est le stockage d'informations dans le navigateur qui ne va que

persister dans la session de l'utilisateur, si le navigateur ou l'onglet se ferme, l'information va être
effacée.
● LocalStorage, les informations persistent indépendamment de la session.
● Les cookies, c'est un petit fichier créé par le serveur et envoyé au navigateur.

Note :

● Le stockage local et la session ne peuvent être lus que par le client (navigateur) de plus sont
caractéristiques de HTML5.

●Tous peuvent être supprimés par l'utilisateur à tout moment, de plus ils persistent uniquement
sur l'appareil sur lequel il a été utilisé. En général, ils sont utilisés pour stocker
jetons, ou informations de base pour la session de l'utilisateur.

Comment améliorer les performances d'une page web en

général ?

La première chose à faire est d'évaluer la situation et d'identifier où se trouvent les

problèmes de performance. Ils sont généralement liés à :

● Un chargement lent des fichiers - images, fichiers JS, polices, etc. qui sont très
lourds, ils font que le site charge lentement. On peut améliorer les performances en utilisant
stratégies comme celle du lazy loading, du code-splitting, du tree-shaking, de l'inlining des polices. Autre

Une manière technique d'améliorer la latence est de placer les fichiers sur un CDN.

● Problèmes d'exécution - appels API lents, traitement de beaucoup

l'information, le rendu de nombreux nœuds, entre autres, peut causer que le fil de
JavaScript se bloque. Il faut déterminer si le problème se trouve dans le front-end.
ou le back-end et à partir de là mettre en œuvre les améliorations.

43
Quels sont les formats d'images pris en charge par le
navigateur ? Lequel est le plus efficace ?

Les formats d'image généralement supportés par la plupart des navigateurs sont :

1. JPG : c'est le format le plus populaire, il peut gérer des millions de couleurs et différents niveaux
de compression. En général, c'est une excellente option pour afficher des photographies complexes.
avec beaucoup de couleurs.

2. PNG : Tout comme le JPG, il peut supporter des millions de couleurs en plus des transparences.

Il faut faire très attention car plus il y a de couleurs, plus c'est lourd.
L'utilisation principale du PNG sur le web est pour les images avec des fonds transparents, comme

logos, icônes et illustrations.

3. GIF : Supporte seulement 256 couleurs et des transparences, mais la force réside dans le fait que vous pouvez faire

images animées bien qu'elles soient récemment tombées en désuétude en raison des formats de
Les vidéos, dans certains cas, offrent de meilleures performances.
4. WebP : c'est un format développé par Google en 2010 et qui est désormais pris en charge par tous les
les navigateurs, leur principal avantage par rapport au JPG est qu'ils sont entre 25% et 35% plus petits

mais en maintenant la même qualité.

5. AVIF : c'est le plus nouveau (2019), cependant il n'est pas encore pris en charge par tous les

navigateurs, de grandes entreprises comme Facebook et Netflix parient sur

faire du format par défaut sur le web. Il peut atteindre jusqu'à 50 % de moins en taille
avec la même qualité comparée à un JPG.

En ce qui concerne l'efficacité de chaque format, cela va dépendre du type d'image dont vous avez besoin.

montrer

1. Pour les photographies en couleur intégrale, WebP est plus efficace et bientôt AVIF sera meilleur parce que

a plus de compression.
2. Pour les images dont vous avez besoin qu'elles aient un fond transparent, il est préférable d'utiliser PNG.

3. Avant, on utilisait des GIF pour les images animées, mais maintenant les formats vidéo ont
amélioré au point qu'il vaut mieux utiliser la vidéo.

44
Comment enquêter si quelque chose que vous faites est
pris en charge par les navigateurs ?

Il existe des sites Web où vous pouvez vérifier si une fonctionnalité est prise en charge ou non. Vous pouvez

utilisercanIuse.comodeveloper.mozilla.org.

Quelle est la différence entre un framework et une bibliothèque ?

Une bibliothèque résout normalement un seul problème, par exemple, des bibliothèques comme lodash,
scrollreveal, etc.

Un framework fournit tous les outils pour construire une application et indique des standards
que doivent être suivies. De plus, il est courant qu'un cadre établisse une architecture
base pour l'application.

Quelques exemples de frameworks web sont Angular, NextJS, Vue.js

Qu'est-ce que tu étudies en ce moment ?

L'intervieweur cherche à savoir si vous aimez apprendre et étudier de manière proactive et dans le cas où
Ainsi soit-il, il voudra en savoir plus sur ce que vous étudiez et comment vous le faites. Pour les entreprises, c'est de

beaucoup de valeur à travailler avec des personnes qui peuvent apprendre par elles-mêmes et qui se mettent à jour

ses connaissances constamment.

45
Exercices
Il est courant qu'en entretien, on vous demande de résoudre un problème en utilisant du code. Le
L'objectif de ces questions est d'évaluer ta logique pour résoudre des problèmes et tes compétences en
programmation.

Ces problèmes varient de la construction d'un algorithme à l'optimisation d'un code existant.

46
Exercice 1

Implémentez le code de la fonction suivante où la signature est celle-ci : additionner(2)(5);

La manière de résoudre cet exercice est d'utiliser le modèle du closure, qui nous permet d'utiliser
les paramètres de la fonction parente, mais aussi renvoyer une fonction qui prend des arguments,
de telle manière que le code se présenterait ainsi :

constsommer =(num1) =>{

return(num2) =>{
returnnum1 + num2
}
}

Exercice 2

Quel est le résultat du console.log du code suivant ?

pour(vari=1; i <5; i++) { }

console.log(i)

Le résultat est 5. Mais pourquoi ? Comme mentionné dans la question, quelles sont les
différences entre var, let et const ? var fait que la variable ne soit pas block-scope donc sa valeur
est défini lorsque l'on parcourt le tableau, donnant ainsi comme résultat la valeur de 5.

47
Exercice 3

Quel est le résultat de l'exemple suivant ?

laissezpromesse = nouvellePromesse(function(résoudre, rejeter){

résoudre("fait")

rejeter(newError("..."));

setTimeout(() => resolve("..."));

});

Le résultat est fait car une fois que la promesse est complétée, elle ignore toute autre.
appel de resolve ou reject.

Exercice 4

Optimisez le code suivant :

varitems = ['car','tire','street'];

pour(vari=0; i < items.length; i++) {

varlistEL = document.querySelector('ul')
listEL.append(`<li>${items[i]}</li>`);
}

Cet exercice vise à comprendre les connaissances de la personne concernant la manipulation de

éléments et leur impact sur la performance. La solution est la suivante :

constitems = ['car','tire','street'];

constlistEL =document.querySelector('ul')

letnodes

pour(let i=0; i < items.length; i++) {

nodes +=`<li>${items[i]}</li>`
}
listEL.append(nodes);

48
La sélection des éléments et l'utilisation de append sont très lentes et coûteuses, donc il faut les éviter.

dans la mesure du possible. Les extraire en dehors de la boucle permet de créer une chaîne qui, à la fin, se
ajoutera au nœud. De cette façon, l'élément n'est sélectionné et ajouté qu'une seule fois.

L'exemple a quelques distractions, comme le manque d'un ; ou l'utilisation de var au lieu de let ou
const, il est précieux que tu le remplaces mais l'approche réelle est la performance.

Exercice 5

Quel est le résultat de ce code ?

console.log("1");

setTimeout(function() {

console.log("2");

},0);

console.log("3")

Le résultat est : 1, 3, 2. La raison est que setTimeout est une fonction asynchrone.
implémentée par le WebAPI, et bien que le délai soit de 0, le code à l'intérieur de la fonction va
être exécuté jusqu'à ce que lepile d'appelsse trouve vide.

49
La dernière question :
Quelles questions avez-vous ?
Les entretiens ne sont pas seulement un espace pour évaluer vos compétences, ils sont aussi un
excellent moment pour que tu en saches plus sur la culture de l'entreprise et que tu puisses décider si
C'est pour toi ou non.

De plus, les intervieweurs adorent que vous posiez des questions, car cela démontre votre
intérêt pour l'entreprise et les intentions que vous avez d'y contribuer.

Enfin, n'oublie jamais que les entretiens sont autant pour l'entreprise que pour le
candidat, cela peut te permettre de savoir si tu veux vraiment travailler là ou non et si cela va te donner
une valeur ajoutée à votre carrière professionnelle.

Le groupe de questions suivant permet de mieux comprendre quel type d'entreprise c'est, son ouverture
l'adoption de nouvelles technologies et en plus elle vous donnera des informations précieuses pour les suivantes

entretiens.

50
Quel est le stack technologique du projet ?
Il est important que tu sois clair sur les technologies avec lesquelles tu vas travailler, de cette façon tu peux

préparez-vous avant d'entrer au travail et réduisez la courbe d'apprentissage. N'oubliez pas que
une fois que tu rejoins l'entreprise, tu dois prouver pourquoi tu es là, donc plus tu es...
préparé mieux.

Quels sont les principaux problèmes qu'ils ont dans

ce moment au niveau du projet?

Tu dois comprendre à quoi tu t'engages, si tu acceptes le défi, cela te donnera également de la visibilité sur le niveau.

de complexité du projet et comment votre rôle sera associé au projet, les

responsabilités que vous aurez à charge et savoir si vous devrez travailler des heures supplémentaires si le

le travail l'exige.

Quelle méthodologie de développement utilisez-vous dans le projet

cascade

Honnêtement, cela peut vous donner une meilleure perspective sur le type d'entreprise qu'elle est et son

ouverture à adopter de nouvelles tendances. Malheureusement, des méthodologies comme le waterfall sont

"anticuées" et peu bénéfiques, rendent le développement douloureux et il n'y a pas d'opportunité de

retour, c'est un clair signal d'alarme.

Comment est le quotidien d'un développeur dans son

projet ?

Cette question peut vous aider à identifier la manière dont l'entreprise fonctionne, si c'est
organisée ou non, quel que soit l'ordre ou le chaos qui existe, et si tu vas pouvoir le gérer de ton côté.

51
Quel est le parcours professionnel pour les développeurs ?
Comment peut-on progresser au sein de l'entreprise ?

Il est important que tu saches comment tu peux grandir et évoluer au sein de l'entreprise, l'argent ne l'est pas.

finalement, tu vas finir par t'ennuyer si tu fais toujours le même travail. Donc
Il est important de comprendre quelle est la structure dont dispose l'entreprise pour croître.
talent et permettre d'opter pour de meilleurs postes à l'avenir.

Quel serait le développeur idéal pour votre entreprise ?

projet?

Cela va te donner une meilleure idée de ce que l'entreprise recherche, ainsi tu pourras te préparer.
mieux pour les prochaines interviews ou bien décider si vous continuez le processus ou non.

Comment l'organisation s'assure-t-elle de maintenir une

culture saine au sein de l'entreprise ?

Étant donné que vous allez interagir pendant de nombreuses heures de votre journée dans une entreprise, il est sain

comprendre les efforts déployés par cette organisation pour que l'interaction de ses membres
se produise de la meilleure manière.

Les réponses positives à cette question pourraient mentionner des choses comme des codes de conduite,

inclusion, incitations, contrats bien définis et rôles définis ou au moins des personnes qui
vous pouvez contacter en cas de problèmes.

Quel serait mon rôle dans le projet/entreprise ?

Il est important de savoir quelles seront vos responsabilités, de cette manière vous vous assurez que
es-tu d'accord avec le travail cela te donne en plus plus d'informations pour pouvoir faire une
meilleure négociation.

52
Quelle est la vision de l'entreprise à court et à long terme ?

Cela vous aidera à avoir des attentes claires, à savoir à quelle entreprise vous allez vous joindre et les
opportunités que la compagnie pourrait éventuellement te offrir. Bien que tu sois en train de commencer comme

un développeur junior, tu dois avoir des opportunités de croissance. De plus, cela t'aidera à
déterminer si l'entreprise sait exactement où elle va et si elle a des objectifs clairs.

Avec qui serais-je en train de travailler ?

Ce n'est pas la même chose de travailler avec un autre développeur qu'avec le PDG de l'entreprise. Cela te donnera

plus d'informations sur le degré de responsabilité et d'exposition que ce rôle implique.

Qu'est-ce qui suit après cet entretien ?

Cette question te permettra :

● Prépare-toi pour ce qui s'en vient. Plus tu as d'informations, mieux c'est. Ce n'est pas la même chose.

avoir un entretien avec un exécutif ou un leader, qu'un test technique.

● Intuition si je réussis à passer à la phase suivante. Pour être honnête, nous savons tous quand ce n'est pas le cas.

Nous nous en sortons bien lors d'un entretien.

53
Conclusion
Vous êtes arrivé à la fin du livre, félicitations ! Vous avez maintenant plus d'outils pour vous préparer.
pour obtenir le travail que vous désirez tant.

En définitive, la préparation pour un entretien d'embauche technique est assez vaste et est
probable que je prenne quelques expériences pour la maîtriser.

Il est possible que vous participiez à des entretiens qui ne sont pas fructueux et cela peut être dû à de nombreux

facteurs, même étrangers à ta préparation technique. Si cela venait à arriver, ne te décourage pas,
Il y aura toujours plus et de meilleures opportunités.

Nous te recommandons également de ne pas te contenter des exercices et des exemples proposés dans ce
livre, mais aussi que tu pratiques à mettre en œuvre des cas d'utilisation, la véritable expérience est ce

plus précieux au moment de répondre à une question d'entretien.

Nous espérons que vous avez apprécié le livre autant que nous avons apprécié l'écrire.

Nous te souhaitons beaucoup de succès dans ta carrière !

Mariano, Freddy et Alfredo.

54