# JavaScript-разработчик

1. Сколько типов данных существует в JS?
> ***Ответ:***
>
> 7 типов данных являются примитивами:
>
> *Boolean*,
> *Null*,
> *Undefined*,
> *Number*,
> *String*,
> *Symbol* (для чего может быть использован?),
> *BigInt*
> и *Object*

2. Какими способами может быть объявлена переменная? В чем различия?
> ***Ответ:***
>
> * `var, let, const`
> * **в области видимости, возможностях переобъявления и переприсваивания**, механизме всплытия

3. Что означает ключевое слово `this` в JS-коде?
> ***Ответ:***
>
> > В большинстве случаев значение `this` определяется тем, каким образом вызвана функция (объект, в контексте которого была вызвана функция). Значение `this` не может быть установлено путем присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции

4. Методы функции `.bind()`, `.call()`, `.apply()` — что делают и в чём их отличия?
> ***Ответ:***
>
> позволяют задать контекст функции, к которой применяются
> `.bind(<thisArg>[, <arg1>, ..., <argN>])` создаёт копию функции с заданным в первом аргументе контекстом, остальные аргументы передаются в порядке следования
> `.call(<thisArg>[, <arg1>, ..., <argN>])` вызывает функцию с заданным в первом аргументе контекстом, остальные аргументы передаются в порядке следования
> `.apply(<thisArg>[, argsArray])` вызывает функцию с заданным в первом аргументе контекстом, остальные аргументы передаются в виде массива

5. Что будет выведено в консоль при запуске данного кода в браузере? В node.js? Почему? https://replit.com/@OlegLevshin/Arrow-function-args-and-context

(function (context) {
  
  const f = () => console.log(this === context)
  f.call("Awesome thisArg!")

})(
  typeof window !== 'undefined' && window ||
  typeof global !== 'undefined' && global ||
  {}
)

> ***Ответ:***
>
> * `true`
> * стрелочные функции игнорируют задаваемый им контект и `this` в них указывает на this лексической области видимости, в которой эта функция определена

6. Какие две парадигмы программирования распространены в JavaScript-мире? Расскажите об известных вам концепциях в рамках этих парадигм применительно к JS?
> ***Ответ:***
>
> Императивное программирование с ООП и функциональное программирование
> ООП: прототипное наследование (в чём отличие от классического наследования?)
> ФП: чистые функции, иммутабельность, функции первого порядка, функции второго порядка, замыкания, композиции

7. Что будет результатом выполнения кода ниже? Почему? https://replit.com/@OlegLevshin/Object-creation-from-null-prototype

const o1 = {}
console.log(o1.toString())
const o2 = Object.create(null)
console.log(o2.toString())

> ***Ответ:***
>
> * первый `console.log` &mdash; *[object Object]*
> * второй `console.log` &mdash; *Uncaught TypeError: o2.toString is not a function* (ошибка, т.к. поиск метода происходит по цепочке
типов и все объекты в JS автоматически наследуются от Object, но `o2` объект был создан без какого либо прототипа в своей основе)
> * наследование в JS прототипно, можно использовать и классы, которые являются синтаксическим сахаром

8. Что такое *"мемоизация"*? Реализуйте простую функцию мемоизации:
> ***Ответ:***
>
> ```javascript
>function memoize (fn) {
> memoize.cache = {}
> return function () {
> const key = JSON.stringify(arguments)
> let result = memoize.cache[key]
> if(! result) {
> result = fn.apply(this, arguments)
> memoize.cache[key] = result
> }
> return result
> };
>}
> ```

9. Что будет выведено в консоль при запуске данного кода в браузере? Как можно изменить код, чтобы вывод был предсказуемым? https://replit.com/@OlegLevshin/Clojures-and-scopes

for (var i=0; i < 5; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

> ***Ответ:***
>
> * 5 раз цифра 5
>
> ```javascript
>for (var i=1; i <= 5; i++) {
> (function (i) {
> setTimeout(() => {
> console.log(i)
> }, 0)
> })(i)
>}
>
> /* or */
>
>for (let i=1; i <= 5; i++) {
> setTimeout(() => {
> console.log(i)
> }, 0)
>}
> ```

10. Реализуйте функцию-обёртку `logger()`, применение которой к другим функциям позволит нам узнать, с какими аргументами эта функция вызывалась и что она вернула в результате: https://replit.com/@OlegLevshin/Logging-decorator-test
> ***Ответ:***
>
> ```javascript
>const logger = function (fn) {
>
> const fnName = fn.name
>
> return function () {
>
> console.log(`Logger for ${fnName}:args:`, ...arguments)
>
> try {
> const result = fn.call(this, ...arguments)
>
> if (result instanceof Promise) {
> result
> .then(r => console.log(`Logger for ${fnName}:promise:result`, r))
> .catch(e => console.error(`Logger for ${fnName}:promise:error`, e))
> } else {
> console.log(`Logger for ${fnName}:result`, result)
> }
>
> return result
> } catch (e) {
> console.error(`Logger for ${fnName}:error`, e)
> throw e
> }
> }
>}
> ```

11. Расскажите про асинхронность в JS. Зачем она нужна? С помощью каких подходов и конструкций языка может быть реализована?
> ***Ответ:***
>
> * асинхронность нужна для повышения производительности, организации неблокирующего ввода-вывода в силу однопоточной природы языка
> * callbacks, promises, async/await

12. Допишите код так, чтобы в консоль вывелось **1, 2, 3, 4, 5** &mdash; т.е. чтобы промисы из данного массива были выполнены последовательно: https://replit.com/@OlegLevshin/DarkblueDarksalmonOmnipage

> ***Ответ:***
>
> ```javascript
> // Нежелательный вариант
> ;(async () => {
> for (const p of promises) {
> await p()
> }
> })()
>
> // Желательный вариант
> let resolved = Promise.resolve()
> for (const p of promises) {
> resolved = resolved.then(p)
> }
>
> // Также возможны варианты с рекурсией или .reduce()
> ```

13. Расскажите про модульные подходы в JS-разработке?
> ***Ответ:***
>
> * AMD, CommonJS, ESModules

~~14. Вопросы про Event Loop, браузерные API, фреймворки, особеноости node.js, собственные предпочтения и т.п.~~

#### Based on:
https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95
https://www.toptal.com/javascript/interview-questions
https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions/blob/master/README.md
https://codeburst.io/functional-memoization-in-javascript-adec62508bd0
https://www.gideonpyzer.com/blog/javascript-currying-and-partial-application/
https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md