5가지 일반적인 JavaScript 면접 과제: 분석 및 솔루션

번역자: 당신을 위한 기사를 게시했습니다 일반적인 JavaScript 작업에 대해 이야기하는 Maria Antonietta Perna, 인터뷰 중에 개발자 지원자에게 가장 자주 제공됩니다. 이 기사는 우선 초보 프로그래머에게 유용할 것입니다.

기술 회사의 인터뷰는 오랫동안 화제가 되어 왔습니다. 이는 놀라운 일이 아닙니다. 성공적으로 인터뷰를 통과하면 좋은 직업을 얻을 수 있는 기회가 제공됩니다. 그러나 복잡한 문제를 해결해야 하는 경우가 많기 때문에 이는 그리 간단하지 않습니다.

또한 대부분의 경우 이러한 작업의 대부분은 지원자가 수행할 작업과 관련이 없지만 여전히 해결해야 합니다. 때로는 Google이나 다른 소스에 확인하지 않고 게시판에서 이를 수행해야 하는 경우도 있습니다. 예, 상황은 점차 변하고 있으며 일부 회사에서는 이러한 인터뷰를 포기하고 있지만 많은 고용주는 여전히 이러한 전통을 고수하고 있습니다. 이 글은 구직자의 작업으로 자주 사용되는 일반적인 JavaScript 작업에 대한 분석을 다룹니다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 실기 코스 "모바일 개발자 PRO".

가장 중요한 것은 인터뷰를 철저히 준비하는 것입니다.

예, 업무를 살펴보기 전에 일반적인 면접 준비 팁을 살펴보겠습니다.

가장 중요한 것은 미리 준비하는 것입니다. 알고리즘과 데이터 구조를 얼마나 잘 기억하는지 테스트하고 익숙하지 않은 영역에 대한 지식을 향상시키세요. 인터뷰 준비에 도움이 되는 온라인 플랫폼이 많이 있습니다. 우리는 조언합니다 긱스포긱스, 프램프, 인터뷰.io и 코드 신호.

결정을 큰 소리로 말하는 법을 배우는 것은 가치가 있습니다. 단순히 칠판에 글을 쓰는 것(또는 조용히 컴퓨터에 코드를 입력하는 것)이 아닌 지원자에게 자신이 하는 일에 대해 알려주는 것이 좋습니다. 이렇게 하면 코드에 실수가 있지만 일반적으로 해결 방법이 정확하더라도 성공 가능성이 높아집니다.

문제 해결을 시작하기 전에 문제를 이해해야 합니다. 어떤 경우에는 작업을 피상적으로 이해한 다음 잘못된 길로 갈 수도 있습니다. 면접관에게 몇 가지 명확한 질문을 하는 것이 좋습니다.

PC가 아닌 손으로 코드 작성 연습을 해야 합니다. 인터뷰 중에 지원자에게 힌트나 자동 서식이 없는 마커와 화이트보드가 제공되는 경우가 있습니다. 해결책을 찾을 때 코드를 종이나 보드에 직접 적어 두는 것이 좋습니다. 모든 것을 머릿속에 담아두면 중요한 것을 잊어버릴 수도 있습니다.

JavaScript의 템플릿 작업

이러한 작업 중 일부는 이미 익숙할 것입니다. 비슷한 문제를 해결해야 하는 인터뷰를 했거나 JavaScript를 배우면서 연습해 본 적이 있을 것입니다. 자, 이제 다시 문제를 해결하고 과정에 대한 자세한 설명을 들을 차례입니다.

회문

회문은 일반적인 방향과 반대 방향 모두에서 정확히 동일하게 읽히는 단어, 문장 또는 문자 시퀀스입니다. 예를 들어, “Anna”는 회문이지만 “table”과 “John”은 그렇지 않습니다.

스테이징

문자열이 주어지면; 문자열이 회문이면 true를 반환하고 그렇지 않으면 false를 반환할 수 있는 함수를 작성해야 합니다. 이 경우 공백과 구두점을 고려해야 합니다.

palindrome('racecar') === 참
회문('테이블') === 거짓

작업을 분석해 봅시다

여기서 주요 아이디어는 문자열을 뒤집는 것입니다. "역방향" 문자열이 원래 문자열과 완전히 동일하면 회문을 받은 것이므로 함수는 true를 반환해야 합니다. 그렇지 않다면 거짓입니다.

결정

다음은 회문을 해결하는 코드입니다.

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('')
}

첫 번째 단계는 입력 문자열의 문자를 소문자로 변환하는 것입니다. 이는 프로그램이 대소문자나 다른 어떤 것도 비교하지 않고 문자 자체를 비교한다는 것을 보장합니다.

두 번째 단계는 라인을 뒤집는 것입니다. 이는 어렵지 않습니다. .split() 메서드(문자열 라이브러리)를 사용하여 배열로 변환해야 합니다. 그런 다음 .reverse()(배열 라이브러리)를 사용하여 배열을 뒤집습니다. 마지막 단계는 .join()(배열 라이브러리)을 사용하여 역방향 배열을 문자열로 변환하는 것입니다.

이제 해야 할 일은 "역방향" 문자열을 원래 문자열과 비교하여 결과가 true 또는 false를 반환하는 것입니다.

피즈버즈

인터뷰에서 가장 인기 있는 작업 중 하나입니다.

스테이징

1부터 n까지의 숫자를 콘솔에 인쇄하는 함수를 작성해야 합니다. 여기서 n은 다음 조건에 따라 함수가 매개 변수로 사용하는 정수입니다.

• 3의 배수 대신 fizz를 출력합니다.
• 5의 배수인 숫자 대신 버즈를 출력합니다.
• 3과 5의 배수인 숫자 대신 fizzbuzz가 출력됩니다.

예

피즈버즈(5)

결과

// 1
// 2
// 탄산
// 4
//버저 소리

작업을 분석해 봅시다

여기서 가장 중요한 것은 JavaScript를 사용하여 배수를 찾는 방법입니다. 모듈러스 연산자 또는 나머지 - %를 사용하여 구현할 수 있습니다. 이를 통해 두 숫자를 나눌 때 나머지를 표시할 수 있습니다. 나머지가 0이면 첫 번째 숫자가 두 번째 숫자의 배수라는 의미입니다.

12% 5 // 2 -> 12는 5의 배수가 아닙니다.
12% 3 // 0 -> 12는 3의 배수입니다.

따라서 12를 5로 나누면 2가 되고 나머지는 2가 됩니다. 12를 3으로 나누면 4가 되고 나머지는 0이 됩니다. 첫 번째 경우 12는 5의 배수가 아니고 두 번째 경우 , 12는 3의 배수입니다.

결정

최적의 솔루션은 다음 코드입니다.

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

이 함수는 조건문을 사용하여 필요한 검사를 수행하고 사용자가 요구하는 결과를 생성합니다. 문제에서는 if...else 문의 순서에 주의할 필요가 있습니다. 즉, 이중 조건(&&)으로 시작하고 여러 숫자를 찾을 수 없는 경우로 끝납니다. 결과적으로 우리는 모든 옵션을 다룹니다.

철자 바꾸기

이는 다른 단어의 모든 문자를 같은 숫자로 포함하지만 순서가 다른 단어의 이름입니다.

스테이징

두 문자열이 철자 바꾸기인지, 대소문자는 중요하지 않은지 확인하는 함수를 작성해야 합니다. 문자만 계산됩니다. 공백이나 구두점은 고려되지 않습니다.

anagram('finder', 'Friend') —> 참
anagram('hello', 'bye') —> 거짓

작업을 분석해 봅시다

여기서 중요한 점은 두 입력줄의 각 문자와 각 줄의 숫자를 확인해야 한다는 것입니다.

파인더 —> f: 친구 1명 —> f: 1
나: 1 르: 1
n: 1 나: 1
d: 1 전자: 1
전자: 1 n: 1
r: 1 d: 1

철자 바꾸기 데이터를 저장하려면 JavaScript 개체 리터럴과 같은 구조를 선택해야 합니다. 이 경우 핵심은 문자의 문자이고 값은 현재 줄에서 반복되는 횟수입니다.

다른 조건이 있습니다:

• 비교할 때 문자의 대/소문자가 고려되지 않는지 확인해야 합니다. 간단히 두 문자열을 모두 소문자 또는 대문자로 변환합니다.
• 비교에서 문자가 아닌 모든 항목을 제외합니다. 함께 작업하는 것이 가장 좋습니다. 정규 표현식.

결정

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

사용에 주의 Object.keys () 위의 조각에서. 이 메소드는 객체에 나타나는 것과 동일한 순서로 이름이나 키를 포함하는 배열을 반환합니다. 이 경우 배열은 다음과 같습니다.

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

이렇게 하면 대량 루프를 수행하지 않고도 객체의 속성을 얻을 수 있습니다. 문제가 있는 경우 .length 속성과 함께 이 방법을 사용하여 두 문자열의 문자 수가 동일한지 확인할 수 있습니다. 이는 철자 바꾸기의 중요한 기능입니다.

모음 검색

인터뷰에서 자주 등장하는 매우 간단한 작업입니다.

스테이징

문자열을 인수로 사용하고 문자열에 포함된 모음 수를 반환하는 함수를 작성해야 합니다.
모음은 "a", "e", "i", "o", "u"입니다.

예 :

findVowels('hello') // —> 2
findVowels('이유') // —> 0

결정

가장 간단한 옵션은 다음과 같습니다.

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
}

.includes() 메소드 사용에 주의하는 것이 중요합니다. 문자열과 배열 모두에 사용할 수 있습니다. 배열에 특정 값이 포함되어 있는지 확인하는 데 사용해야 합니다. 이 메서드는 배열에 지정된 값이 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

문제에 대한 더 짧은 해결책이 있습니다.

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

이는 효율적인 검색을 구현할 수 있는 .match() 메서드를 사용합니다. 메서드 인수인 정규식이 지정된 문자열 내에서 발견되면 반환 값은 일치하는 문자의 배열입니다. 일치하는 항목이 없으면 .match()는 null을 반환합니다.

피보나치

다양한 수준의 인터뷰에서 찾을 수 있는 고전적인 작업입니다. 피보나치 수열은 각 후속 숫자가 이전 두 숫자의 합인 일련의 숫자라는 점을 기억할 가치가 있습니다. 따라서 처음 0개의 숫자는 1, 1, 2, 3, 5, 8, 13, 21, 34, XNUMX와 같습니다.

스테이징

특정 시퀀스의 n번째 레코드를 반환하는 함수를 작성해야 하며, n은 함수에 인수로 전달되는 숫자입니다.

피보나치(3) // —> 2

이 작업에는 인수에 지정된 횟수만큼 루프를 통과하여 적절한 위치에 값을 반환하는 작업이 포함됩니다. 문제를 제기하는 이러한 방법에는 루프를 사용해야 합니다. 대신 재귀를 사용하면 면접관을 기쁘게 하고 몇 가지 추가 점수를 줄 수 있습니다.

결정

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

결과 배열에서는 시퀀스의 각 항목이 이전 두 숫자의 합이기 때문에 처음 두 숫자가 시리즈에 포함됩니다. 맨 처음에는 다음 숫자를 얻기 위해 사용할 수 있는 두 개의 숫자가 없으므로 루프가 자동으로 숫자를 생성할 수 없습니다. 그러나 우리가 알고 있듯이 처음 두 숫자는 항상 0과 1입니다. 따라서 결과 배열을 수동으로 초기화할 수 있습니다.

재귀의 경우 모든 것이 더 간단하면서도 동시에 더 복잡해집니다.

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

우리는 fibonacci()를 계속 호출하여 점점 더 작은 숫자를 인수로 전달합니다. 전달된 인수가 0 또는 1이면 중지됩니다.

출력

프론트엔드 또는 JavaScript 개발자 직업에 대한 인터뷰를 했다면(특히 주니어 레벨인 경우) 이미 이러한 작업을 접했을 가능성이 높습니다. 그러나 아직 발견하지 못했다면 향후 적어도 일반적인 개발에는 유용할 수 있습니다.

Skillbox는 다음을 권장합니다.

• 온라인 강좌 적용 "파이썬 데이터 분석가".
• 온라인 코스 "직업 프론트엔드 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com