Javascript RU Flashcards
В чем разница между использованием «var», «let» и «const»?
Разница в уровне охвата
Как показать пользователю уведомление о том, что в его браузере не включен javascript?
Your browser does not support JavaScript!
OBS!: eto v HTML
Почему важен порядок добавления скриптов на страницу?
Например, следующий фрагмент приведет к ошибке «Uncaught ReferenceError: jQuery is not defined»
Как проверить, что переменная не является неопределенной? Как проверить, что свойство существует в объекте?
if (typeof someVar !== "undefined") {
// делаем что-то
}
// проверяем свойство с наследованием
if ('someProperty' in object) {
// делаем что-то
}
// проверяем свойство без наследования
if (object.hasOwnProperty('someProperty')) {
// делаем что-то
}
Написать простую функцию, чтобы проверить, является ли число целым?
function verifyInt(num) {
return num % 1 === 0;
}Как остановить функцию setInterval?
// повторяем с интервалом в 1 секунду
let intervalId = setInterval(() => console.log('tick'), 1000);
// остановимся через 10 секунд
setTimeout(() => { clearInterval(intervalId); console.log('stop'); }, 10000);
Список примитивных типов в JavaScript
Тип числа представляет как целые числа, так и числа с плавающей запятой.
Тип строки должен быть заключен в кавычки.
Логический тип имеет только два значения: true и false.
Разница между Java и JavaScript
Язык программирования JavaScript разработан Netscape, Inc и не является частью платформы Java.
Приложения Java запускаются на виртуальной машине или в веб-браузере, а JavaScript – в веб-браузере и некоторых серверных средах.
Код Java компилируется, тогда как код JavaScript находится в тексте и на веб-странице.
JavaScript – это язык сценариев ООП, тогда как Java – язык программирования ООП.
Что такое функция имени (Именованная функция) в JavaScript и как ее определить?
Именованная функция объявляет имя, как только оно определено. Ее можно определить с помощью ключевого слова функции как:
function named(){
// write code here
}
Перепишите пример, используя promise:
const printSec = (number, callback) => {
setTimeout(() => {
console.log(`${number} sec`)
callback()
},
1000)
}
printSec(1, () => {
printSec(2, () => {
printSec(3, () => {})
})
})
это достаточно современный подход написания асинхронного кода. Ранее использовался подход с использованием колбеков. При большой вложенности получался т.н. «ад обратных вызовов».
При использовании промисов код выглядит читабельно и удобен для редактирования:
const printSec = (number) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`${number} sec`)
resolve()
},
1000)
})
}
printSec(1)
.then(() => printSec(2))
.then(() => printSec(3))
Как работает прототип?
Прототипное наследование - Каждый объект в JS имеет базовый объект – прототип. Если свойство не находится в исходном объекте, то поиск продолжается в его “родительском” объекте.
Установить прототип объекта можно только во время создания объекта: если вы создаете новый объект с помощью новой Func(), свойство объекта [[Prototype]] будет установлено на объект, на который ссылается Func.prototype.
Цикл событий - Что произойдет со страничкой в результате выполнения этого кода?
function foo() {
setTimeout(foo, 0);
}
foo();
Ответ: ничего особенного. Задачи будут добавляться в цикл событий, но они не вызовут ни переполнения стека, ни бесконечной очереди, которая затормозит весь сайт.
Так как макротаски после выполнения пропускают один цикл для отрисовки контента и выполнения микротасков,
в отличие от микротасков, которые выполняются все в очереди перед тем, как передать управление следующему пункту в цикле событий.
function foo() {
return Promise.resolve(1).then(foo);
}
foo();
Выполнение данного кода вызовет затормаживание интерфейса, т.к. при выполнении одного микротаска в очередь добавляется новый микротаск, который сразу же должен выполниться, без передачи управления другому пункту цикла событий.
Какие типы данных представлены в javascript?
Чтобы узнать тип переменной JavaScript, мы можем использовать оператор typeof.
String – представляет собой серию символов и записывается в кавычках. Строку можно представить в одинарных или двойных кавычках.
Number – представляет собой число и может быть записано с десятичными знаками или без них.
BigInt – используется для хранения чисел, превышающих ограничение типа данных Number. Он может хранить большие целые числа и представлен добавлением «n» к целочисленному литералу.
Boolean – представляет собой логическую сущность и может иметь только два значения: истина или ложь. Логические значения обычно используются для условного тестирования.
Undefined – когда переменная объявлена, но не назначена, она имеет значение undefined, и ее тип также не определен.
Null – представляет несуществующее или недопустимое значение.
Symbol – это новый тип данных, представленный в версии JavaScript для ES6. Он используется для хранения анонимного и уникального значения.
Object – используется для хранения коллекции данных.Важно помнить, что любой тип данных, который не является примитивным типом данных, относится к типу объекта в javascript.
Array – это не отдельный тип данных, на самом деле это Object. typeof null равен “object” и это нужно учитывать в проверках.
Как найти сумму элементов массива, если вложенность массива неизвестна?
arraySum([[1, 2, [3, 4]], [9], [10, 12]])
// используя рекурсию
function arraySum(arr) {
let sum = 0;
arr.map((item) => {
if (Array.isArray(item)) {
sum += arraySum(item);
} else {
sum += item;
}
});
return sum;
}
console.log(arraySum([[1, 2, [3, 4]], [9], [10, 12]]));
В чем причина помещения всего содержимого исходного файла JavaScript в книгу функций?
Причина помещения всего содержимого исходного файла JavaScript в книгу функций -
Этот метод создает замыкание вокруг всего содержимого файла, что создает частное пространство имен и тем самым помогает избежать потенциальных конфликтов имен между различными модулями и библиотеками JavaScript.
Еще одна особенность этого метода – легко создать псевдоним для глобальной переменной. Это часто используется в плагинах jQuery.
Перечислите специальные числовые значения
Infinity больше любого числа
-Infinity меньше любого числа
NaN представляет собой ошибку (не число)
Какое предназначение файла package-lock.json?
package-lock.json автоматически создается для любых операций, когда npm изменяет дерево node_modules или package.json. Он описывает точное дерево, которое было сгенерировано, так что последующие установки могут генерировать идентичные деревья, независимо от промежуточных обновлений зависимостей.
Что такое запросы между источниками и CDN?
Запросы между источниками и CDN -
Если мы сделаем выборку с произвольного веб-сайта, это, вероятно, не удастся. Основная концепция здесь – триплет домен/порт/протокол.
Запросы из разных источников, отправленные в другой домен (даже субдомен), протокол или порт требуют специальных заголовков с удаленной стороны. Эта политика называется «CORS»: совместное использование ресурсов между источниками.
CDN (сеть доставки контента) – это группа серверов, расположенных во многих местах. Эти серверы хранят дублированные копии данных, чтобы серверы могли выполнять запросы данных в зависимости от того, какие серверы находятся ближе всего к соответствующим конечным пользователям. CDN обеспечивают быстрое обслуживание и меньше подвержены влиянию высокого трафика.
В чем смысл оборачивания всего содержимого JavaScript-файла в функцию? IIFE
Этот шаблон называется IIFE - Immediately Invoked Function Expression (немедленно вызываемое функциональное выражение). Этот подход позволяет:
обеспечить коду собственный блок видимости, то-есть контекст выполнения
избежать загрязнения глобальной области видимости глобальными переменными
избежать неумышленного переопределения уже существующих переменных в глобальной области видимости
В чем смысл и польза указания use strict в начале JavaScript-файла?
Команда use strict включает так называемый строгий режим. В этом режиме предупреждения становятся ошибками, что помогает в написании более чистого и безопасного кода, менее уязвимого к ошибкам в продакшене.
Что такое NaN? Какого типа это значение? Как можно узнать, равно ли значение переменной NaN?
NaN расшифровывается как “Not A Number”, это “falsey” (ложное) значение.
Выражение typeof NaN возвращает тип Number.
Проверить значение переменной на соответствие NaN можно, воспользовавшись встроенным методом isNaN() или используя оператор тройного равенства ===.
Что такое замыкание в JavaScript? Приведите пример.
Замыкание в JavaScript - это комбинация функции и лексического окружения, в котором она была определена. Это позволяет ей обращаться к переменным и функциям этого лексического окружения в дальнейшем.
В следующем примере мы определяем функцию makeCounter(), которая фактически является фабричной функцией. При вызове она возвращает дочернюю функцию, которая имеет доступ к лексическому окружению внешней функции, то-есть функции makeCounter().
Таким образом, возвращаемая функция запоминает переменную counter и в последующем изменяет ее значение.
function makeCounter(initial = 0) {
let counter = initial;
return function() {
return counter += 1;
}
}
const counterA = makeCounter(0);
console. log(counterA()); // 1
console. log(counterA()); // 2
const counterB = makeCounter(100);
console. log(counterB()); // 101
console. log(counterB()); // 102
Как можно клонировать объект?
Можно использовать оператор остатка ….
Можно использовать Object.assign(newObj, oldObj).
Но эти подходы не позволяют выполнить глубокое клонирование. Поэтому, если нам нужно клонировать объект со вложенными объектами, мы можем использовать либо метод какой-либо библиотеки (привет, lodash), либо сделать это средствами встроенного объекта JSON.
JSON.parse(JSON.stringify(objectToClone))
Как можно добавить элемент в начало и в конец массива?
Чтобы добавить элемент в начало массива, можно использовать - Array.prototype.unshift()
Для добавления элемента в конец массива подойдет - Array.prototype.push()
В чем разница между undefined и is not defined?
undefined - это значение, присваемое объявленной, но не проинициализированной переменной.
Мы получаем undefined, обращаясь к существующей переменной. А в случае обращения к несуществующей (необъявленной) переменной, мы получим ошибку is not defined.
Как проверить, является ли объект массивом?
Для этого можно использовать встроенный метод Array.isArray().
Что такое hoisting (поднятие) в JavaScript?
Поднятие - это поведение компилятора JavaScript, заключающееся в поднятии объявлений переменных и функций в начало области видимости.
Благодаря поднятию мы можем использовать функции и переменные до их объявления в коде. Однако, следовать учитывать, что поднимаются только объявления, но не присваивания значений.
По этой причине, например, мы можем использовать до объявления функцию, объявленную через Function Declaration, но не можем ту, которая объявлена через Function Expression.
Что такое this?
this указывает на объект области видимости во время выполнения. По умолчанию this указывает на глобальный объект. В браузере выражение this === window будет истинно.
Как работает прототипное наследование?
Если отвечать кратко, в JavaScript все является объектами. Эти объекты связаны цепочками прототипов, по которым им передаются методы и свойства. При обращении к свойству или методу объекта сначала происходит поиск этого свойства у самого объекта. В случае неудачи поиск перенаправляется в его прототип, затем в прототип прототипа и так далее, пока искомое свойство не будет найдено, либо пока не закончится цепочка прототипов.
Объясните, почему запись function foo(){}() вызывает ошибку и не работает, как IIFE?
Здесь дело в том, что круглые скобки вызова функции добавлены сразу после Function Declaration. Однако, они могут следовать только за выражением (expression). Поэтому мы должны либо прибегнуть к варианту с Function Expression, либо обернуть Function Declaration в скобки, тем самым превратив его в выражение.
const foo = function(){}()
// либо
(function foo(){})()
// либо со стрелочной функцией
(() => {})()
В чем разница между null, undefined и undeclared?
null - это в прямом смысле “ничего”. Можно использовать это значение в качестве плейсхолдера.
undefined - это значение для случая “объявлено, но не инициализировано”.
undeclared - это ошибка, возникающая в случае обращении к необъявленной переменной.
В каких случаях используются анонимные функции?
Анонимные функции чаще всего используются в качестве функций обратных вызовов. Также, каждая стрелочная функция является анонимной.
