5 tareas típicas para las entrevistas de JavaScript: análisis y soluciones

De un traductor: publicaron un artículo de Maria Perna (Maria Antonietta Perna), que habla sobre las tareas típicas en JavaScript , que se ofrecen con mayor frecuencia a los buscadores de empleo-desarrolladores en las entrevistas. El artículo será útil principalmente para programadores novatos. A continuación se presentan ejemplos de resolución de problemas, si le parece que no son demasiado buenos y hay una mejor opción: sugiera una alternativa en los comentarios.

Las entrevistas en empresas tecnológicas han sido durante mucho tiempo sinónimo. Esto no debe sorprenderse: una entrevista exitosa le brinda la oportunidad de conseguir un buen trabajo. Pero esto no es tan simple, ya que a menudo es necesario resolver problemas complejos.

Y la mayoría de las veces, la mayoría de estas tareas no están relacionadas con el trabajo que realizará el solicitante, pero aún deben resolverse. A veces tienes que hacerlo en la pizarra, sin consultar con Google ni con ninguna otra fuente. Sí, la situación está cambiando gradualmente, y algunas compañías rechazan tales entrevistas, pero muchos empleadores aún se adhieren a esta tradición. Este artículo está dedicado al análisis de tareas típicas de JavaScript, que a menudo se utilizan como tareas para los solicitantes.

Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".

Skillbox recomienda: Curso práctico "Mobile Developer PRO" .

Lo principal es una preparación cuidadosa para su entrevista.

Sí, antes de comenzar a desmontar las tareas, veamos consejos generales para prepararse para una entrevista.

Lo principal es prepararse con anticipación. Compruebe qué tan bien recuerda los algoritmos y las estructuras de datos, y obtenga conocimiento en áreas con las que no está demasiado familiarizado. Hay muchas plataformas en línea que ayudan a prepararse para las entrevistas. Recomendamos GeeksforGeeks , Pramp , Interviewing.io y CodeSignal .

Vale la pena aprender a pronunciar la decisión en voz alta. Es aconsejable decirle a los solicitantes lo que está haciendo, y no solo escribir en la pizarra (o escribir el código en la computadora, también en silencio). Por lo tanto, si comete un error en el código, pero la decisión será generalmente correcta, puede aumentar sus posibilidades de éxito.

El problema debe ser comprendido antes de proceder con la solución. En algunos casos, puede comprender superficialmente la tarea y luego ir por el camino equivocado. Puede valer la pena hacerle algunas preguntas aclaratorias al entrevistador.

Necesita practicar escribir código manualmente, no en una PC. Sucede que durante las entrevistas al solicitante se le da un marcador y un tablero donde no hay consejos o formateo automático. Cuando busque una solución, escriba su código en una hoja de papel o directamente en la pizarra. Si tiene todo en mente, puede olvidar algo importante.

Tareas de plantilla de JavaScript

Probablemente algunas de estas tareas ya te son familiares. O pasaste por entrevistas en las que tenías que resolver algo similar, o practicaste en ellas mientras aprendías JavaScript. Bueno, ahora es el momento de resolverlos nuevamente, con una explicación detallada del proceso.

Palindrome

Un palíndromo es una palabra, oración o secuencia de caracteres que se pueden leer exactamente igual, tanto en la dirección habitual como en el opuesto. Por ejemplo, "Anna" es un palíndromo, pero "mesa" y "John" no lo son.

Puesta en escena

Dada una cuerda; necesita escribir una función que le permita devolver verdadero si la cadena es un palíndromo, y falso si no. En este caso, debe tener en cuenta los espacios y los signos de puntuación.

palindrome ('coche de carreras') === verdadero
palíndromo ('tabla') === falso

Desmontamos la tarea

La idea principal aquí es voltear la línea en la dirección opuesta. Si la línea "inversa" es completamente idéntica a la original, entonces tenemos un palíndromo y la función debería ser verdadera. Si no, falso.

Solución

Aquí está el código que resuelve el palíndromo.

const palindrome = str => { // turn the string to lowercase str = str.toLowerCase() // reverse input string and return the result of the // comparisong return str === str.split('').reverse().join('') } 

El primer paso es convertir los caracteres de la cadena de entrada a minúsculas. Esta es una garantía de que el programa comparará exactamente los propios personajes, y no el caso ni ninguna otra cosa.

El segundo paso es invertir la línea. Esto es fácil de hacer: debe convertirlo en una matriz utilizando el método .split () (biblioteca de cadenas). Luego volteamos la matriz usando .reverse () (biblioteca de matrices). El último paso es convertir la matriz inversa en una cadena usando .join () (biblioteca de matrices).

Ahora todo lo que se necesita es comparar la cadena "inversa" con el original, devolviendo el resultado verdadero o falso.

Fizzbuzz

Una de las tareas de entrevista más populares.

Puesta en escena

Se requiere escribir una función que muestre números del 1 al n en la consola, donde n es un número entero que la función toma como parámetro, con las siguientes condiciones:

• salida de efervescencia en lugar de múltiplos de 3;
• salida de zumbido en lugar de múltiplos de 5;
• salida de fizzbuzz en lugar de números que son múltiplos de 3 y 5.

Ejemplo

Fizzbuzz (5)

Resultado

// 1
// 2
// fizz
// 4
// zumbido

Desmontamos la tarea

Lo principal aquí es la forma de buscar múltiples números usando JavaScript. Se puede implementar utilizando el operador del módulo o el resto -%, que le permite mostrar el resto al dividir dos números. Si el resto es 0, esto significa que el primer número es un múltiplo del segundo.

12% 5 // 2 -> 12 no es múltiplo de 5
12% 3 // 0 -> 12 es múltiplo de 3

Entonces, si dividimos 12 por 5, obtenemos 2 con el resto 2. Si dividimos 12 por 3, obtenemos 4 con el resto 0. En el primer caso, 12 no es múltiplo de 5, en el segundo - 12 es múltiplo de 3.

Solución

La mejor solución sería el siguiente código:

 const fizzBuzz = num => { for(let i = 1; i <= num; i++) { // check if the number is a multiple of 3 and 5 if(i % 3 === 0 && i % 5 === 0) { console.log('fizzbuzz') } // check if the number is a multiple of 3 else if(i % 3 === 0) { console.log('fizz') } // check if the number is a multiple of 5 else if(i % 5 === 0) { console.log('buzz') } else { console.log(i) } } } 

La función realiza las comprobaciones necesarias utilizando sentencias condicionales y produce el resultado que el usuario necesita. La tarea debe prestar atención al orden de las declaraciones if ... else: comience con una condición doble (&&) y termine con el caso cuando no se pueden encontrar varios números. Como resultado, cubrimos todas las opciones.

Anagrama

Este es el nombre de una palabra que contiene todas las letras de otra palabra en la misma cantidad, pero en un orden diferente.

Puesta en escena

Necesita escribir una función que verifique si dos líneas son anagramas, y el caso de las letras no importa. Solo se tienen en cuenta los personajes; los espacios o la puntuación no se tienen en cuenta.

anagrama ('buscador', 'amigo') -> verdadero
anagrama ('hola', 'adiós') -> falso

Desmontamos la tarea

Es importante tener en cuenta que es necesario verificar cada letra en dos líneas de entrada y su número en cada línea.

buscador -> f: 1 amigo -> f: 1
i: 1 r: 1
n: 1 i: 1
d: 1 e: 1
e: 1 n: 1
r: 1 d: 1

Para almacenar datos de anagramas, debe elegir una estructura como un literal de objeto JavaScript. La clave en este caso es el símbolo de la letra, el valor es el número de repeticiones en la línea actual.

Hay otras condiciones:

• Debe asegurarse de que el caso de las letras no se tenga en cuenta al comparar. Simplemente convierta ambas cadenas a minúsculas o mayúsculas.
• Excluimos de la comparación todos los no caracteres. Es mejor trabajar con expresiones regulares .

Solución

 // helper function that builds the // object to store the data const buildCharObject = str => { const charObj = {} for(let char of str.replace(/[^\w]/g).toLowerCase()) { // if the object has already a key value pair // equal to the value being looped over, // increase the value by 1, otherwise add // the letter being looped over as key and 1 as its value charObj[char] = charObj[char] + 1 || 1 } return charObj } // main function const anagram = (strA, strB) => { // build the object that holds strA data const aCharObject = buildCharObject(strA) // build the object that holds strB data const bCharObject = buildCharObject(strB) // compare number of keys in the two objects // (anagrams must have the same number of letters) if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) { return false } // if both objects have the same number of keys // we can be sure that at least both strings // have the same number of characters // now we can compare the two objects to see if both // have the same letters in the same amount for(let char in aCharObject) { if(aCharObject[char] !== bCharObject[char]) { return false } } // if both the above checks succeed, // you have an anagram: return true return true } 

Tenga en cuenta el uso de Object.keys () en el fragmento de arriba. Este método devuelve una matriz que contiene los nombres o claves en el mismo orden en que aparecen en el objeto. En este caso, la matriz será así:

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

Por lo tanto, obtenemos las propiedades del objeto sin la necesidad de realizar un ciclo de volumen. En la tarea, puede usar este método con la propiedad .length, para verificar si hay el mismo número de caracteres en ambas líneas, esta es una característica importante de los anagramas.

Búsqueda de vocales

Una tarea bastante simple que a menudo aparece en las entrevistas.

Puesta en escena

Necesita escribir una función que tome una cadena como argumento y devuelva el número de vocales contenidas en la cadena.
Las vocales son "a", "e", "i", "o", "u".

Un ejemplo:

findVowels ('hola') // -> 2
findVowels ('why') // -> 0

Solución

Aquí está la opción más fácil:

 const findVowels = str => { let count = 0 const vowels = ['a', 'e', 'i', 'o', 'u'] for(let char of str.toLowerCase()) { if(vowels.includes(char)) { count++ } } return count } 

Es importante prestar atención al uso del método .includes (). Está disponible para cadenas y matrices. Debe usarse para determinar si una matriz contiene un valor específico. Este método devuelve verdadero si la matriz contiene el valor especificado y falso si no.

Hay una solución más concisa al problema:

 const findVowels = str => { const matched = str.match(/[aeiou]/gi) return matched ? matches.length : 0 } 

Esto implica el método .match (), que le permite implementar una búsqueda eficiente. Si la expresión regular como argumento del método se encuentra dentro de la cadena especificada, la matriz de caracteres coincidentes se convierte en el valor devuelto. Bueno, si no hay coincidencias, .match () devuelve nulo.

Fibonacci

Una tarea clásica que se puede encontrar en entrevistas de varios niveles. Vale la pena recordar que la secuencia de Fibonacci es una serie de números, donde cada subsecuente es la suma de los dos anteriores. Entonces, los primeros diez números son los siguientes: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Puesta en escena

Necesitamos escribir una función que devuelva el enésimo registro en una secuencia determinada, y n es el número que se pasa como argumento a la función.

Fibonacci (3) // -> 2

Esta tarea implica hacer un bucle tantas veces como se especifica en el argumento, devolviendo el valor en la posición adecuada. Este método de enunciado del problema requiere el uso de ciclos. Si utiliza la recursividad, al entrevistador le puede gustar y darle algunos puntos extra.

Solución

 const fibonacci = num => { // store the Fibonacci sequence you're going // to generate inside an array and // initialize the array with the first two // numbers of the sequence const result = [0, 1] for(let i = 2; i <= num; i++) { // push the sum of the two numbers // preceding the position of i in the result array // at the end of the result array const prevNum1 = result[i - 1] const prevNum2 = result[i - 2] result.push(prevNum1 + prevNum2) } // return the last value in the result array return result[num] } 

En la matriz de resultados, los dos primeros números están contenidos en una fila, ya que cada registro en la secuencia consiste en la suma de los dos números anteriores. Al principio, no hay dos números que pueda tomar para obtener el siguiente número, por lo que el ciclo no puede generarlos en modo automático. Pero, como sabemos, los dos primeros números son siempre 0 y 1. Por lo tanto, puede inicializar una matriz de resultados manualmente.

En cuanto a la recursividad, todo aquí es más simple y más complicado al mismo tiempo:

 const fibonacci = num => { // if num is either 0 or 1 return num if(num < 2) { return num } // recursion here return fibonacci(num - 1) + fibonacci(num - 2) } 

Seguimos llamando a fibonacci (), pasando números cada vez más pequeños como argumentos. Nos detenemos cuando el argumento pasado es 0 o 1.

Conclusión

Lo más probable es que ya haya encontrado alguna de estas tareas si fue entrevistado para el trabajo del desarrollador frontend o JavaScript (especialmente si este es el nivel junior). Pero si no se encontraron contigo, pueden ser útiles en el futuro, al menos para el desarrollo general.

Skillbox recomienda:

• Curso en línea de Python Data Analyst aplicado.
  
• Curso en línea "Profesión frontend-desarrollador" .
• Curso práctico anual "Desarrollador PHP de 0 a PRO" .