Javascript вопросы на собеседовании

Вы задавались вопросом, какие наиболее распространенные вопросы Javascript разработчики задают в интервью? Итак, в этой статье мы рассмотрим некоторые из наиболее ожидаемых вопросов (и их ответы), чтобы помочь вам начать работу на собеседованиях и произвести хорошее впечатление своими знаниями.
Разработчики JavaScript пользуются большим спросом в мире информационных технологий. Если это та роль, которая лучше всего выражает ваши знания и профессионализм, то у вас есть много возможностей увеличить свою зарплату и изменить компанию в которой вы работаете.
Но прежде чем вы будете наняты компанией, вы должны продемонстрировать свои навыки, чтобы пройти процесс собеседования.

1.1 Что такое Javascript?

JavaScript — это высокоуровневый, динамический, нетипизированный и интерпретируемый язык программирования. Он был стандартизован в спецификации языка ECMAScript. Наряду с HTML и CSS, это одна из трех основных технологий создания контента в World Wide Web; Большинство веб-сайтов используют его, и оно поддерживается всеми современными веб-браузерами без плагинов или любого другого расширения.
JavaScript прототип-ориентированный с первоклассными функциями, делая его многопарадигматическим языком, поддерживающим объектно-ориентированные, императивные и функциональные стили программирования. Он имеет API для работы с текстом, массивами, датами и регулярными выражениями, но не включает в себя какие-либо операции ввода-вывода, такие как сети, хранилища или графические объекты, полагаясь на них в среде хоста, в которую он встроен.
Итак, чтобы завершить этот параграф, запомните ответы на вопрос «Что такое Javascript?».
Это язык программирования. Это интерпретируемый язык. Это объектно-ориентированное программирование. Он широко используется и поддерживается. Он доступен для новичка.

1.2 Выполнение кода Javascript?

1.2.1 Выполнение кода Javascript?
Добавить команды JavaScript на веб-страницы можно тремя способами:
• Код для встраивания
• Встроенный код
• Внешний файл

1.2.2 Написание Javascript
Код JavaScript, как правило, встроен в HTML-код, который интерпретируется и запускается браузером клиента. Вот несколько советов, которые следует помнить при написании команд JavaScript:
• Код JavaScript чувствителен к регистру
• Пустое пространство между словами и вкладками игнорируется
• Разрывы строк игнорируются, кроме как в операторе
• Операторы JavaScript заканчиваются точкой с запятой

1.2.3 Объекты
JavaScript программирование имеет поддержку объектов. Объекты — это способ организации переменных. Различные элементы экрана, такие как веб-страницы, формы, текстовые поля, изображения и кнопки, рассматриваются как объекты. Каждый объект имеет свои свойства и методы.
Свойства определяют характеристики объекта. Примеры: цвет, длина, имя, высота, ширина. Методы — это действия, которые объект может выполнять или которые могут быть выполнены над объектом. Примеры: предупреждение, подтверждение, запись, открытие, закрытие.

1.3 События JavaScript

Объекты на веб-странице организованы в иерархии. Все объекты имеют свойства и методы. Кроме того, некоторые объекты также имеют «события». События — это вещи, которые происходят, как правило, действия пользователя, которые связаны с объектом. «Обработчик события» — это команда, которая используется для указания действий в ответ на событие. Общие события:
onLoad — происходит, когда страница загружается в браузере
onUnload — происходит перед тем, как пользователь покинет страницу
onMouseOver — происходит, когда вы наводите курсор на объект
onMouseOut — происходит, когда вы отводите курсор объекта
onSubmit — возникает, когда вы отправляете форму
onClick — происходит при щелчке по объекту

Взаимодействие JavaScript с HTML обрабатывается через события, которые происходят, когда пользователь или браузер манипулируют страницей. Когда страница загружается, она вызывает событие. Когда пользователь нажимает кнопку, этот клик также является событием. Другие примеры включают такие события, как нажатие любой клавиши, закрытие окна, изменение размера окна и т.д.
Разработчики могут использовать эти события для выполнения JavaScript-кодированных ответов, которые заставляют кнопки закрывать окна, сообщения, которые будут отображаться для пользователей, данные, которые будут проверены, и практически любой другой тип воображаемого ответа. События являются частью уровня объектной модели документа (DOM) L3 и каждый элемент HTML содержит набор событий, которые могут вызывать код JavaScript.

2.1 Можете назвать две парадигмы программирования, важные для разработчиков приложений JavaScript?
JavaScript является языком мультипарадигменным, поддерживающим императивное/процедурное программирование наряду с ООП (объектно-ориентированное программирование) и функциональным программированием. JavaScript поддерживает ООП с прототипным наследованием.

2.2. Что такое функциональное программирование?
Функциональное программирование порождает программы, составляя математические функции и избегая общих состояний и изменяемых данных. Lisp (указан в 1958 году) был одним из первых языков, поддерживающих функциональное программирование, и был сильно вдохновлен лямбда-исчислением. Функциональное программирование — это важное понятие в JavaScript (один из двух столпов JavaScript). В ES5 было добавлено несколько общих функциональных утилит для JavaScript.
Основное внимание уделяется: — чистоте функций — избеганию побочных эффектов — простой структуре функций.

2.3. В чем разница между классическим наследованием и прототипным наследованием?
Наследование класса: экземпляры наследуют от классов (например, проект — описание класса) и создают отношения подкласса: таксономии иерархических классов. Экземпляры обычно создаются с помощью конструктора с новым ключевым словом. Наследование классов может использовать или не использовать ключевое слово class из ES6.
Прототипное наследование: экземпляры наследуются непосредственно от других объектов. Экземпляры обычно создаются с помощью встроенных функций или Object.create(). Экземпляры могут состоять из множества различных объектов, что позволяет легко избирательно наследовать.

2.4. Когда прототипное наследование является подходящим выбором?
Существует несколько видов прототипного наследования:
Делегирование (т.е. Цепочка прототипов).
Конкатенативный (т.е. Mixins, Object.assign ()).
Функциональный (не путать с функциональным программированием. Функция, используемая для создания замыкания для частного состояния / инкапсуляции).
Каждый тип прототипного наследования имеет свой собственный набор прецедентов, но все они одинаково полезны в их способности включить композицию, которая создает отношения has-a или uses-a или can-do, в отличие от отношений is-a созданных с наследованием классов.

2.5. Что такое асинхронное программирование и почему это важно в JavaScript?
Синхронное программирование означает, что, за исключением условных выражений и вызовов функций, код выполняется последовательно сверху-вниз, блокируя длительные задачи, такие как сетевые запросы и дисковые операции ввода-вывода.
Асинхронное программирование означает, что движок работает в цикле событий. Когда требуется операция блокировки, запрос запускается, и код продолжает работать без блокировки для результата. Когда ответ готов, прерывание запускается, что приводит к запуску обработчика событий, где управляемый поток продолжается. Таким образом, один программный поток может обрабатывать множество параллельных операций.
Пользовательские интерфейсы асинхронны по своей природе и проводят большую часть своего времени, ожидая ввода пользователем прерывания цикла обработки событий и запуска обработчиков событий. Node по умолчанию является асинхронным, что означает, что сервер работает во многом таким же образом, ожидая в цикле сетевого запроса и принимая больше входящих запросов, пока обрабатывается первый.
Это важно в JavaScript, потому что это очень удобно для кода пользовательского интерфейса и очень полезно для производительности на сервере.

2.6. Какие типы данных JavaScript?
В JavaScript существует три основных типа данных, два составных типа данных и два специальных типа данных.
Первичные типы данных:
• Строка
• Число
• Boolean
Составные типы данных:
• Объект
• Массив
Специальные типы данных:
• Null
• Undefined

2.7. В чем разница между «==» и «===»?
«==» проверяет только равенство по значению, тогда как «===» является более строгим критерием равенства и возвращает значение «ложь», если значение, либо тип двух переменных различны. Таким образом, второй вариант требует, чтобы и значение, и тип были одинаковыми для операндов.

2.8 Что такое значение undefined в JavaScript?
Значение undefined означает:
• Переменная, используемая в коде, не существует
• Переменная не присваивается никакому значению
• Свойство не существует

2.9 Какие существуют типы ошибок в JavaScript?
Существует три типа ошибок:
Ошибки времени загрузки. Ошибки, возникающие при загрузке веб-страницы, например синтаксические ошибки, называемыми ошибками времени загрузки и динамически генерируемые ошибки.
Ошибки времени выполнения: ошибки, возникающие из-за неправильного использования команды внутри языка HTML.
Логические ошибки: это ошибки, возникающие из-за неправильной логики, выполняемой над функцией.

2.10 Определение пузырькового события
JavaScript позволяет элементам DOM быть вложенными друг в друга. В таком случае, если щелкнуть дочерний обработчик, обработчик родительского элемента также будет работать так, как если бы он был также нажат.

2.11. Какое значение имеет и в чем преимущества использования use strict в начале исходного файла JavaScript?

Use strict — это способ добровольно использовать более строгий синтаксический анализ и обработку ошибок в вашем JavaScript коде во время выполнения. Ошибки кода, которые раньше бы игнорировались или бы молча терпели неудачу, теперь будут генерировать ошибки или выдавать исключения. В целом, это хорошая практика.
Некоторые из основных преимуществ строгого режима включают:
Делает отладку проще. Ошибки кода, которые иначе были бы проигнорированы или потерпели неудачу, теперь будут генерировать ошибки или выдавать исключения, предупреждая вас о ранних проблемах в вашем коде и быстрее направляя вас к их источнику.
Предотвращает случайные глобальные переменные. Без строгого режима присвоение значения необъявленной переменной автоматически создает глобальную переменную с этим именем. Это одна из самых распространенных ошибок JavaScript. В строгом режиме при попытке сделать это возникает ошибка.
Устраняет это принуждение. Без строгого режима ссылка на значение null или undefined автоматически преобразуется в глобальную. Это может стать причиной многих ошибок и головной болью. В строгом режиме, ссылаясь на значение null или undefined генерируется ошибка.
Запрещает дублировать имена свойств или значения параметров. Строгий режим генерирует ошибку, когда обнаруживает дубликат именованного свойства в объекте (например, var object = {foo: «bar», foo: «baz»};) или дубликат именованного аргумента для функции (например, function foo(val1, val2, val1) {}), тем самым улавливая вас на том, что почти наверняка является ошибкой в ​​вашем коде, на поиск которой, вы могли бы потратить много времени.
Делает eval() более безопасным. Есть некоторые различия в том, как eval() ведет себя в строгом режиме и в нестрогом режиме. Наиболее важно то, что в строгом режиме переменные и функции, объявленные внутри оператора eval(), не создаются в области видимости(они создаются в области видимости в нестрочном режиме, что также может быть общим источником проблем).
Выдает ошибку при неправильном использовании удаления. Операция удаления (используется для удаления свойств из объектов) не может использоваться для неконфигурируемых свойств объекта. Нестрогий код сработает молча, когда будет предпринята попытка удалить неконфигурируемое свойство, в то время как строгий режим выдаст ошибку в этом случае.

2.12 Что такое Screen-объекты?

Screen-объекты используются для чтения информации с экрана клиента. Свойства экранных объектов —
AvailHeight: отображает высоту экрана клиента
AvailWidth: предоставляет ширину экрана клиента.
ColorDepth: выдает битовую глубину изображений на экране клиента
Height: выдает общую высоту экрана клиента, включая панель задач.
Width: выдает полную ширину экрана клиента, включая панель задач.

3.1. Какой код будет выводиться на консоль ниже и почему?

(function(){
    var a = b = 3;
})();
console.log("a defined? " + (typeof a !== ’undefined’));
console.log("b defined? " + (typeof b !== ’undefined’));

3.1.1 Ответ:
Поскольку и a, и b определены в пределах охватываемой области видимости функции, и поскольку строка, в которой они находятся, начинается с ключевого слова var, большинство разработчиков JavaScript ожидали бы, что typeof a и typeof b оба являются неопределенными в приведенном выше примере.
Однако это не так. Проблема здесь в том, что большинство разработчиков неправильно понимают выражение var a = b = 3; Сокращенно: var b = 3; var a = b;
Но на самом деле var a = b = 3 является сокращением для: b = 3; var a = b;
В результате (если вы не используете строгий режим), результатом фрагмента кода будет:

a defined? false
b defined? true

3.2. Какой код будет выводиться на консоль ниже и почему?

var myObject = {
  foo: "bar",
  func: function() {
    var self = this;
    console.log("outer func: this.foo = " + this.foo);
    console.log("outer func: self.foo = " + self.foo);
    (function() {
      console.log("inner func: this.foo = " + this.foo);
      console.log("inner func: self.foo = " + self.foo);
    }());
  }
};
myObject.func();

Вышеприведенный код выведет на консоль следующее:

outer func: this.foo = bar
outer func: self.foo = bar
inner func: this.foo = undefined
inner func: self.foo = bar

Во внешней функции, как this, так и self ссылаются на myObject, и поэтому оба могут должным образом ссылаться и получать доступ к foo.
Однако во внутренней функции это больше не относится к myObject. В результате this.foo не определен во внутренней функции, тогда как ссылка на локальную переменную self остается в области видимости и доступна там. (До ECMA 5 это во внутренней функции относилось бы к глобальному объекту window, тогда как, как в ECMA 5, это во внутренней функции было бы undefined.)

3.3. Какой код будет выводиться ниже? Поясните свой ответ.

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

Правильный ответ на этот вопрос будет просто следующим: «Вы не можете быть уверены в том, что он выведет «0,3» и «true», а может и нет. Числа в JavaScript обрабатываются с плавающей точкой не всегда приносит ожидаемые результаты ».
Приведенный выше пример является классическим примером, демонстрирующим эту проблему. Удивительно, но он распечатает:

0.30000000000000004
false

3.4. Рассмотрим следующий фрагмент кода:

for (var i = 0; i < 5; i++) {
    var btn = document.createElement(’button’);
    btn.appendChild(document.createTextNode(’Button ’ + i));
    btn.addEventListener(’click’, function(){ console.log(i); });
    document.body.appendChild(btn);
}

(a) Что записывается в консоль, когда пользователь нажимает кнопку «Button 4» и почему?
(b) Обеспечьте одну или несколько альтернативных реализаций, которые будут работать, как ожидалось.
3.4.1 Ответ:
(a) Независимо от того, какую кнопку пользователь нажимает на число 5, он всегда будет записываться в консоль. Это происходит потому, что в момент вызова метода onclick (для любой из кнопок) цикл for уже завершен, а переменная i уже имеет значение 5. (Бонусные баллы для респондента, если они знают достаточно, чтобы говорить как контексты выполнения, объекты переменных, объекты активации и внутреннее свойство «область действия» вносят вклад в поведение закрытия.)
(b) Ключом к созданию этой работы является захват значения i на каждом проходе через цикл for, передавая его во вновь созданный объект-освободитель. Вот три возможных способа сделать это:

for (var i = 0; i < 5; i++) {
  var btn = document.createElement(’button’);
  btn.appendChild(document.createTextNode(’Button ’ + i));
  btn.addEventListener(’click’, (function(i) {
    return function() { console.log(i); };
  })(i));
  document.body.appendChild(btn);
}

3.5. Какой код будет выводиться на консоль ниже и почему?

var arr1 = "john".split(’’);
var arr2 = arr1.reverse();
var arr3 = "jones".split(’’);
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

Ответ. Зарегистрированный выход будет:

"array 1: length=5 last=j,o,n,e,s"
"array 2: length=5 last=j,o,n,e,s"

arr1 и arr2 совпадают после выполнения вышеуказанного кода по следующим причинам:

Вызов метода reverse() массива объекта не только возвращает массив в обратном порядке, но и изменяет порядок самого массива (т.е. В данном случае arr1).
Метод reverse() возвращает ссылку на сам массив (то есть в этом случае arr1). В результате arr2 является просто ссылкой (а не копией) arr1. Поэтому, когда что-нибудь делается с arr2 (то есть когда мы вызываем arr2.push (arr3);), arr1 также будет затронут, так как arr1 и arr2 являются просто ссылками на один и тот же объект.

3.6 Следующий рекурсивный код вызовет переполнение стека, если список массивов слишком велик. Как вы можете это исправить и сохранить рекурсивный шаблон?

var list = readHugeList();
var nextListItem = function() {
  var item = list.pop();
  if (item) {
    // process the list item...
    nextListItem();
  }
};

Ответ. Переопределение потенциального стека можно избежать, изменив функцию nextListItem следующим образом:

var list = readHugeList();
var nextListItem = function() {
  var item = list.pop();
  if (item) {
    // process the list item...
    setTimeout( nextListItem, 0);
  }
};

Переполнение стека устраняется, поскольку цикл обработки событий обрабатывает рекурсию, а не стек вызовов. Когда выполняется nextListItem, если элемент не равен NULL, функция таймаута (nextListItem) помещается в очередь событий, и функция завершает работу, тем самым оставляя стек вызовов чистым. Когда очередь событий запускает свое событие тайм-аута, обрабатывается item, и таймеру назначается повторный вызов nextListItem. Соответственно, метод обрабатывается от начала до конца без прямого рекурсивного вызова, поэтому стека вызовов остается четким, независимо от количества итераций.


По материалам книги: JavaScript Interview Questions And Answers by Fabio Cimo
Перевод не исключает возможных ошибок!

Написать комментарий

Ваш Email не будет опубликован

На нашем сервере не хранятся какие-либо объекты авторского права согласно действующему законодательству страны, в которой находится сайт и сервер. Все материалы хранятся на файлообменных общедоступных серверах и у нас представлены только ссылки, что не является нарушением законодательства текущей страны местонахождения сайта. Если вы хотите заявить о нарушении авторских прав, пожалуйста, предоставьте нам полную информацию и обоснованные аргументы, согласно которым мы должны удалить какую-либо информацию с нашего сайта.