Fermer

février 5, 2019

Comment vaincre 5 défis communs liés aux entretiens JavaScript –


La manière dont les entretiens techniques sont menés est depuis longtemps au centre de nombreuses controverses. C'est un sujet sensible, en particulier en ce qui concerne les problèmes de codage.

Toutes les entreprises n'utilisent pas le même processus de filtrage, mais s'attendent généralement à devoir résoudre un problème de codage, que ce soit sur une plate-forme appropriée ou redoutée. tableau blanc.

Une des plaintes généralement formulées contre les problèmes de codage est qu’ils ne sont généralement pas pertinents pour les tâches quotidiennes qu’exige le travail réel. Surtout quand il s’agit de questions d’interview frontale, il est parfois curieux de savoir ce qui manque à l’interview, ce ne sont que des questions d’ordre primaire sur la compatibilité des navigateurs, les méthodes de disposition et les événements DOM. Bien que cela puisse être vrai, ceux qui sont favorables à cette approche et qui sont responsables de l'embauche dans ces entreprises disent souvent ceci:

Je préférerais embaucher une personne intelligente et lui apprendre à X que d'embaucher quelqu'un qui connaît tout ce qui concerne X mais qui manque créativité, logique et raisonnement. – Entretien en tant qu'ingénieur front-end à San Francisco

Quoi que nous pensions de la manière dont les candidats sont sélectionnés pour des postes de développeur, au moment de la rédaction du présent article, les problèmes de codage occupaient toujours une grande place dans le processus d'entrevue. [19659003] Dans cet article, je vais vous montrer comment vous pouvez relever cinq défis communs en matière de codage, qui pourraient vous être demandés lors d’une interview pour un poste en JavaScript ou front-end Junior Developer. Ils ne font pas partie des processus les plus difficiles que vous puissiez rencontrer au cours d’un processus d’entrevue, mais leur approche pourrait faire toute la différence entre succès et échec.

Pointeurs sur la résolution des problèmes de codage pour votre entretien technique

Avant Pour vous plonger dans les défis, voyons quelques astuces pour aborder votre entretien technique.

  • Prévoyez du temps pour préparer . Faites de votre priorité la recherche, apprenez des sujets moins familiers et pratiquez beaucoup. Si vous n’avez pas de formation en informatique, assurez-vous de vous familiariser avec certains sujets fondamentaux liés aux algorithmes et aux structures de données . Il existe des plateformes en ligne, gratuites et payantes, qui offrent d'excellents moyens de mettre en pratique vos compétences en matière d'entrevue. GeeksforGeeks Pramp Interviewing.io et CodeSignal ne sont que quelques-unes de mes ressources préférées.
  • lorsque vous essayez de trouver une solution. En fait, il est préférable de parler de votre processus de pensée dans une interview plutôt que de passer tout le temps disponible à écrire votre solution en silence. Vos mots donneront à l’intervieweur une chance de vous aider si vous êtes sur le point de vous tromper. Il met également en évidence vos compétences en communication.
  • Comprenez le problème avant de commencer à coder . C'est important. Sinon, vous perdrez peut-être votre temps à réfléchir au mauvais problème. De plus, cela vous oblige à réfléchir aux questions que vous pourriez poser à l'intervieweur, telles que les observations de bord, le type de données des entrées / sorties, etc.
  • Entraînez-vous à l'écriture de code à la main . Cela vous aide à vous familiariser avec le scénario de tableau blanc. Un tableau blanc ne fournit pas le type d’aide fourni par votre éditeur de code – tels que les raccourcis, la complétion automatique, le formatage, etc. Lors de la préparation, essayez d’écrire votre code sur un morceau de papier ou sur un tableau blanc au lieu de tout penser dans votre tête.

Défis communs du codage JavaScript

Il est probable que vous ayez rencontré un ou plusieurs des Les défis que j'ai énumérés ci-dessous, que ce soit lors d'un entretien d'embauche ou en pratiquant vos compétences en JavaScript Quelle meilleure raison y a-t-il de vraiment bien les résoudre?

On craque!

# 1 Palindrome

Un palindrome est un mot, une phrase ou un autre type de séquence de caractères qui se lit en arrière comme avant. Par exemple, “voiture de course” et “Anna” sont des palindromes. “Table” et “John” ne sont pas des palindromes, car ils ne lisent pas la même chose de gauche à droite et de droite à gauche.

Comprendre le défi

On peut poser le problème de la manière suivante: vu une chaîne, renvoie true si la chaîne est un palindrome et false si ce n'est pas le cas. Incluez des espaces et des signes de ponctuation pour déterminer si la chaîne est un palindrome. Par exemple:

 palindrome ('racecar') === true
palindrome ('table') === false

Raisonner sur le défi

Ce défi tourne autour de l'idée d'inverser une chaîne. Si la chaîne inversée est identique à la chaîne d'entrée d'origine, vous avez un palindrome et votre fonction doit renvoyer true. Inversement, si la chaîne inversée n'est pas identique à la chaîne d'entrée d'origine, cette dernière n'est pas un palindrome et votre fonction doit renvoyer une valeur fausse.

Solution

Voici une solution pour résoudre le problème des palindromes: 19659020] const palindrome = str => {
  // tourne la chaîne en minuscule
  str = str.toLowerCase ()
  // retourne la chaîne d'entrée et renvoie le résultat du
  // comparisong
  retourne str === str.split (''). reverse (). join ('')
}

Commencez par transformer votre chaîne de saisie en lettres minuscules. Puisque vous savez que vous allez comparer chaque caractère de cette chaîne à chaque caractère correspondant de la chaîne inversée, le fait d’avoir tous les caractères en majuscules ou en minuscules garantira que la comparaison laissera de côté cet aspect des caractères et se concentrera uniquement sur les caractères eux-mêmes.

Ensuite, inversez la chaîne de saisie. Vous pouvez le faire en transformant la chaîne en un tableau à l'aide de la méthode .split () de String, puis en appliquant la méthode .reverse () de Array, puis en retournant le tableau inversé en une chaîne avec la méthode .join () de Array. J'ai chaîné toutes les méthodes ci-dessus pour que le code paraisse plus propre.

Enfin, comparez la chaîne inversée avec l'entrée d'origine et renvoyez le résultat – ce qui sera vrai ou faux, selon que les deux sont exactement identiques ou non.

# 2 FizzBuzz

Il s'agit d'un défi de codage extrêmement populaire – la seule question que je ne pouvais pas laisser de côté. Voici comment vous pouvez énoncer le problème.

Comprendre le défi

Le défi de FizzBuzz est un peu comme ça. Ecrivez une fonction faisant ce qui suit:

  • la console enregistre les nombres de 1 à n, où n est le nombre entier pris par la fonction comme paramètre
  • enregistre fizz au lieu du nombre correspondant à des multiples de 3
  • logs buzz au lieu du nombre de multiples de 5
  • logs fizzbuzz pour les nombres multiples de 3 et 5

Exemple:

 fizzBuzz ( 5)

Résultat:

 // 1
// 2
// fizz
// 4
// buzz

Raisonnement sur le défi

Un point important à propos de FizzBuzz concerne la façon dont vous pouvez trouver des multiples d'un nombre en JavaScript. Pour ce faire, utilisez l'opérateur modulo ou reste qui ressemble à ceci: % . Cet opérateur renvoie le reste après une division entre deux nombres. Un reste de 0 indique que le premier nombre est un multiple du deuxième nombre:

 12% 5 // 2 -> 12 n'est pas un multiple de 5
12% 3 // 0 -> 12 est multiple de 3

Si vous divisez 12 par 5, le résultat est 2 avec un reste de 2. Si vous divisez 12 par 3, le résultat est 4 avec un reste de 0. Dans le premier exemple, 12 n'est pas un multiple de 5, alors que dans le deuxième exemple, 12 est un multiple de 3.

Avec cette information, craquer FizzBuzz consiste à utiliser la logique conditionnelle appropriée qui conduira à l'impression du résultat attendu.

Solution

Voici une solution. vous pouvez essayer le défi FizzBuzz:

 const fizzBuzz = num => {
  pour (soit i = 1; i <= num; i ++) {
    // vérifie si le nombre est un multiple de 3 et 5
    if (i% 3 === 0 && i% 5 === 0) {
      console.log ('fizzbuzz')
    } // vérifie si le nombre est un multiple de 3
      sinon si (i% 3 === 0) {
      console.log ('fizz')
    } // vérifie si le nombre est un multiple de 5
      sinon si (i% 5 === 0) {
      console.log ('buzz')
    } autre {
      console.log (num)
    }
  }
}

La fonction ci-dessus effectue simplement les tests requis à l'aide d'instructions conditionnelles et déconnecte la sortie attendue. Ce que vous devez faire attention dans ce défi est l'ordre des déclarations if… else . Commencez d'abord par la condition double ( && ) et terminez par le cas où aucun multiple n'est trouvé. De cette manière, vous pourrez couvrir toutes les bases.

# 3 Anagram

Un mot est l'anagramme d'un autre mot si les deux lettres utilisent les mêmes lettres dans la même quantité, mais disposées différemment.

challenge

Vous pouvez énoncer ce défi de la manière suivante: écrivez une fonction qui vérifie si deux chaînes fournies sont des anagrammes l'une de l'autre; la casse des lettres ne devrait pas avoir d'importance En outre, ne considérez que les caractères, pas les espaces ni la ponctuation. Par exemple:

 anagram ('finder', 'Friend') -> true
anagramme ('bonjour', 'bye') -> faux

Raisonnement sur le défi

La première chose à noter est que vous devez comparer chaque lettre dans les deux chaînes d'entrée, non seulement en termes de lettres, mais également en nombre. les deux cordes. Une façon de cartographier ces informations ressemblerait à quelque chose comme ceci:

 finder -> f: 1 ami -> f: 1
           i: 1 r: 1
           n: 1 i: 1
           d: 1 e: 1
           e: 1 n: 1
           r: 1 d: 1

Une structure de données appropriée pour contenir les données d'anagramme serait un littéral d'objet JavaScript: la clé est le caractère de lettre et la valeur est le nombre de fois que cette lettre est contenue dans la chaîne donnée.

Ensuite, faites attention à ces cas extrêmes:

  • s’assurent que la casse des lettres n’est pas prise en compte dans la comparaison; il suffit de transformer les deux chaînes en majuscules ou en minuscules
  • en laissant tout ce qui n’est pas un caractère en dehors de la comparaison; Une bonne option consisterait à utiliser une expression régulière .

Solution

Voici comment vous pourriez aborder le défi Anagram:

 // fonction d’aide qui construit le
// objet pour stocker les données
const buildCharObject = str => {
  const charObj = {}
  pour (laissez le caractère de str.replace (/ [^w] / g) .toLowerCase ()) {
    // si l'objet a déjà une paire clé-valeur
    // égal à la valeur en boucle,
    // augmente la valeur de 1, sinon ajoute
    // la lettre en boucle comme clé et 1 comme valeur
    charObj [char] = charObj [char] + 1 || 1
  }
  retourner charObj
}

// fonction principale
const anagram = (strA, strB) => {
  // construit l'objet qui contient les données strA
  const aCharObject = buildCharObject (strA)
  // construit l'objet qui contient les données strB
  const bCharObject = buildCharObject (strB)

  // compare le nombre de clés dans les deux objets
  // (les anagrammes doivent avoir le même nombre de lettres)
  if (Object.keys (aCharObject) .length! == Object.keys (bCharObject) .length) {
    retourne faux
  }
  // si les deux objets ont le même nombre de clés
  // on peut être sûr qu'au moins les deux chaînes
  // avoir le même nombre de caractères
  // Maintenant, nous pouvons comparer les deux objets pour voir si les deux
  // avoir les mêmes lettres du même montant
  for (laissez char dans aCharObject) {
    if (aCharObject [char]! == bCharObject [char]) {
      retourne faux
    }
  }
  // si les deux vérifications ci-dessus réussissent,
  // vous avez un anagramme: return true
  retourne vrai
}

Notez l'utilisation de Object.keys () dans l'extrait de code ci-dessus. Cette méthode retourne un tableau contenant les noms de propriété ou les clés d’un objet donné dans le même ordre qu’ils apparaissent dans l’objet. Dans ce cas, le tableau ressemblerait à ceci:

 ['f', 'i', 'n', 'd', 'r']

C’est un moyen pratique d’obtenir les propriétés d’un objet sans effectuer une boucle encombrante. Dans ce défi, vous pouvez l'utiliser conjointement avec la propriété .length pour vérifier si les deux chaînes ont le même nombre de caractères, ce qui est une caractéristique importante des anagrammes.

# 4 Trouvez les voyelles

] C'est probablement l'un des défis les moins difficiles (sans jeu de mots) – en termes de difficulté – mais cela n'enlève rien au fait que vous pourriez le rencontrer lors d'un entretien d'embauche.

Comprendre le défi

Vous pouvez énoncer le défi des voyelles comme suit: écrivez une fonction qui prend une chaîne comme argument et renvoie le nombre de voyelles contenues dans cette chaîne.

Les voyelles sont “ a »,« e »,« i »,« o »,« u ».

Exemples:

 findVowels ('hello') // -> 2
findVowels ('pourquoi') // -> 0

Solution

Voici une solution simple et itérative au défi Vowels:

 const findVowels = str => {
  laisser compter = 0
  voyelles const = ['a', 'e', 'i', 'o', 'u']
  for (laissez le caractère de str.toLowerCase ()) {
    if (voyelles.includes (char)) {
      compter ++
    }
  }
  compte de retour
}

La seule chose à noter ici est l'utilisation de la méthode .includes () . Cette méthode est disponible à la fois sur les chaînes et les tableaux. Vous pouvez en tirer parti pour déterminer si un tableau contient une certaine valeur. Il renvoie true si le tableau contient la valeur spécifiée et false s’il ne le fait pas.

Il existe également une solution plus succincte à ce défi, que vous pouvez configurer comme suit:

 const findVowels = str => {
  const matched = str.match (/ [aeiou] / gi)
  retour apparié? allumettes.longueur: 0
}

La solution ci-dessus s’articule autour de la méthode .match () de String. Son utilisation en conjonction avec une expression régulière vous permet d'effectuer des recherches puissantes. Si le modèle de l'expression régulière que vous transmettez en tant qu'argument à cette méthode est trouvé dans la chaîne spécifiée, la valeur de retour sera un tableau des caractères correspondants. Si aucune correspondance n'est trouvée, .match () renverra null .

# 5 Fibonacci

Cet article ne pourrait être complet sans une discussion du défi Fibonacci , une question classique que vous rencontrerez sûrement lors d’un entretien d’emploi ou d’une pratique de codage.

Une séquence de Fibonacci est un ordre de nombres où chaque nombre est la somme des deux précédents. Par exemple, les dix premiers chiffres de la séquence de Fibonacci sont: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Comprendre le défi

Le défi de Fibonacci ressemble à peu près à ceci: écrire une fonction qui retourne l'entrée n e dans la suite de Fibonacci, où n est un nombre que vous transmettez en tant qu'argument à la fonction.

Exemple:

 fibonacci (3) // - > 2

Raisonnement sur le défi

Le défi de Fibonacci consiste à itérer sur le nombre de fois indiqué par l'argument de la fonction et à renvoyer l'entrée dans la série de Fibonacci que vous trouvez dans cette position.

Cette façon de formuler le défi immédiatement pointe vers une approche itérative pour résoudre le problème. Vous pouvez également essayer une solution récursive, qui impressionnerait certainement l'intervieweur.

Solution

Voici à quoi pourrait ressembler la solution itérative:

 const fibonacci = num => {
  // stocke la séquence de Fibonacci que vous allez
  // pour générer à l'intérieur d'un tableau et
  // initialise le tableau avec les deux premiers
  // numéros de la séquence
  const result = [0, 1]

  pour (soit i = 2; i <= num; i ++) {
    // pousse la somme des deux nombres
    // précédant la position de i dans le tableau de résultats
    // à la fin du tableau de résultats
    const prevNum1 = résultat [i - 1]
    const prevNum2 = résultat [i - 2]
    result.push (prevNum1 + prevNum2)
  }
  // retourne la dernière valeur du tableau de résultats
  résultat retourné [num]
}

La raison pour laquelle le tableau de résultats ci-dessus contient déjà les deux premiers nombres de la série est parce que chaque entrée de la série de Fibonacci est constituée de la somme des deux nombres précédents. Au tout début de la série, vous ne pouvez pas ajouter deux nombres pour produire le nombre suivant. Il est donc impossible que votre boucle les génère automatiquement. Cependant, comme vous savez que les deux premiers nombres sont toujours 0 et 1, vous initialisez manuellement votre tableau de résultats avec ces deux nombres.

Passons à l’approche récursive:

 const fibonacci = num => {
  // si num est 0 ou 1, retour num
  si (num <2) {
    retourne num
  }
  // récursion ici
  retour fibonacci (num - 1) + fibonacci (num - 2)
}

Vous continuez à appeler fibonacci () en additionnant des nombres de plus en plus petits en tant qu'arguments jusqu'à ce que vous atteigniez le scénario de base en haut, où l'argument transmis est 0 ou 1.

Conclusion

Si vous venez de passer quelques entretiens d'embauche pour un rôle de développeur front-end ou JavaScript, en particulier au niveau junior, vous avez probablement rencontré au moins une ou deux des questions que j'ai énumérées ci-dessus. Même si ce n’est pas le cas, vous pouvez tous les utiliser pour mettre en pratique vos compétences en codage JS.

Pouvez-vous trouver des moyens alternatifs de résoudre les problèmes? Entendons-les!


Maria Antonietta Perna

Maria Antonietta Perna est corédactrice de la chaîne HTML / CSS de SitePoint et développeur Web front-end. Elle aime bricoler avec les normes CSS rigoureuses et est curieuse d’apprendre des approches pédagogiques du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues promenades et la bonne nourriture.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link