Article original : How to Conquer Job Interview Coding Challenges

Par Jonathan Sexton

Comme beaucoup d'entre vous le savent, je postule pour un emploi en développement web depuis quelques semaines et j'ai pensé qu'il serait bon de partager certains des défis de codage que j'ai rencontrés.

Non seulement cela, mais je vais aussi partager les méthodes que j'ai utilisées pour résoudre ces défis. Bien sûr, il existe de nombreuses façons de résoudre ces défis, mais ce sont celles que j'ai choisies. Si vous avez des méthodes différentes, c'est génial et j'adorerais que vous les partagiez avec moi !

Je ne partagerai aucune information identifiable sur les entreprises ou les détails spécifiques du processus d'entretien pour préserver l'intégrité du processus.

Trêve de bavardages, passons à l'action.

Le Défi

Voici un défi que j'ai reçu récemment et que j'ai réussi à résoudre avec succès :

Tâche : Retourner une liste stylisée de base de posts depuis un endpoint en ordre chronologique inverse

Pour protéger l'entreprise et leurs informations, je ne partagerai pas l'URL depuis laquelle j'ai récupéré les informations, mais j'utiliserai plutôt un lien générique de JSONPlaceholder (une API gratuite et open source pour les développeurs lorsque vous avez besoin de données externes génériques) dans le code ci-dessous.

Voici le HTML avec lequel j'ai commencé pour afficher nos résultats :

un exemple de code montrant du HTML Modèle HTML de base

La balise

    a un id pour que nous puissions la styliser plus tard dans le processus.

    Récupération des données depuis l'endpoint

    D'accord, plongeons dans la partie JavaScript de ce défi. D'abord, j'aime définir mes variables de sortie et d'affichage :

    Code JavaScript montrant deux variables déclarées Nos variables utilisées lors de l'affichage du code retourné

    J'utilise let pour la variable output et je la définis à null car nous changerons sa valeur plus tard dans le code. La variable list est déclarée avec const car sa valeur ne changera pas.

    code javascript montrant une fonction fetch Récupération des données depuis l'endpoint

    Dans l'exemple ci-dessus, nous déclarons une fonction fléchée nommée getData enveloppée dans un bloc try...catch (il s'agit d'une syntaxe plus propre et plus facile à utiliser/lire qui essaie du code et attrape les erreurs si elles se produisent — vous verrez également la partie catch ci-dessous). Comme nous récupérons des données de manière asynchrone, nous devons également utiliser async/await pour récupérer les données. Il s'agit de la méthode avec laquelle je suis le plus à l'aise, mais je sais qu'il existe de nombreuses autres façons d'obtenir des données depuis un endpoint, alors n'hésitez pas à partager les vôtres :D

    Une fois que nous avons déclaré notre variable data, la prochaine étape consiste à définir une variable pour convertir les données retournées en un objet JSON afin de les obtenir sous une forme utilisable. Nous faisons cela avec la méthode .json(). Nous attendons également les données car si nous omettions le mot-clé await, JavaScript essaierait de convertir la variable data en JSON, mais les données ne seraient pas encore là car elles proviennent d'une API asynchrone.

    un log de console d'un tableau javascript Nos données glorieuses !

    En tant que toute dernière ligne de cette section, nous utilisons console.log pour afficher nos données que nous recevons de l'endpoint de l'API, juste pour nous assurer que nous obtenons tout ce que nous voulions. Nous avons un tableau rempli d'objets. Vous remarquerez également que la clé _publishedat contient nos dates et qu'elles ne sont pas dans un ordre particulier. Leur format n'est pas non plus un simple nombre à quatre chiffres représentant l'année, ce qui faciliterait leur filtrage en ordre chronologique inverse. Nous devons nous en occuper.

    Manipulation de nos données

    code javascript qui copie une variable Création d'une copie de notre variable de données

    Ici, nous déclarons la variable dataCopy qui pointe vers la variable dataJSON mutée en un tableau via l'_opérateur de décomposition (...)_. Essentiellement, nous copions nos données JSON retournées afin de ne pas manipuler l'original (mauvaise pratique) tout en les transformant en un tableau afin de pouvoir itérer dessus.

    Ensuite, nous _trions_ le tableau. La méthode de tri est une méthode de tableau extrêmement utile qui placera nos indices de tableau dans l'ordre de notre choix en fonction de la fonction que nous passons à sort.

    Typiquement, nous pourrions vouloir trier les données en fonction de la valeur (de la plus grande à la plus petite), donc nous soustrayons le paramètre a du paramètre b. Mais comme nous devons afficher nos résultats en ordre chronologique inverse, j'ai décidé de produire une nouvelle date (réalisée avec l'opérateur new et la méthode intégrée de JavaScript _Date qui crée une nouvelle instance formatée indépendante de la plateforme d'une date. Maintenant, comme a et b_ représentent nos objets situés à l'intérieur de nos indices de tableau, nous pouvons accéder aux paires clé/valeur contenues dans ces objets. Ainsi, nous soustrayons _b.publishedat de _a.publishedat et cela devrait nous donner nos dates en ordre chronologique inverse.

    Affichage des fruits de notre travail

    Vous vous souvenez de la variable output que nous avons définie à null tout en haut de notre programme ? Eh bien, c'est maintenant son heure de gloire !

    code javascript montrant une variable de sortie en train de changer Cette variable de sortie mérite maintenant son salaire !

    Plusieurs choses se passent ici. Tout d'abord, nous définissons notre variable output à une nouvelle valeur en mappant sur notre variable dataCopy en utilisant la méthode _map_. Cette méthode retourne un nouveau tableau avec les résultats de l'appel de la fonction fournie une fois pour chaque indice. Le paramètre item représente nos objets à l'intérieur de notre tableau qui a été retourné depuis l'endpoint et a donc accès à toutes leurs propriétés telles que title et _publishedat.

    Nous retournons deux éléments de liste avec un à l'intérieur de chacun (à des fins de style), ainsi qu'une chaîne pour les en-têtes Titre et Date de publication. À l'intérieur de ceux-ci, nous avons nos variables qui utilisent des littéraux de gabarit pour définir le titre et la date pour chaque post.

    Ensuite, nous définissons le innerHTML de notre variable list égal à celui de notre variable output.

    Enfin, nous avons l'accolade de fermeture et la gestion des erreurs de notre bloc try...catch ainsi que notre appel de fonction :

    code javascript montrant la gestion des erreurs pour une requête fetch Ce code gérera toute erreur et les affichera dans la console

    Code final

    Voici à quoi ressemble notre code complet maintenant :

    code javascript L'intégralité de notre base de code

    Et voici notre style CSS de base :

    code css montrant le style de base d'un élément Ai-je dit style de base ? Je voulais dire basique :D

    Et voici le résultat de notre travail avec son style très basique :

    une liste de posts en ordre chronologique inverse N'est-ce pas magnifique ?

    Comme vous pouvez le voir, nous avons accompli ce que nous nous étions fixé et en fait, la liste est en ordre chronologique inverse. Hourra !

    J'espère que vous avez apprécié cette visite guidée de mon processus de réflexion et de la façon dont j'ai résolu ce défi. Bien sûr, il existe de nombreuses façons de compléter cela, alors n'hésitez pas à partager les vôtres avec moi ! Je suis ravi de continuer cette série et publierai un autre article après avoir traversé un autre défi !

    De plus, je publie la plupart de mes articles sur de grandes plateformes comme Dev.to et Medium, donc vous pouvez aussi trouver mon travail là-bas. Cet article a été initialement publié sur mon blog le 27 mai 2019.

    Pendant que vous êtes ici, pourquoi ne pas vous inscrire à ma Newsletter. Je promets de ne jamais spammer votre boîte de réception et vos informations ne seront pas partagées avec qui que ce soit/site. J'aime occasionnellement envoyer des ressources intéressantes que je trouve, des articles sur le développement web et une liste de mes nouveaux posts.

    Passez une journée formidable remplie d'amour, de joie et de codage !