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

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

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

Для чего нужен JSX?

• для передачи props в компонентах React
• для описания пользовательского интерфейса внутри jаvascript кода
• Это стандартный механизм React, позволяющий писать на нём код.

Стили написанные прямо внутри компонента называются …

• styled components
• css-in-js
• inline-styles

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

• использовать компоненты с props в виде роутов
• использовать вложенные маршруты
• использовать хук useRouting

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

• Сначала устанавливается среда разработки Node.js командой npm install node, после этого устанавливается пакет для создания приложения через команду node install create-react-app. Потом создаём проект и даём ему имя командой npx create-react-app project-name. После этого запускаем проект командой node index.js
• В начале нужно установить npx командой npx install, затем создать react проект командой npx create-react-app project-name. После этого для запуска проекта устанавливаем Node.js и пакетный менеджер npm. После установки запустить проект командой npm start
• Для начала нужно установить Node.js с менеджером пакетов npm. Затем нужно проверить наличие npx, и если его нет, то установить. Потом глобально устанавливаем пакет для быстрого создания приложения через команду npm install -g create-react-app.После этого в консоли нужно ввести npx create-react-app и указать имя проекта, когда проект установится нужно установить зависимости командой npm i и в конце запустить проект командой npm start

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

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

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

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

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

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

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

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

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

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

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

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

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

• Pete, Ivan
• Ivan
• Pete
• ошибка

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

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

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

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

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

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

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

• useState
• useContext
• useProps

Принцип SPA означает что …

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

Что такое состояние компонента?

• объект
• метод
• хук useState

Что такое React Hooks?

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

Зарегистрировавшийся пользователь хочет изменить данные своего профиля. Какой метод нужно использовать чтобы обновить данные пользователя на сервере?

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

Что такое RESTfull приложение?

• это веб-приложение которое следует принципам REST архитектуры
• это приложение которое использует стандартные методы для взаимодействия с API
• это приложение которое игнорирует REST архитектуру и использует свои решения

Хук … используется для создания ссылки на DOM-элемент

• useMemo
• useRef
• useState
• useDom

Методы http определяющие каким способом пользователь может взаимодействовать с сервером называются …

• методы API
• методы подключения
• методы запроса

Принцип единичной ответственности означает …

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

Какие ситуации можно решить с помощью оператора условного рендеринга? (множественный выбор или один)

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

Что такое Memoized function?

• функция созданная через хук useMemo
• Функция созданная
• функция сохраняющая результат первого вызова и возвращающая его в последствии

Состояние компонента это …

• метод
• массив
• объект
• переменная

REST - это ……..

• набор правил для именования и использования URL
• документация по созданию SPA приложений, в которой описывается
• создание элементов пользовательских интерфейсов
• это архитектурный стиль, который используется для разработки распределенных веб-сервисов

Тег input по умолчанию имеет type = …

• null
• string
• text

Элемент button в форме по умолчанию имеет type = …

• button
• reset
• submit

Что такое кэширование?

• это процесс отправки данных на сервер
• это процесс сохранения данных на быстром носителе информации
• это сохранение данных в состоянии компонента

Что будет выведено в консоль let name = ‘Alex’ useEffect(() => { name = ‘Ivan’ }) console.log(name)

• Alex
• Ivan
• ошибку

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

• useContext
• useEffect
• useState

Сколько форм можно создать в веб-приложении?

• одну
• не более пяти
• сколько угодно

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

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

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

• Props Drilling
• Props
• Hook
• Props Throw

Когда срабатывает метод жизненного цикла componentWillMount?

• перед удалением компонента
• в момент монтирования компонента
• перед монтированием компонента

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

• put
• shift
• splice

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

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

За что отвечает компонент Switch?

• За рендер всех компонентов на страницу
• За роутинг между страницами
• За выбор одного из нескольких маршрутов и отображение соответствующего компонента

Для работы с состоянием компонента используется хук …

• useMemo
• useEffect
• useState
• useCallback

Глобальный объект … содержит информацию о HTML документе, который отображается в браузере.

• document
• navigator
• location

В каком порядке создаются значения при использовании хука useState?

• переменная,переменная
• переменная,функция
• функция,переменная
• функция, функция

В каком аргументе элемента Link нужно указывать маршрут?

• href
• src
• to

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

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

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

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

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

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

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

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

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

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

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

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

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

• No
• Yes
• Ошибка

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

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

• Для создания общей области видимости с модулем

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

• Получения функционала из других модулей

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

• True, False

• True, True

• False, True

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

• Процесс запускаемый на стадии парсинга, позволяющий выполнить функции объявленные при помощи function declaration

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

• Этап работы 'сборщика мусора" на котором происходит удаление всех непомеченных значений

Что такое список в React?

• паттерн программирования
• переданное значение
• компонент отображающий данные

Что будет выведено в консоль?const [name, setName] = useState(‘John’)console. log(name)

• undefined
• null
• John
• [object, object]

Что будет выведено в консоль let name = ‘Alex’ useEffect(() = ˃ { name = ‘Ivan’}) console. log(name)

• Alex
• Ivan
• ошибку

Обёртки над полями ввода в React - это …

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

Input значение которого управляется внешним значением называется …

• управляемый input
• зависимый input
• дочерний input

React компонент представляет из себя …

• объект
• функцию или класс
• библиотеку

Нужно ли пользоваться Node.js для установки React приложения?

• да, Node.js и его менеджер пакетов npm позволяют создать React-приложение
• нет, достаточно скачать установочный файл react.exe и установить react на пк
• да, Node.js это движок фреймворка React

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

• object
• this
• prototype

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

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

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

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

Какие значения возвращают следующие выражения?
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

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

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

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

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

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

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

Вы работаете над веб-приложением, которое использует jаvascript для отображения данных на странице. Данные поступают с удаленного сервера с помощью AJAX-запросов. Вопросы: Как обрабатывать ошибки в jаvascript? Как оптимизировать производительность jаvascript-кода и улучшить его читаемость?

• Обработать ошибки можно используя конструкцию try catch или подключив дополнительные библиотеки. Чтобы улучшить производительность используется минификация и сжатие кода, кэширование. Чтобы улучшить читаемость можно использовать комментарии, структурирование кода и общепринятые соглашения о кодировании
• Обработка ошибок в jаvascript производится при помощи встроенных функций и методов. Для улучшения производительности код пишут в одном файле. Улучшить читаемость можно при помощи использования современного синтаксиса
• Обработать ошибки в JS можно при помощи if else. Нельзя напрямую улучшить производительность кода, этим занимаются разработчики движка js. Читаемость кода можно улучшить дополнительными отступами и пробелами, а также используя комментарии
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• this
• new
• prototype

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

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

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

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

Какие значения возвращают следующие выражения?
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

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

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

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

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

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

• form
• footer
• body

Что такое URL?

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

Что такое API?

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

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

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

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

• useState
• useEffect
• useRender

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

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

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

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

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

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

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

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

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

• CSS
• HTML
• JSON
• Table

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

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

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

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

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

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

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

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

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

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

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

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