Я ежедневно публикую вопросы по JavaScript с вариантами ответов в своем Instagram, которые дублируются в этом репозитории.
От азов к сложным вопросам: проверь, как хорошо ты знаешь JavaScript, освежи свои знания или приготовься к собеседованию! 💪 🚀 Я дополняю этот репозиторий каждую неделю новыми вопросами.
Ответы находятся в свернутой секции ниже вопросов. Просто нажми на "Ответ", чтобы развернуть. Удачи! ❤️
中文版本
Western Balkan
Deutsch
Tiếng Việt
日本語
Українська мова
function sayHi() {
console.log(name);
console.log(age);
var name = "Lydia";
let age = 21;
}
sayHi();
- A:
Lydia
иundefined
- B:
Lydia
иReferenceError
- C:
ReferenceError
и21
- D:
undefined
иReferenceError
Ответ
Внутри функции мы сперва определяем переменную name
с помощью ключевого слова var
. Это означает, что переменная будет поднята (область памяти под переменную будет выделена во время фазы создания) со значением undefined
по умолчанию, до тех пора пока исполнение кода не дойдет до строчки, где определяется переменная. Мы еще не определили значение name
когда пытаемся вывести её в консоль, поэтому в консоли будет undefined
.
Переменные, определенные с помощью let
(и const
), также поднимаются, но в отличие от var
, не инициализируются. Доступ к ним не возможен до тех пор, пока не выполнится строка их определения (инициализации). Это называется "временная мертвая зона". Когда мы пытаемся обратиться к переменным до того момента как они определены, JavaScript выбрасывает исключение ReferenceError
.
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
- A:
0 1 2
и0 1 2
- B:
0 1 2
и3 3 3
- C:
3 3 3
и0 1 2
Ответ
Из-за очереди событий в JavaScript, функция setTimeout
вызывается после того как цикл будет завершен. Так как переменная i
в первом цикле была определена с помощью var
, она будет глобальной. В цикле мы каждый раз увеличиваем значение i
на 1
, используя унарный оператор ++
. К моменту выполнения функции setTimeout
значение i
будет равно 3
в первом примере.
Во втором цикле переменная i
определена с помощью let
. Такие переменные (а также const
) имеют блочную область видимости (блок это что угодно между { }
). С каждой итерацией i
будет иметь новое значение, и каждое значение будет замкнуто в своей области видимости внутри цикла.
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius
};
shape.diameter();
shape.perimeter();
- A:
20
и62.83185307179586
- B:
20
иNaN
- C:
20
и63
- D:
NaN
и63
Ответ
Заметь, что diameter
это обычная функция, в то время как perimeter
это стрелочная функция.
У стрелочных функций значение this
указывает на окружающую область видимости, в отличие от обычных функций! Это значит, что при вызове perimeter
значение this
у этой функции указывает не на объект shape
, а на внешнюю область видимости (например, window).
У этого объекта нет ключа radius
, поэтому возвращается undefined
.
+true;
!"Lydia";
- A:
1
иfalse
- B:
false
иNaN
- C:
false
иfalse
Ответ
Унарный плюс приводит операнд к числу. true
это 1
, а false
это 0
.
Строка 'Lydia'
это "истинное" значение. На самом деле мы спрашиваем "является ли это истинное значение ложным"? Ответ: false
.
const bird = {
size: "small"
};
const mouse = {
name: "Mickey",
small: true
};
- A:
mouse.bird.size
- B:
mouse[bird.size]
- C:
mouse[bird["size"]]
- D: Все варианты валидны
Ответ
В JavaScript все ключи объекта являются строками (кроме Symbol). И хотя мы не набираем их как строки, они всегда преобразовываются к строкам под капотом.
JavaScript интерпретирует (или распаковывает) операторы. При использовании квадратных скобок JS замечает [
и продолжает пока не встретит ]
. Только после этого он вычислит то, что находится внутри скобок.
mouse[bird.size]
: Сперва определяется bird.size
, которое равно "small"
. mouse["small"]
возвращает true
.
Но с записью через точку так не происходит. У mouse
нет ключа bird
. Таким образом, mouse.bird
равно undefined
. Затем мы запрашиваем ключ size
, используя точечную нотацию: mouse.bird.size
. Так как mouse.bird
это undefined
, мы запрашиваем undefined.size
. Это не является валидным, и мы получаем ошибку типа Cannot read property "size" of undefined
.
let c = { greeting: "Hey!" };
let d;
d = c;
c.greeting = "Hello";
console.log(d.greeting);
- A:
Hello
- B:
Hey!
- C:
undefined
- D:
ReferenceError
- E:
TypeError
Ответ
В JavaScript все объекты являются ссылочными типами данных.
Сперва переменная c
указывает на объект. Затем мы указываем переменной d
ссылаться на тот же объект, что и c
.
Когда ты изменяешь один объект, то изменяются значения всех ссылок, указывающих на этот объект.
let a = 3;
let b = new Number(3);
let c = 3;
console.log(a == b);
console.log(a === b);
console.log(b === c);
- A:
true
false
true
- B:
false
false
true
- C:
true
false
false
- D:
false
true
true
Ответ
new Number()
это встроенный конструктор функции. И хотя он выглядит как число, это не настоящее число: у него есть ряд дополнительных фич и это объект.
Оператор ==
разрешает приведение типов, он проверяет равенство значений. Оба значения равны 3
, поэтому возвращается true
.
При использовании оператора ===
значение и тип должны быть одинаковыми. Но в нашем случае это не так: new Number()
это не число, это объект. Оба возвращают false
.
class Chameleon {
static colorChange(newColor) {
this.newColor = newColor;
return this.newColor;
}
constructor({ newColor = "green" } = {}) {
this.newColor = newColor;
}
}
const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");
- A:
orange
- B:
purple
- C:
green
- D:
TypeError
Ответ
Функция colorChange
является статичной. Статичные методы не имеют доступа к экземплярам класса. Так как freddie
это экземпляр, то статичный метод там не доступен. Поэтому выбрасывается ошибка TypeError
.
let greeting;
greetign = {}; // Опечатка!
console.log(greetign);
- A:
{}
- B:
ReferenceError: greetign is not defined
- C:
undefined
Ответ
В консоли выведется объект, потому что мы только что создали пустой объект в глобальном объекте! Когда мы вместо greeting
написали greetign
, интерпретатор JS на самом деле выполнил global.greetign = {}
(или window.greetign = {}
в браузере).
Нужно использовать "use strict"
, чтобы избежать такого поведения. Эта запись поможет быть уверенным в том, что переменная была определена перед тем как ей присвоили значение.
function bark() {
console.log("Woof!");
}
bark.animal = "dog";
- A: Ничего, всё в порядке!
- B:
SyntaxError
. Нельзя добавлять свойства функциям таким способом. - C:
undefined
- D:
ReferenceError
Ответ
В JavaScript это возможно, т.к. функции это объекты! (Всё есть объект кроме примитивов).
Функция — это специальный тип объекта, который можно вызвать. Кроме того, функция — это объект со свойствами. Свойство такого объекта нельзя вызвать, так как оно не является функцией.
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
return `${this.firstName} ${this.lastName}`;
}
console.log(member.getFullName());
- A:
TypeError
- B:
SyntaxError
- C:
Lydia Hallie
- D:
undefined
undefined
Ответ
Нельзя добавлять свойства конструктору, как обычному объекту. Если нужно добавить фичу всем объектам, то необходимо использовать прототипы. В данном случае
Person.prototype.getFullName = function () {
return `${this.firstName} ${this.lastName}`;
}
сделает метод member.getFullName()
рабочим. В чем тут преимущество? Предположим, что мы добавили этот метод к конструктору. Возможно, не каждому экземпляру Person
нужен этот метод. Это приведет к большим потерям памяти, т.к. все экземпляры будут иметь это свойство. Напротив, если мы добавим этот метод только к прототипу, у нас будет только одно место в памяти, к которому смогут обращаться все экземпляры!
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");
console.log(lydia);
console.log(sarah);
- A:
Person {firstName: "Lydia", lastName: "Hallie"}
иundefined
- B:
Person {firstName: "Lydia", lastName: "Hallie"}
иPerson {firstName: "Sarah", lastName: "Smith"}
- C:
Person {firstName: "Lydia", lastName: "Hallie"}
и{}
- D:
Person {firstName: "Lydia", lastName: "Hallie"}
иReferenceError
Ответ
Для sarah
мы не использовали ключевое слово new
. Использование new
приводит к созданию нового объекта. Но без new
он указывает на глобальный объект!
Мы указали, что this.firstName
равно "Sarah"
и this.lastName
равно "Smith"
. На самом деле мы определили global.firstName = 'Sarah'
и global.lastName = 'Smith'
. sarah
осталась undefined
.
- A: Цель > Захват > Всплытие
- B: Всплытие > Цель > Захват
- C: Цель > Всплытие > Захват
- D: Захват > Цель > Всплытие
Ответ
Во время фазы захвата событие распространяется с элементов родителей до элемента цели. После достижения цели начинается фаза всплытия.
- A: Да
- B: Нет
Ответ
Все объекты имеют прототипы, кроме базового объекта. Базовый объект имеет доступ до некоторых методов и свойств, таких как .toString
. Именно поэтому мы можем использовать встроенные методы JavaScript! Все эти методы доступны в прототипе. Если JavaScript не может найти метод непосредственно у объекта, он продолжает поиск по цепочке прототипов пока не найдет.
function sum(a, b) {
return a + b;
}
sum(1, "2");
- A:
NaN
- B:
TypeError
- C:
"12"
- D:
3
Ответ
JavaScript это динамически типизированный язык: мы не определяем тип переменных. Переменные могут автоматически быть преобразованы из одного типа в другой без нашего участия, что называется неявным приведением типов. Приведение это преобразование из одного типа в другой.
В этом примере JavaScript сконвертировал число 1
в строку, чтобы операция внутри функции имела смысл и вернула значение. Во время сложения числа (1
) и строки ('2'
) число преобразовывается к строке. Мы можем конкатенировать строки вот так: "Hello" + "World"
. Таким образом, "1" + "2"
возвращает "12"
.
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
- A:
1
1
2
- B:
1
2
2
- C:
0
2
2
- D:
0
1
2
Ответ
Постфиксный унарный оператор ++
:
- Возвращает значение (
0
) - Инкрементирует значение (теперь число равно
1
)
Префиксный унарный оператор ++
:
- Инкрементирует значение (число теперь равно
2
) - Возвращает значение (
2
)
Результат: 0 2 2
.
function getPersonInfo(one, two, three) {
console.log(one);
console.log(two);
console.log(three);
}
const person = "Lydia";
const age = 21;
getPersonInfo`${person} is ${age} years old`;
- A:
"Lydia"
21
["", " is ", " years old"]
- B:
["", " is ", " years old"]
"Lydia"
21
- C:
"Lydia"
["", " is ", " years old"]
21
Ответ
При использовании тегированных шаблонных литералов первым аргументом всегда будет массив строковых значений. Оставшимися аргументами будут значения переданных выражений!
function checkAge(data) {
if (data === { age: 18 }) {
console.log("Ты взрослый!");
} else if (data == { age: 18 }) {
console.log("Ты все еще взрослый.");
} else {
console.log(`Хмм.. Кажется, у тебя нет возраста.`);
}
}
checkAge({ age: 18 });
- A:
Ты взрослый!
- B:
Ты все еще взрослый.
- C:
Хмм.. Кажется, у тебя нет возраста.
Ответ
В операциях сравнения примитивы сравниваются по их значениям, а объекты по ссылкам. JavaScript проверяет, чтобы объекты указывали на одну и ту же область памяти.
Сравниваемые объекты в нашем примере не такие: объект, переданный в качестве параметра, указывает на другую область памяти, чем объекты, используемые в сравнениях.
Поэтому { age: 18 } === { age: 18 }
и { age: 18 } == { age: 18 }
возвращают false
.
function getAge(...args) {
console.log(typeof args);
}
getAge(21);
- A:
"number"
- B:
"array"
- C:
"object"
- D:
"NaN"
Ответ
Оператор распространения (...args
) возвращает массив с аргументами. Массив это объект, поэтому typeof args
возвращает "object"
.
function getAge() {
"use strict";
age = 21;
console.log(age);
}
getAge();
- A:
21
- B:
undefined
- C:
ReferenceError
- D:
TypeError
Ответ
Используя "use strict"
, можно быть уверенным, что мы по ошибке не побъявим глобальные переменные. Мы ранее нигде не объявляли переменную age
, поэтому с использованием "use strict"
возникнет ReferenceError
. Без использования "use strict"
ошибки не возникнет, а переменная age
добавится в глобальный объект.
const sum = eval("10*10+5");
- A:
105
- B:
"105"
- C:
TypeError
- D:
"10*10+5"
Ответ
eval
выполняет код, переданный в виде строки. Если это выражение (как в данном случае), то вычисляется выражение. Выражение 10 * 10 + 5
вернет число 105
.
sessionStorage.setItem("cool_secret", 123);
- A: Всегда, данные не потеряются.
- B: Пока пользователь не закроет вкладку.
- C: Пока пользователь не закроет браузер, а не только вкладку.
- D: Пока пользователь не выключит компьютер.
Ответ
Данные, сохраненные в sessionStorage
очищаются после закрытия вкладки.
При использовании localStorage
данные сохраняются навсегда. Очистить их можно, например, используя localStorage.clear()
.
var num = 8;
var num = 10;
console.log(num);
- A:
8
- B:
10
- C:
SyntaxError
- D:
ReferenceError
Ответ
С помощью ключевого слова var
можно определять сколько угодно переменных с одним и тем же именем. Переменная будет хранить последнее присвоенное значение.
Но такой трюк нельзя проделать с let
и const
, т.к. у них блочная область видимости.
const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);
obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);
- A:
false
true
false
true
- B:
false
true
true
true
- C:
true
true
false
true
- D:
true
true
true
true
Ответ
Все ключи объектов (кроме Symbols) являются строками, даже если заданы не в виде строк. Поэтому obj.hasOwnProperty('1')
так же возвращает true.
Но это не работает для set
. Значения '1'
нет в set
: set.has('1')
возвращает false
. Но set.has(1)
вернет true
.
const obj = { a: "one", b: "two", a: "three" };
console.log(obj);
- A:
{ a: "one", b: "two" }
- B:
{ b: "two", a: "three" }
- C:
{ a: "three", b: "two" }
- D:
SyntaxError
Ответ
Если есть два ключа с одинаковым именем, то ключ будет перезаписан. Его позиция сохранится, но значением будет последнее указанное.
- A: Да
- B: Нет
- C: Это зависит
Ответ
Базовый контекст исполнения это глобальный контекст исполнения: это то, что доступно где угодно в твоем коде.
for (let i = 1; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}
- A:
1
2
- B:
1
2
3
- C:
1
2
4
- D:
1
3
4
String.prototype.giveLydiaPizza = () => {
return "Just give Lydia pizza already!";
};
const name = "Lydia";
name.giveLydiaPizza();
- A:
"Just give Lydia pizza already!"
- B:
TypeError: not a function
- C:
SyntaxError
- D:
undefined
Ответ
String
это встроенный конструктор, к которому можно добавлять свойства. Я добавила метод к его прототипу. Строки-примитивы автоматически конвертируются к строкам-объектам. Поэтому все строки (строковые объекты) имеют доступ к этому методу!
const a = {};
const b = { key: "b" };
const c = { key: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]);
- A:
123
- B:
456
- C:
undefined
- D:
ReferenceError
Ответ
Ключи объекта автоматически конвертируются в строки. Мы собираемся добавить объект в качестве ключа к объекту a
со значением 123
.
Тем не менее, когда мы приводим объект к строке, он становится "[object Object]"
. Таким образом, мы говорим, что a["Object object"] = 123
. Потом мы делаем то же самое. c
это другой объект, который мы неявно приводим к строке. Поэтому a["Object object"] = 456
.
Затем, когда мы выводим a[b]
, мы имеем в виду a["Object object"]
. Мы только что установили туда значение 456
, поэтому в результате получаем 456
.
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");
bar();
foo();
baz();
- A:
First
Second
Third
- B:
First
Third
Second
- C:
Second
First
Third
- D:
Second
Third
First
Ответ
Мы вызываем функцию setTimeout
первой. Тем не менее, она выводится в консоль последней
Это происходит из-за того, что в браузерах у нас есть не только рантайм движок, но и WebAPI
. WebAPI
предоставляет нам функцию setTimeout
и много других возможностей. Например, DOM.
После того как коллбек отправлен в WebAPI
, функция setTimeout
(но не коллбек!) вынимается из стека.
Теперь вызывается foo
, и "First"
выводится в консоль.
foo
достается из стека, и вызывается baz
. "Third"
выводится в консоль.
WebAPI не может добавлять содержимое в стек когда захочет. Вместо этого он отправляет коллбек-функцию в так называемую очередь.
Здесь на сцену выходит цикл событий (event loop). Event loop проверяет стек и очередь задач. Если стек пустой, то он берет первый элемент из очереди и отправляет его в стек.
Вызывается bar
, в консоль выводится "Second"
и эта функция достается из стека.
<div onclick="console.log('first div')">
<div onclick="console.log('second div')">
<button onclick="console.log('button')">
Кликни!
</button>
</div>
</div>
- A: Внешний
div
- B: Внутренний
div
- C:
button
- D: Массив со всеми вложенными элементами
Ответ
Целью события является самый глубокий вложенный элемент. Остановить распространение событий можно с помощью event.stopPropagation
<div onclick="console.log('div')">
<p onclick="console.log('p')">
Кликни меня!
</p>
</div>
- A:
p
div
- B:
div
p
- C:
p
- D:
div
Ответ
После клика по p
будет выведено p
и div
. В цикле жизни события есть три фазы: захват, цель и всплытие. По умолчанию обработчики событий выполняются на фазе всплытия (если не установлен параметр useCapture
в true
). Всплытие идет с самого глубокого элемента вверх.
const person = { name: "Lydia" };
function sayHi(age) {
console.log(`${this.name} is ${age}`);
}
sayHi.call(person, 21);
sayHi.bind(person, 21);
- A:
undefined is 21
Lydia is 21
- B:
function
function
- C:
Lydia is 21
Lydia is 21
- D:
Lydia is 21
function
Ответ
В обоих случаях мы передаем объект, на который будет указывать this
. Но .call
выполняется сразу же!
.bind
возвращает копию функции, но с привязанным контекстом. Она не выполняется незамедлительно.
function sayHi() {
return (() => 0)();
}
typeof sayHi();
- A:
"object"
- B:
"number"
- C:
"function"
- D:
"undefined"
Ответ
Функция sayHi
возвращает значение, возвращаемое из немедленно вызываемого функционального выражения (IIFE). Результатом является 0
типа "number"
.
Для информации: в JS 7 встроенных типов: null
, undefined
, boolean
, number
, string
, object
, и symbol
. "function"
не является отдельным типом, т.к. функции являются объектами типа "object"
.
0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;
- A:
0
,''
,undefined
- B:
0
,new Number(0)
,''
,new Boolean(false)
,undefined
- C:
0
,''
,new Boolean(false)
,undefined
- D: Все являются "ложными"
Ответ
Есть только шесть "ложных" значений:
undefined
null
NaN
0
''
(empty string)false
Конструкторы функций, такие как new Number
и new Boolean
являются "истинными".
console.log(typeof typeof 1);
- A:
"number"
- B:
"string"
- C:
"object"
- D:
"undefined"
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
- A:
[1, 2, 3, 7 x null, 11]
- B:
[1, 2, 3, 11]
- C:
[1, 2, 3, 7 x empty, 11]
- D:
SyntaxError
Ответ
Когда в массив добавляется значение, которое выходит за пределы длины массива, JavaScript создает так называемые "пустые ячейки". На самом деле они имеют значения undefined
, но в консоли выводятся так:
[1, 2, 3, 7 x empty, 11]
в зависимости от окружения (может отличаться для браузеров, Node, и т.д.).
(() => {
let x, y;
try {
throw new Error();
} catch (x) {
(x = 1), (y = 2);
console.log(x);
}
console.log(x);
console.log(y);
})();
- A:
1
undefined
2
- B:
undefined
undefined
undefined
- C:
1
1
2
- D:
1
undefined
undefined
Ответ
Блок catch
получает аргумент x
. Это не тот же x
, который определен в качестве переменной перед строкой try {
Затем мы присваиваем этому аргументу значение 1
и устанавливаем значение для переменной y
. Потом выводим в консоль значение аргумента x
, которое равно 1
.
За пределами блока catch
переменная x
все еще undefined
, а y
равно 2
. Когда мы вызываем console.log(x)
за пределами блока catch
, этот вызов возвращает undefined
, а y
возвращает 2
.
- A: примитив или объект
- B: функция или объект
- C: вопрос с подвохом! только объекты
- D: число или объект
Ответ
В JavaScript есть только примитивы и объекты.
Типы примитивов: boolean
, null
, undefined
, bigint
, number
, string
, и symbol
.
Отличием примитива от объекта является то, что примитивы не имеют свойств или методов. Тем не менее, 'foo'.toUpperCase()
преобразуется в 'FOO'
и не вызывает TypeError
. Это происходит потому, что при попытке получения свойства или метода у примитива (например, строки), JavaScript неявно обернет примитив объектом, используя один из классов-оберток (например, String
), а затем сразу же уничтожит обертку после вычисления выражения. Все примитивы кроме null
и undefined
ведут себя таким образом.
[[0, 1], [2, 3]].reduce(
(acc, cur) => {
return acc.concat(cur);
},
[1, 2]
);
- A:
[0, 1, 2, 3, 1, 2]
- B:
[6, 1, 2]
- C:
[1, 2, 0, 1, 2, 3]
- D:
[1, 2, 6]
Ответ
[1, 2]
- начальное значение, с которым инициализируется переменная acc
. После первого прохода acc
будет равно [1,2]
, а cur
будет [0,1]
. После конкатенации результат будет [1, 2, 0, 1]
.
Затем acc
равно [1, 2, 0, 1]
, а cur
равно [2, 3]
. После слияния получим [1, 2, 0, 1, 2, 3]
.
!!null;
!!"";
!!1;
- A:
false
true
false
- B:
false
false
true
- C:
false
true
true
- D:
true
true
false
Ответ
null
- "ложный". !null
возвращает true
. !true
возвращает false
.
""
- "ложный". !""
возвращает true
. !true
возвращает false
.
1
- "истинный". !1
возвращает false
. !false
возвращает true
.
setInterval(() => console.log("Hi"), 1000);
- A: уникальный id
- B: указанное количество миллисекунд
- C: переданную функцию
- D:
undefined
Ответ
Это метод возвращает уникальный id. Этот id может быть использован для очищения интервала с помощью функции clearInterval()
.
[..."Lydia"];
- A:
["L", "y", "d", "i", "a"]
- B:
["Lydia"]
- C:
[[], "Lydia"]
- D:
[["L", "y", "d", "i", "a"]]