5 typických úloh na pohovorech v JavaScriptu: rozbor a řešení

5 typických úloh na pohovorech v JavaScriptu: rozbor a řešení

Od překladatele: publikovali jsme pro vás článek Marie Perna, který pojednává o typických úlohách v JavaScriptu, které jsou nejčastěji nabízeny uchazečům o vývojářské pozice během pohovorů. Článek bude užitečný, zejména pro začínající programátory.

Pohovory v technologických společnostech se staly legendou. Není se čemu divit – úspěšné absolvování pohovoru otevírá dveře k dobré práci. Ale není to tak jednoduché, protože často je třeba řešit složité úkoly.

A většina z těchto úkolů často nemá nic společného s prací, kterou bude uchazeč vykonávat, ale je nutné je vyřešit. Někdy je třeba to dělat na tabuli, bez pomoci Google nebo jakéhokoli jiného zdroje. Ano, situace se postupně mění a v některých firmách od těchto pohovorů upouštějí, ale mnoho zaměstnavatelů stále dodržuje tuto tradici. Tento článek je věnován analýze typických úloh v JavaScriptu, které jsou často používány jako úkoly pro uchazeče.

Připomínáme: pro všechny čtenáře "Habra" – sleva 10 000 korun při registraci na jakýkoli kurz Skillbox s promokódem "Habr".

Skillbox doporučuje: Praktický kurz "Mobilní vývojář PRO".

Hlavní věc – důkladná příprava na váš pohovor

Ano, než začneme analyzovat úkoly, podívejme se na obecné rady pro přípravu na pohovor.

Nejdůležitější je připravit se předem. Zkontrolujte, jak dobře si pamatujete algoritmy a datové struktury, a zlepšete si znalosti v oblastech, které vám nejsou příliš dobře známé. Existuje mnoho online platforem, které pomohou s přípravou na pohovory. Doporučujeme GeeksforGeeks, Pramp, Interviewing.io a CodeSignal.

Je dobré se naučit mluvit o řešení nahlas. Je dobré uchazečům popisovat, co děláte, místo abyste jen psali na tabuli (nebo psali kód na počítači, také potichu). Takto, pokud uděláte chybu v kódu, ale postup řešení bude obecně správný, můžete zvýšit své šance na úspěch.

Úkol je třeba si promyslet, než se pustíte do řešení. V některých případech můžete povrchně pochopit úkol a pak jít špatnou cestou. Možná stojí za to položit několik objasňujících dotazů tazateli.

Je třeba si natrénovat psaní kódu ručně, nikoli na PC. Někdy při pohovorech dostává uchazeč fixu a tabuli, kde nejsou žádné nápovědy ani automatické formátování. Při hledání řešení je dobré si napsat kód na papír nebo rovnou na tabuli. Pokud si všechno necháte jen v hlavě, můžete zapomenout na něco důležitého.

Šablonové úkoly na JavaScript

Některé z těchto úkolů vám pravděpodobně už jsou známé. Buď jste absolvovali pohovory, kde bylo nutné řešit něco podobného, nebo jste se na nich praktikovali během studia JavaScriptu. A nyní nastal čas je vyřešit znovu, a to s podrobným vysvětlením procesu.

Palindrom

Palindrom je slovo, věta nebo sekvence znaků, která se čte úplně stejně jak v běžném směru, tak i zpět. Například „Anna“ je palindrom, zatímco „table“ a „John“ nejsou.

Zadání

Je dána řetězec; je třeba napsat funkci, která vrátí hodnotu true, pokud je řetězec palindrom, a false, pokud není. Přitom je třeba brát v úvahu mezery a interpukční znaménka.

palindrome(‘racecar’) === true
palindrome(‘table’) === false

Analyzujeme úkol

Hlavní myšlenkou zde je převrátit řetězec naopak. Pokud je „obrácený“ řetězec zcela identický s původním, znamená to, že jsme dostali palindrom a funkce by měla vrátit hodnotu true. Pokud ne, pak false.

Řešení

Zde je kód, který umožňuje řešit palindrom.

const palindrome = str => {
  // převést řetězec na malé písmena
  str = str.toLowerCase()
  // převrátit vstupní řetězec a vrátit výsledek
  // porovnání
  return str === str.split('').reverse().join('')
}

První krok je převést znaky vstupního řetězce na malá písmena. To zaručuje, že program bude porovnávat právě znaky, nikoli jejich velkost nebo něco jiného.

Druhý krok je obrátit řetězec. To není těžké: je třeba ho převést na pole pomocí metody .split() (knihovna String). Poté obrátíme pole pomocí .reverse() (knihovna Array). Posledním krokem je převést obrácené pole zpět na řetězec pomocí .join() (knihovna Array).

Nyní stačí porovnat „obrácený“ řetězec s původním a vrátit výsledek true nebo false.

FizzBuzz

Jeden z nejpopulárnějších úkolů na pohovorech.

Zadání

Je třeba napsat funkci, která na konzoli vypíše čísla od 1 do n, přičemž n je celé číslo, které funkce přijímá jako parametr, s následujícími podmínkami:

  • vypíše fizz místo čísel dělitelných 3;
  • vypíše buzz místo čísel dělitelných 5;
  • vypíše fizzbuzz místo čísel dělitelných jak 3, tak 5.

Příklad

Fizzbuzz(5)

Výsledek

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

Analyzujeme úkol

Hlavní věcí zde je způsob hledání dělitelných čísel pomocí JavaScriptu. Tento úkol lze realizovat pomocí modulačního operátoru nebo operátoru zbytku — %, který ukazuje zbytek dělení dvou čísel. Pokud je zbytek 0, znamená to, že první číslo je dělitelné druhým.

12 % 5 // 2 -> 12 není dělitelné 5
12 % 3 // 0 -> 12 je dělitelné 3

Pokud tedy dělíme 12 5, dostaneme 2 se zbytkem 2. Pokud dělíme 12 3, dostaneme 4 se zbytkem 0. V prvním případě 12 není dělitelné 5, ve druhém 12 je dělitelné 3.

Řešení

Optimálním řešením bude následující kód:

const fizzBuzz = num => {
  for(let i = 1; i <= num; i++) {
    // zkontroluj, jestli je číslo dělitelné 3 a 5
    if(i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } // zkontroluj, jestli je číslo dělitelné 3
      else if(i % 3 === 0) {
      console.log('fizz')
    } // zkontroluj, jestli je číslo dělitelné 5
      else if(i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i)
    }
  }
}

Funkce provádí potřebné kontroly pomocí podmínkových operátorů a vrací výsledek podle potřeby uživatele. V úkolu je třeba věnovat pozornost pořadí operátorů if…else: začít s dvojitou podmínkou (&&) a skončit případem, kdy se nenašly dělitelné čísla. V důsledku toho pokrýváme všechny možnosti.

Anagram

Tak se nazývá slovo, které obsahuje všechna písmena jiného slova ve stejném počtu, ale v jiném pořadí.

Zadání

Je třeba napsat funkci, která zkontroluje, zda jsou dvě řetězce anagramy, přičemž se nezohledňuje velikost písmen. Zohledňují se pouze znaky; mezery nebo interpunkční znaménka se nepočítají.

anagram(‘finder’, ‘Friend’) -> true
anagram(‘hello’, ‘bye’) -> false

Analyzujeme úkol

Je důležité mít na paměti, že je třeba zkontrolovat každé písmeno v obou vstupech řetězcích a jejich počet v každém řetězci.

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

Pro ukládání dat anagramu je nejlepší zvolit strukturu jako objektový literál JavaScriptu. Klíč v tomto případě je symbol písmene, hodnota — počet jeho výskytů v aktuálním řetězci.

Existují i další podmínky:

  • Je třeba zajistit, aby se při porovnávání nezohledňovalo rozlišování velkých a malých písmen. Jednoduše převedeme oba řetězce na malé nebo velké písmeno.
  • Z porovnání vyloučíme všechny nesymboly. Nejlépe se pracuje s regulárními výrazy.

Řešení

// 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
}

Všimněte si použití Object.keys() v předchozím úryvku. Tato metoda vrací pole, které obsahuje názvy nebo klíče ve stejném pořadí, v jakém se v objektu objevují. V tomto případě bude pole následující:

[‘f’, ‘i’, ‘n’, ‘d’, ‘e’, ‘r’]

Tímto způsobem získáváme vlastnosti objektu, aniž bychom museli vykonávat objemnou smyčku. V úloze můžeme použít tento způsob s vlastností .length — pro kontrolu, zda mají oba řetězce stejný počet znaků — což je důležitá vlastnost anagramů.

Hledání samohlásek

Poměrně jednoduchý úkol, který se často objevuje na pohovorech.

Zadání

Je třeba napsat funkci, která přijme jako argument řetězec a vrátí počet samohlásek obsažených v řetězci.
Samohláskami jsou „a“, „e“, „i“, „o“, „u“.

Příklad:

findVowels(‘hello’) // —> 2
findVowels(‘why’) // —> 0

Řešení

Toto je nejjednodušší varianta:

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
}

Je důležité věnovat pozornost použití metody .includes(). Ta je k dispozici jak pro řetězce, tak pro pole. Je dobré ji používat k určení, zda pole obsahuje určitou hodnotu. Tato metoda vrací true, pokud pole obsahuje zadanou hodnotu, a false, pokud ne.

Existuje i stručnější řešení problému:

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

Zde se používá metoda .match(), která umožňuje efektivní hledání. Pokud je regulární výraz jako argument metody nalezen uvnitř zadaného řetězce, vracenou hodnotou je pole shodných symbolů. Pokud shody nejsou, .match() vrací null.

Fibonacci

Klasický úkol, který se může objevit na pohovorech různého úrovně. Je dobré připomenout, že Fibonacciho posloupnost je řada čísel, kde každé následující je součtem dvou předchozích. Takže prvních deset čísel vypadá takto: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Zadání

Musíte napsat funkci, která vrátí n-tou položku v určité sekvenci, přičemž n je číslo předávané jako argument funkce.

fibonacci(3) // -> 2

Tento úkol zahrnuje iteraci tolikrát, kolik je uvedeno v argumentu, a vrací hodnotu na odpovídající pozici. Tento způsob nastavení úkolu vyžaduje použití cyklů. Pokud namísto toho použijete rekurzi, může se to líbit tazateli a přidat vám pár dalších bodů.

Řešení

const fibonacci = num => {
  // uložte Fibonacciho sekvenci, kterou chcete
  // generovat do pole a
  // inicializujte pole prvními dvěma
  // čísly sekvence
  const result = [0, 1]

  for(let i = 2; i <= num; i++) {
    // vložte součet dvou čísel
    // předcházejících pozici i v poli result
    // na konec pole result
    const prevNum1 = result[i - 1]
    const prevNum2 = result[i - 2]
    result.push(prevNum1 + prevNum2)
  }
  // vraťte poslední hodnotu v poli result
  return result[num]
}

V poli výsledků jsou první dvě čísla uložena v řadě, protože každá položka v sekvenci se skládá ze součtu dvou předchozích čísel. Na začátku není k dispozici žádné číslo pro získání dalšího čísla, takže cyklus je nemůže automaticky vygenerovat. Ale jak víme, první dvě čísla jsou vždy 0 a 1. Proto je možné ručně inicializovat pole výsledků.

Pokud jde o rekurzi, zde je to jednodušší a složitější zároveň:

const fibonacci = num => {
  // pokud je num buď 0 nebo 1, vrátí num
  if(num < 2) {
    return num
  }
  // rekurze zde
  return fibonacci(num - 1) + fibonacci(num - 2)
}

Pokračujeme v volání fibonacci(), předáváme stále menší čísla jako argumenty. Přestaneme, když je předaný argument 0 nebo 1.

Výstup

Pravděpodobně jste se již setkali s některým z uvedených úkolů, pokud jste absolvovali pohovory na pozici frontendového nebo JavaScriptového vývojáře (zejména pokud je to úroveň junior). Ale pokud se vám nedostaly do rukou, mohou se hodit v budoucnu — minimálně pro obecný rozvoj.

Skillbox doporučuje:

Zdroj: habr.com

Koupit spolehlivý hosting pro webové stránky s ochranou proti DDoS, VPS VDS servery 🔥 Koupit spolehlivý hosting pro webové stránky s ochranou proti DDoS, VPS VDS servery | ProHoster