Стек технологий JavaScript - ответы на вопросы на СтудИзбе

Каким образом Virtual DOM повышает производительность React?

• React сравнивает Virtual DOM и обычный DOM, если он находит различия, то перерендеривает только то место где произошло изменение
• Virtual DOM полностью заменяет браузерное DOM дерево, React отслеживает изменения и моментально делает перерендер
• браузер посылает запросы в Virtual DOM для отслеживания изменений, если они есть, то он открывает React доступ к внесению изменений

CSS модуль - это …

• способ написать стили с уникальными именами классов для каждого компонента
• название папки со стилями
• файл который описывает стили для всего проекта

Вам предстоит написать SPA приложение. Каким образом это лучше сделать?

• Для создания такого приложения нужно импортировать все компоненты в один и организовать внутри него условный рендеринг, таким образом можно бесшовно переключаться между компонентами
• Чтобы создать SPA приложение нужно пользоваться глобальными объектами и их методами, это позволит избежать перерендеринга компонентов
• Нужно использовать расширение react-router-dom для переключения и маршрутизации страниц React а также доступа к истории браузера

Вы начинаете писать большое веб-приложение, оно должно быть надежным и быстрым. Какие инструменты Вы будете использовать, и как организуете Ваш код?

• Можно написать код на jаvascript используя модули, большие приложения сильно нагружают систему, поэтому использование фреймворков и библиотек будет нагружать нагружать систему ещё больше.
• Буду писать код на React используя корневой файл проекта в качестве основы всего сайта, однофайловый способ написания позволит загрузить сайт всего лишь один раз что позволит увеличить скорость загрузки, и будет надёжнее чем распределять код по файлам
• Напишу код на React, используя компоненты можно по максимуму использовать реактивность. Файлы проекта буду хранить в отдельных папках и файлах, в дальнейшем это позволит проще поддерживать проект

Для разделения кода на небольшие логические блоки в React нужно использовать …

• Компоненты
• Функции
• Хуки
• Методы

Для чего нужен render() внутри компонента React?

• Для импорта html кода
• для создания и возврата виртуального дерева
• для запуска вспомогательных функций

Для чего нужна маршрутизация в веб-приложении?

• для передачи свойств нужным компонентам
• для правильной работы ссылок
• для перехода пользователей между страницами и ресурсами

Если Вам нужно сохранять какое то значение между рендерами React компонента, каким инструментом удобнее всего пользоваться?

• удобнее всего использовать localStorage
• лучше всего подходит хук useState
• хук useEffect может хранить состояние, и сразу же можно вывести его значение при рендере

Как можно передать данные в запросе REST API используя fetch?

• использовать метод GET и передать данные в формате JSON в свойство data
• использовать метод POST и передать данные в формате JSON в свойство body
• использовать файл метод POST и передать данные в формате JSON в свойство data

Какие теги нельзя использовать внутри тега form?

• div и другие блочные теги
• span, i, b, em и другие строчные теги
• style, script и другие теги не предназначенные для создания формы

Какой инструмент используется для навигации в React?

• useNavigate
• react-router-dom
• react-navigation

Какую функцию выполняет react router dom?

• управляет состоянием компонентов, запускает механизмы передачи props между компонентами
• определяет маршруты, обрабатывает переходы и передачу параметров, выполняет интеграцию с браузером
• определяет работу ссылок в проекте, перенаправляет запросы отправленные на сервер

Можно ли использовать несколько операторов условного рендеринга в коде?

• да, можно сколько угодно
• да, можно но не больше двух
• нет, нельзя

Пакетный менеджер npm используется для …

• написания кода на Node.js
• управления модулями и зависимостями проекта
• для отправки данных на сервер

Хук … можно использовать для условного рендеринга компонента

• useState
• useEffect
• useRender

Что такое API?

• это набор правил и процедур, которые позволяют одной компьютерной программе взаимодействовать с другой
• это набор правил и процедур которые позволяют приложению передавать props от дочернего компонента к родительскому
• это набор методов для управления состоянием приложения, и его жизненным циклом

React использует … передачу данных в компонентах

• двустороннюю
• одностороннюю
• промежуточную
• родительскую

Какая из следующих функций объекта Array возвращает значение true, если каждый элемент в этом массиве удовлетворяет предоставленной функции тестирования?

• concat()
• every()
• push()
• some()

Вы разрабатываете приложение, в котором есть форма регистрации. После ввода данных и нажатия на кнопку “Зарегистрироваться” форма отправляет запрос на сервер.
Вопрос: Можете ли Вы использовать колбеки в этом сценарии, чтобы получить информацию о том, успешно ли прошла регистрация или произошла ошибка?

В чём смысл stateFull подхода?

• Использование переменных состояния вместо обычных переменных
• управление компонентами за счет из связки с переменными состояния
• использование хука useEffect для рендеринга компонента

Как правильно передать объект события внутрь функции?

• ˂ button onclick={(event) = ˃ handler(event)} ˃˂ /button ˃
• ˂ button onclick={handler(event)} ˃˂ /button ˃
• ˂ button onclick=handler(event) ˃˂ /button ˃

Как скрыть список не имеющий элементов?

• использовать метод массива .hide
• удалить компонент из DOM дерева
• использовать условный рендеринг

Какие технологии Вы бы использовали при создании небольшого и быстрого веб-приложения SPA приложения?

• В качестве основы был бы jаvascript разделённый на модули, быстродействие обеспечивалось бы за счёт callback функций. Для реализации SPA можно создать классы с методами возвращающими заготовки html страниц
• Для создания такого приложения можно использовать React и хуки при помощи которых можно сделать функционал SPA приложения. За быстродействие отвечает Virtual DOM
• Для создания быстрого приложения можно использовать React. Разделение кода на компоненты позволяет улучшить быстродействие, а за счёт использования расширений таких как react-router-dom реализовать функционал SPA приложения.

Каким образом можно установить начальное значение для обертки над полем ввода React?

• Создать хук useEffect с новой переменной содержащей состояние
• Создать переменную состояния при помощи хука useState
• Использовать библиотеку react-default

Какой формат передачи данных можно использовать для передачи данных чаще всего используется в REST API?

• CSS
• HTML
• JSON
• Table

Можно ли делать запросы на сервер не используя методы, такие как GET, POST, DELETE?

• нет, спецификация REST API не позволит сделать запрос без метода
• да, можно использовать другие методы, REST API не требует использования только определенных запросов, главное чтобы они поддерживались сервером
• да, можно использовать методы других спецификаций API, при запросе они автоматически конвертируются для поддержания RESTFull архитектуры

На каких языках можно писать на React?

• На любом языке программирования
• Только на тех которые можно скомпилировать в JS
• Только на JS

При запуске следующего кода в консоль выведется … const [name, setName] = useState(‘John’) useEffect(() = ˃ { console.log(name) setTimeout(() = ˃ {setName(‘Anna’)}, 1000) }, [name]) return (˂ ˃˂ / ˃)

• John, Anna
• Anna
• John
• ошибка

Установите соответствие

1. Switch
2. Link
3. Route
4. nav
5. контейнер использующийся для определения порядка обработки маршрутов
6. функциональный элемент позволяющий пользователям переходить между страницами или состояниями приложения
7. компонент который определяет путь по которому должен следовать пользователь, чтобы перейти к определенной части приложения
8. элемент html обозначающий блок навигации

Хук useMemo даёт возможность …

• кэшировать результат выполнения функции
• сохранить результат выполнения функции в состояние компонента
• получить дочерним компонентам к родительским props

Что означает определение - зависимое поле ввода?

• каждый раз когда меняется значение поля ввода состояние компонента так же меняется
• когда меняется значение props компонента, меняется и значение в поле ввода
• поле ввода зависит от результата работы функции/метода

Что такое URL?

• это название сайта
• это адрес веб-страницы в интернете
• это имя сервера на котором запущен сайт

Элемент на веб-странице предназначенный для сбора информации называется …

• form
• footer
• body

React делает приложение “реактивным” за счет использования …

• VirtualDOM
• функций и классов
• фрагментов

Что из следующего верно в отношении соглашений об именовании переменных в jаvascript?

• Вы не должны использовать какое-либо из зарезервированных ключевых слов jаvascript в качестве имени переменной.
• Имена переменных jаvascript не должны начинаться с цифры (0-9).
• Имена переменных можно начать только со строчных символов латинского алфавита и использовать нижнее подчеркивание. Например: my_Variable
  

Какие приемы работы с асинхронным кодом в JS Вы знаете?

• Функции обратного вызова (Callbacks). Промисы (Promises). Async/await. Библиотеки вроде async.js, blueprint, q, co.
• Функции обратного вызова (Callbacks). Промисы (Promises). Async. Библиотеки вроде node.js, beng, query.
• Функции рекурсии. Фреймворки типа django. Async. Библиотеки вроде node.js, beng, query.
  

Какие значения возвращают следующие выражения?
0 == False
0 === False

• True, False
• True, True
• False, True

У вас есть массив чисел и вы хотите найти среднее арифметическое его элементов. Как вы это сделаете?

• Сначала нужно распаковать массив в переменные при помощи деструктуризации, затем сложить значения всех переменных и разделить на количество элементов массива
• Нужно сложить все числа в массиве используя метод .map(), а затем разделить это число на количество элементов в массиве
• Для начала нужно сложить все числа в массиве пройдясь по нему циклом, а затем разделить это число на количество элементов массива
  

Какой оператор служит для создания нового экземпляра из класса однотипных объектов?

• this
• new
• prototype

Что такое полиморфизм в контексте ООП в jаvascript?

• Полиморфизм – это когда подкласс класса может вызвать ту же самую обобщенную унаследованную функцию в своем собственном контексте
• Полиморфизм - это возможность создавать подклассы без доступа к свойствам и методам родительского объекта
• Полиморфизм - это возможность jаvascript создавать подклассы для классов
  

JSON объект можно создать при помощи …

• функции JSON.parse()
• функции JSON.stringify()
• метода .toJSON()
• метода .fromJSON()

Вы работаете над проектом, который требует использования jаvascript на клиенте. Проект включает в себя страницу с формой авторизации, которая должна быть валидирована при отправке. Форма состоит из двух полей: имя пользователя и пароль. В форме есть кнопка отправки. Нужно ли проверять правильность введенных данных пользователем? Вызовется ли событие submit на элементе формы, при нажатии кнопки отправки если в ней не указан type=”submit”?

• Нет, можно ограничиться встроенными средствами html, такими как указание type и required
• Нет, событие submit не будет вызвано из за отсутствия нужного type у кнопки отправки
• Да, для этого существуют шаблонные строки, которые позволяют проверить правильность введенных данных. Да событие submit будет вызвано, так как у кнопки внутри формы type по умолчанию установлен как submit
• Да, можно проверить данные при помощи шаблонных строк. Нет так как событие submit может быть вызвано только при наличии у кнопки отпраВки внутри формы type=”submit”
  

Вы разрабатываете функцию, которая должна принимать строку и возвращать логическое значение (True или False). Эта функция должна проверить, является ли строка палиндромом. Однако вы не учли, что строка может быть представлена в виде массива символов. Вопрос: как преобразовать массив символов в строку, чтобы можно было проверить, является ли она палиндромом?

• можно воспользоваться методом .join()
• можно использовать метод .split()
• можно воспользоваться методом .string()

В чем разница между методами Object.freeze и Object.seal?

• Разница заключается в том, что при использовании метода Object.freeze мы не можем менять или редактировать свойства объекта, а при использовании Object.seal у нас такая возможность имеется.
• Разница заключается в том, что при использовании метода Object.seal мы не можем менять или редактировать свойства объекта, а при использовании Object.freeze у нас такая возможность имеется.
• Это один и тот же метод, только в разных версиях js.
  

Что такое стрелочные функции (Arrow Functions)?

• Другое название рекурсивной функции.
• Функции, которые выполняются в строгой последовательности.
• Стрелочные функции создаются быстрее и имеют более читаемый синтаксис, чем функциональные выражения. В стрелочных функциях опускается слово «function»
• В функциональном выражении мы используем ключевое слово «return» для возврата значения. В стрелочной функции мы этого не делаем, поскольку стрелочные функции неявно возвращают значения при условии, что мы возвращаем одно выражение или значение.
  

Что такое неявное преобразование?

• Способ задать тип переменной, при котором она приобретает значение необходимое для конкретного случая.
• Метод, определяющий значение переменной исходя из её типа.
• Способ приведения значения к другому типу без нашего ведома (участия).

Назовите основные преимущества JSON?

• Читается любым редактором.
• Компактный, быстро компилируемый, читаемый человеком.
• Содержит только уникальные значения.

Что такое функция обратного вызова (Callback Function)?

• Рекурсивная функция другими словами.
• Функция обратного вызова — это функция, вызов которой отложен на будущее.
• Функция, принимающая значения в зависимости от изменения значения переменной True, False.

Какие значения возвращают следующие выражения?
console.log(!!' ')
console.log(!!{})
console.log(!![])
console.log(!!1)

• True, False, False, False
• True, True, True, True
• False, True, False, False
• False, False, False, False

Что будет записано в переменную test? var a = 5; var test = 5 != a ? "Yes" : "No";

• No
• Yes
• Ошибка

При работе над большим и сложным проектом, стоит ли использовать принципы DRY, KISS, SOLID? Будете ли вы использовать модульный подход распределения кода?

• Нет, эти принципы предназначены для небольших и средних проектов. Да, так распределение кода по модулям позволяет улучшить читаемость кода.
• Буду использовать только SOLID, DRY и KISS не являются обязательными при разработке. Нет, модульный подход замедляет выполнение кода, а большое количество файлов затрудняет читаемость кода
• Да, эти принципы позволяют создать хороший проект, который смогут поддерживать другие программисты. Да, модульная система файлов позволяет разбить код на небольшие куски которые легко читать и поддерживать
  

Какие типы доступа к свойствам и методам класса Вы знаете?

• save - для сохранения значения, git - для получения
• set - для сохранения значения, get - для получения
• set - для сохранения значения, get - для получения, del-для удаления
• set - для сохранения значения, got - для получения

Какое ключевое слово позволяет создавать объекты общего вида?

• object
• this
• prototype

Какие значения возвращают следующие выражения?
null == undefined
null === undefined

• True, False
• True, True
• False, True

Что такое классы (Classes)?

• Особый вид функций, вложенных одна в другую.
• Классы — это относительно новый способ написания функций-конструкторов в JS. Это синтаксический сахар для функций-конструкторов.
• Последовательно выстроенный ряд словарей.
  

Объявлена переменная let string = ‘Hello World !’ Что из приведённого ниже подойдёт для поиска в ней слова ‘World’?

• string.match(/world/gi)
• string.match(/world/g)
• string.search(/world/i)

Принцип DRY применяется для …

• сокращения объема кода за счёт использования более сложных, но коротких конструкций
• сокращения количества переменных, за счет записи новых значений в уже созданные переменные
• исключения дублирования кода, а следовательно сокращение времени разработки и тестирования кода
  

Инкапсуляция в ООП это …

• Сокрытие деталей реализации объекта
• Разделение ответственности между классами
• Определение порядка выполнения методов
• Создание иерархических структур данных

Что происходит, когда мы обращаемся к свойству класса, которого нет в нем самом, но есть в его прототипе?

• будет выброшено исключение
• будет создано новое свойство в самом объекте
• будет использовано значение свойства из прототипа
• ничего не произойдёт

Ключевое слово import используется …

• для получения функционала из других модулей
• для отметки переменных и функций которые должны быть доступны за пределами текущего модуля
• для создания общей области видимости с модулем
  

Что такое async/await?

• Async/await — относительно новый способ написания синхронного кода в JS. Выполняются синхронно в условиях многопоточности.
• Цикл, запускающий функции.
• Async/await — относительно новый способ написания асинхронного (неблокирующего) кода в JS. Им оборачивают промис.
  

Что такое промисы (Promises)?

• Функции, выполняемые при достижении определенного значения переменной.
• Цикл, выполняемый в теле функции.
• Промисы — это один из приемов работы с асинхронным кодом в JS. Они возвращают результат асинхронной операции.

Принцип KISS подразумевает …

• упрощение кода, разделение сложных компонентов на более простые, отказ от лишней функциональности
• усложнение кода, группировка простых компонентов в более сложные
• решение задач при помощи сторонних библиотек, отказ от самостоятельного написания кода
  

Что такое модуль в jаvascript?

• это пакет, который устанавливается с помощью менеджера пакетов
• это классы которые предоставляют методы для обмена данными между частями приложения
• это блок кода, который может быть использован в разных частях проекта. Модули позволяют разделить код на логические блоки и облегчить его понимание
• это файл который содержит весь код программы

Условный (тернарный) оператор это …

• конструкция которая выполняет код несколько раз
• конструкция для определения значения переменной в зависимости от условия
• конструкция позволяющая циклично сравнить три или более переменных

Каким образом можно создать новый класс Oak который бы наследовался от существующего класса Tree, и делал бы новый метод grow на основе метода родителя?

• Создать class Oak используя super() в конструкторе. Затем создать метод grow, внутри которого описать новую функциональность
• Создать класс используя extends Tree для наследования. Затем в классе Tree изменить метод grow добавив новую функциональность
• Создать класс используя extends Tree для наследования. Затем в классе Oak создать метод grow, в котором вызвать super.grow() и после этого написать дополнительную функциональность.
  

Прежде чем приступить к разработке, используется принцип … который позволяет посмотреть на проект со стороны и продумать детали:

• KISS
• BDUF
• SOLID

Изменить прототип объекта после его создания можно используя …

• метод "Object.setPrototypeOf"
• прототип объекта нельзя изменить
• метод "Object.setPrototype"

Какие способы объявления переменных Вы знаете?

• let, set, const
• const, var, let
• create, const, var

Когда выполнится код внутри блока do, конструкции do {} while()?

• Перед работой while
• После работы while
• В случае когда условие while будет выполнено
• В случае когда условие внутри while не будет выполнено

Ключевое слово импорт используется для …

• Для создания общей области видимости с модулем
• Для отметки переменных и функций которые должны быть доступны за пределами текущего модуля
• Получения функционала из других модулей

Что такое ООП в jаvascript?

• это способ организации кода, при котором все функции, переменные и данные хранятся в одном большом объекте
• это концепция разработки программного обеспечения в которой код пишется на основе заранее подготовленных шаблонов
• это шаблон проектирования программного обеспечения, который позволяет решать задачи с точки зрения объектов и их взаимодействий
• это когда каждый файл jаvascript является отдельным объектом, и все они взаимодействуют друг с другом через специальные методы
  

Какая из следующих функций объекта Array объединяет все элементы массива в строку?

• concat()
• join()
• pop()
• map()

Деструктуризация - это …

• процесс запускаемый на стадии парсинга js файла, позволяющий компилятору выполнить функции объявленные методом function declaration
• возможность jаvascript передавать значения из объекта в массив
• этап работы ‘сборщика мусора’ на котором происходит удаление всех непомеченных значений
• специальный синтаксис, который позволяет «распаковать» массивы или объекты в несколько переменных
  

Какой метод используется для добавления элемента в начало массива?

• push()
• shift()
• pop()
• unshift()

Есть переменная let num = ‘123’. Для преобразования её значения к числовому типу можно использовать …

• бинарный плюс
• унарный плюс
• метод fromString()
• В jаvascript число записанное в строковом виде самостоятельно приводится к числовому типу

Сохранить данные в local-storage можно используя …

• localStorage.saveItem(“ключ”, “значение”)
• localStorage.setItem(“ключ”, “значение”)
• localStorage.putItem(“ключ”, ”значение”)
• localStorage(“ключ”, “значение”)

В коде объявлена переменная let string = ‘Hello’. В какой последовательности нужно использовать методы, чтобы перевернуть строку? let reversedString = …

• string.split(‘ ’).join(‘’).reverse()
• string.reverse().split(‘ ’).join(‘’)
• string.join(‘’).reverse().split(‘ ’)
• string.split(‘ ’).reverse().join(‘’)

Какая переменная записана неверно?

• let num_one = 1;
• const number = ‘Hello’
• var num = 10,3;
• let b = false;

Разница между confirm и prompt состоит в …

• между ними нет разницы
• confirm вызывает диалоговое окно с полем для ввода, prompt - окно с подтверждением
• prompt вызывает диалоговое окно с полем для ввода, confirm - окно с подтверждением
• confirm - вызывает окно с предупреждением, prompt - окно с полем для ввода

В чем разница между ключевыми словами «var», «let» и «const»?

• Переменные, объявленные с помощью ключевого слова «var», являются глобальными. Разница между «let» и «const» состоит в том, что в первом случае мы может менять значение переменной, а во втором — нет (константа).
• Принципиальной разницы нет. Зависит от версии js.
• const применяется только в функциях, var - это любая целочисленная переменная, let - любое другое значение переменной.
  

Какие механизмы Вы знаете для работы с асинхронностью в jаvascript?

• prompt, try/catch
• callback, JSON
• promise, async/await

Какая из следующих функций String object создает строку, которая будет отображаться таким же жирным шрифтом, как если бы она была в теге < b >?:

• anchor()
• big()
• blink()
• bold()

Является ли использование унарного плюса (оператор "+") самым быстрым способом преобразования строки в число?

• Нет, это не так. Напротив, данный оператор привлекает довольно большой объём памяти и поэтому довольно медленный.
• Согласно MDN оператор "+" действительно является самым быстрым способом преобразования строки в число, поскольку он не выполняет никаких операций со значением, которое является числом.
• В JS преобразовать строку в число невозможно.
  

Что такое ECMAScript?

• Спецификация языка jаvascript
• Новый язык программирования
• Переработанная реализация jаvascript

Какая арифметическая операция приводит к ошибке в jаvascript?

• Корень из отрицательного числа
• Деление на ноль
• Все арифметические операции в jаvascript будут отображаться без ошибки

Регулярные выражения в JS могут быть использованы для …

• Для записи повторяющихся данных
• Для поиска и замены в строке
• Для извлечения данных с web-страницы

Ключевое слово export используется для …

• получения функционала из других модулей
• отметки переменных и функций которые должны быть доступны за пределами текущего модуля
• для создания общей области видимости с модулем
  

Для создания класса в jаvascript используется …

• ключевое слово new
• ключевое слово class
• функция createClass()
• ключевое слово var

Как в классе объявляется геттер возвращающий свойство name?

• get name {return this.name}
• get name() {return this._name}
• get name() {return name}
• get: () => {return this._name}

Принцип KISS подразумевает …

• Группировка простых компонентов в более сложные, для сокращения количества кода
• упрощение кода, разделение сложных компонентов на более простые, отказ от лишней функциональности
• решение задач при помощи сторонних библиотек, отказ от самостоятельного написания кода

Принцип DRY применяется для …

• За счет создания более сложных, но коротких конструкций
• Сокращения количества переменных, за счет записи новых значений в уже существующие переменные
• Исключения дублирования кода, а следовательно сокращения времени разработки и тестирования кода
  

Сохранить данные в localStorage можно используя …

• localStorage.saveItem(‘ключ’, значение)
• localStorage(‘ключ’, значение)
• localStorage.setItem(‘ключ’,значение)

Что выведет данный код?
function User() { }
User.prototype = { admin: false };
let user = new User();
alert(user.admin);

• true
• false
• Ошибку
• Пустой alert

Какие значения возвращают следующие выражения?
console.log(!!null)
console.log(!!undefined)
console.log(!!'')
console.log(!!0)
console.log(!!NaN)

• True, False, False, False, True
• True, True, True, True, True
• False, True, False, False, True
• False, False, False, False, False

Есть переменная let string = ‘hello world!’. Чтобы изменить первую букву в слове ‘hello’ на заглавную нужно использовать …

• string[‘h’] = ‘H’
• string[0] = ‘H’
• Строки в jаvascript являются неизменяемыми
• string.h = ‘H’

Что такое переменная?

• файл на жёстком диске, который создает программа для хранения значений
• именованный контейнер для хранения определенного набора битов или типа данных
• функция которая позволяет вычислить значение на основании полученных данных
• новый функционал введенный в ECMA(2015)

Какие способы получения свойства объекта Вы знаете?

• obj.key или obj["key"]
• obj{key}
• obj.”key” или obj.[“key”]
• obj{“key”}

Условный (тернарный) оператор это - …

• Конструкция которая выполняет код несколько раз
• Конструкция позволяющая сравнить три переменных
• Конструкция для определения переменной в зависимости от условия
• Конструкция позволяющая циклично сравнить три или более переменных

Инкапсуляция в ООП это …

• Сокрытие деталей реализации объекта
• Разделение ответственности между классами
• Создание иерархических структур данных