JavaScript Topics

Question 1

Understanding Object.is

Answer 1

Object.is метод, который был добавлен в спецификации ES6. В js нет строгой типизации переменных и параметров, поэтому два значения на равенства рекомендуется проверять через оператор эквивалентности ===. Однако, если бы мы сравнивали два NaN === NaN или +0 === -0, то он бы вернул бы нам false и true. А вот с помощью Object.is, который сравнивает является ли два значения одинаковыми по условию, например both undefined или both null, соотвественно:
console.log(Object.is(+0 , -0)); //false
console.log(Object.is(NaN, NaN)); //true

Question 2

Differences between let, var, and const

Answer 2

1. let и const имеют блочную видимость, а не функции (functional scope)
2. Повторное объявление var - мы можем дважды назвать переменную в разных частях кода одним именем и компилятор не будет ругаться
3. для var интерпретатор в JavaScript присваивает переменным значение undefined по умолчанию во время обьявления. А для let Reference Error. const нужно сразу инициализировать, иначе это приведет к ошибке SyntexError

Question 3

Temporal Dead Zone

Answer 3

Временная мертвая зона (TDZ) – это поведение, введенное в ES6, которое проявляется при попытке обратиться к переменной до ее объявления. Другими словами, во время TDZ переменные существуют, но до их объявления нельзя получить к ним доступ или присвоить им значения.

Question 4

Hoisting

Answer 4

Поднятие или hoisting — это механизм в JavaScript, в котором переменные и объявления функций, передвигаются вверх своей области видимости перед тем, как код будет выполнен.

Question 5

Polyfills

Answer 5

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

Question 6

Differences and uses of arrow functions, function expressions, and function declarations.

Answer 6

1. Стрелочные функции не имеют своего контекста this , поэтому они сохраняют текущий контекст, в котором были созданы.
2. Стрелочные функции не могут быть вызваны с new, например для создания обьектов
3. Стрелочные не имеют arguments
4. У стрелочных функций есть неявный return при определенных условиях.
5. Function Declaration – функция, объявленная в основном потоке кода.
6. Function Expression – объявление функции в контексте какого-либо выражения, например присваивания. Основное отличие между ними: функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода.
7. В строгом режиме, когда Function Declaration находится в блоке {…}, функция доступна везде внутри блока. Но не снаружи него.
8. Function Expression – условное обьявление в if

Question 7

Global scope vs. functional scope.

Answer 7

Функциональная область видимости — это область видимости в пределах тела функции. Можно сказать, что она ограничена { и } функции.
Global scope: The default scope for all code running in script mode.
Module scope: The scope for code running in module mode.

https://developer.mozilla.org/en-US/docs/Glossary/Scope

Глобальная область видимости является самой внешней областью. Она доступна для любой внутренней или локальной области видимости. В браузере глобальной является область видимости, создаваемая при загрузке JavaScript-файла, указанного в атрибуте src тега script.

Question 8

Defining function parameters

Answer 8

Параметр – это переменная, указанная в круглых скобках в объявлении функции.
Аргумент – это значение, которое передаётся функции при её вызове.

Question 9

Differences in parameters passing by value and by reference.

Answer 9

Строки, числа, логические значения передаются в функцию по значению. Иными словами при передаче значения в функцию, эта функция получает копию данного значения. Объекты и массивы представляют ссылочные типы. То есть переменная или константы, которая представляет объект или массив, по сути хранит ссылку или иными словами указатель, которые указывают на адрес в памяти, где хранится объект.

Question 10

Handling a dynamic amount of function parameters.

Answer 10

1. В JavaScript любая функция может быть вызвана с произвольным количеством аргументов.Если функция вызвана с меньшим количеством аргументов, чем указано, то отсутствующие аргументы считаются равными undefined.
2. Мы можем использовать rest parameter
3. список аргументов, с которыми вызвана функция, доступен через arguments

Question 11

Understanding context and lexical environments.

Answer 11

Лексическое окружение – объект спецификации, Объект лексического окружения состоит из двух частей:

Environment Record – объект, в котором как свойства хранятся все локальные переменные (а также некоторая другая информация, такая как значение this).

Ссылка на внешнее лексическое окружение – то есть то, которое соответствует коду снаружи (снаружи от текущих фигурных скобок).

Контекст выполнения тоже является абстрактным механизмом спецификации, как и лексическое окружение, к которому невозможно напрямую обратиться или изменить из программы.
Контекст описывает окружение в котором выполняется код (любой код имеет контекст выполнения). В каждый момент времени только один контекст выполнения выполняет код. Контекстом еще часто называют значение переменной this внутри функции.
Замыкание – это функция, которая запоминает свои внешние переменные и может получить к ним доступ.

Question 12

Differences between scope and context.

Answer 12

Область действия определяет доступность: Область действия определяет, где вы можете получить доступ к переменным в вашем коде. Это как граница вокруг определенной области.
Контекст определяет среду выполнения: Контекст относится к объекту, по отношению к которому выполняется функция. Это все равно, что спросить “кому принадлежит текущее действие?

Question 13

The mechanism of lexical environment traversal.

Answer 13

1.При запуске скрипта лексическое окружение предварительно заполняется всеми объявленными переменными.
Изначально они находятся в состоянии «Uninitialized». Это особое внутреннее состояние, которое означает, что движок знает о переменной, но на нее нельзя ссылаться, пока она не будет объявлена с помощью let. Это почти то же самое, как если бы переменная не существовала.
2. Появляется определение переменной let phrase. У неё ещё нет присвоенного значения, поэтому присваивается undefined. С этого момента мы можем использовать переменную.
3. Переменной phrase присваивается значение.
4. Переменная phrase меняет значение.

Question 14

Connection between function and its lexical environment.

Answer 14

Функция – это тоже значение, как и переменная.

Разница заключается в том, что Function Declaration мгновенно инициализируется полностью.

Когда создается лексическое окружение, Function Declaration сразу же становится функцией, готовой к использованию (в отличие от let, который до момента объявления не может быть использован).

Именно поэтому мы можем вызвать функцию, объявленную как Function Declaration, до самого её объявления. В процессе вызова функции у нас есть два лексических окружения: внутреннее (для вызываемой функции) и внешнее (глобальное): Когда код хочет получить доступ к переменной – сначала происходит поиск во внутреннем лексическом окружении, затем во внешнем, затем в следующем и так далее, до глобального.

Question 15

Design Patterns

Answer 15

YAGNI
You Aren’t Gonna Need It / Вам это не понадобится
DRY
Don’t Repeat Yourself / Не повторяйтесь
Эта концепция была впервые сформулирована в книге Энди Ханта и Дэйва Томаса «Программист-прагматик: путь от подмастерья к мастеру».
Идея вращается вокруг единого источника правды (single source of truth — SSOT).

Question 16

Web Storage API & Cookies

Answer 16

Local Storage (локальное хранилище)
Хранит данные бессрочно.
Очищается только с помощью JavaScript или очистки кэша браузера.
Хранит данные объёмом до 5 МБ, это самый большой объём из трёх вариантов хранилища.
Не поддерживается старыми браузерами, например, IE 7 и ниже.
Работает по правилу ограничения домена (same origin policy). То есть сохранённые данные доступны только для одного источника.
Session Storage (сессионное хранилище)
Хранит данные, пока продолжается текущая сессия. Когда пользователь закрывает браузер, данные становятся недоступными.
Используется контекст браузера верхнего уровня, поэтому каждая вкладка браузера хранит уникальные данные.
Объём данных больше чем в Cookie.
Не поддерживается старыми браузерами, например, IE 7 и ниже.
Cookie ( это небольшие текстовые файлы, которые веб-сайт может записать на компьютер пользователя)
Хранит данные, которые можно передавать на сервер через заголовки.
Локальное и сессионное хранилище доступны только на клиентской стороне.
Срок хранения устанавливается при создании cookie.
Объём данных не превышает 4 Кбайт.
Cookie могут быть защищёнными, в этом случае их содержимое нельзя получить на стороне клиента. Это важно для аутентификации при хранении пользовательских токенов.

Question 17

this in functions

Answer 17

1. Глобальный контекст: Если функция вызывается напрямую, она становится глобальным объектом (обычно window в браузерах).
2. Функция как метод: если функция вызывается как метод объекта, This становится этим объектом. Это происходит потому, что функция наследует контекст объекта при вызове в качестве метода.
3. у arrow функций нет своего This, поэтому они наследуют берут значение this из окружающего контекста

Question 18

Reference Type & losing this

Answer 18

Теперь ключевое слово this внутри функции ведет себя как ссылочный тип. Оно содержит ссылку на объект, с которым связана функция. Проблема возникает при попытке отсоединить эту ссылку и вызвать функцию позже. let user = {
name: “John”,
greet: function() {
console.log(this.name); // This refers to the user object here
}
};

let greet = user.greet; // Detaching the function (reference)

greet(); // This will print undefined because ‘this’ loses its reference

Question 19

Using spread operator for function arguments.

Answer 19

function sum(a, b, c){
return a+b+c;
}

const arr = [2, 4, 1];
console.log(sum(…arr));

Question 20

Array concatenation with spread operator.

Answer 20

const a = [1,2,3];
const b = [2,3,4];

const c = […a, …b];
console.log(c);

Question 21

Destructuring assignments for variables and function arguments.

Answer 21

// For variables

const numbers = [1, 2, 3, 4, 5];
const [first, second, …rest] = numbers;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

// For functions

function greet({ name, age }) {
console.log(Hello, ${name}! You are ${age} years old.);
}

const person = { name: “Bob”, age: 25 };
greet(person); // Destructures person object within the function arguments

Question 22

Utilizing Object.keys and Object.values.

Answer 22

const target = { a: 1, b: 2}

console.log(Object.keys(target));
console.log(Object.values(target));

Question 23

Working with static Object methods.

Answer 23

// Object.create();

const person = {
isHuman: true,
name: ‘John’
}

const me = Object.create(person);
me.name = ‘Katie’;
me.isHuman = true
console.log(me);

// Object.assign()

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

// Object.fromEntries()

const entries = new Map ([
[‘foo’, ‘bar’],
[‘baz’, 42],]);

const obj = Object.fromEntries(entries);
console.log(obj);

Object.defineProperty(obj, prop, descriptor) (Defines a new property directly on an object, or modifies an existing property on an object, and returns the object.)
Object.defineProperties()
Object.freeze() → only read
Object.isFrozen()
Object.seal() → read + Values of present properties can still be changed as long as they are writable.
Object.isSealed()
Object.is()
Object.preventExtensions() -> This method prevents new properties from ever being added to an object
Object.isExtensible()
bject.getPrototypeOf()
Object.setPrototypeOf()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors()

Question 24

Property flags and descriptors.

Answer 24

Помимо значения value, свойства объекта имеют три специальных атрибута (так называемые «флаги»).
writable – если true, свойство можно изменить, иначе оно только для чтения.
enumerable – если true, свойство перечисляется в циклах, в противном случае циклы его игнорируют.
configurable – если true, свойство можно удалить, а эти атрибуты можно изменять, иначе этого делать нельзя.

Question 25

Creating iterable objects and using Symbol.iterator (optional).

Answer 25

const car = {
make: “Dodge”,
model: “Charger”,
year: 1975,
Symbol.iterator {
return Object.entries(this).values();
},
};

for (const [key, val] of car){
console.log(${key} ${val});
}

Question 26

Working with Object computed properties.

Answer 26

const dynamicKey = ‘age’;
const person = {
name: ‘John’,
[dynamicKey]: 30
};

console.log(person);

Question 27

Copying and modifying arrays.

Answer 27

// 1. slice()
const a = [1,2,3,5];
const b = a.slice();
console.log(b);

// 2. concat
const array1 = [‘a’, ‘b’, ‘c’];
const array2 = [‘d’, ‘e’, ‘f’];
const array3 = array1.concat(array2);

// spread operator
const av = [1,2,3,4];
const bv = […av];
console.log(bv)

https://learn.javascript.ru/array-methods#map

Question 28

Flattening nested arrays.

Answer 28

1. Using concat():
   const nestedArray = [[1, 2], [3, 4], [5, 6]];
   const flattenedArray = [].concat(…nestedArray);
   console.log(flattenedArray);

2.
Using reduce():
const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]

3. const nestedArray = [[1, 2], [3, 4], [5, 6]];
   const flattenedArray = nestedArray.flatMap(innerArray => innerArray);
   console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]

Question 29

Sorting and custom sorting arrays.

Answer 29

numbers = [3, 1, 4, 5, 2];
console.log(numbers.sort())
numbers.sort((a,b) => a -b);
console.log(numbers);

Question 30

Filtering array elements.

Answer 30

const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter(number =>
number %2 === 0);
console.log(filtered);

Question 31

Understanding the Document Object Model (DOM).

Answer 31

DOM - это иерархическое представление содержимого и структуры веб-страницы. Объект window служит связующим звеном между вашим кодом JavaScript и содержимым веб-страницы.

Question 32

Types of DOM Events.

Answer 32

1. Mouse Events
2. Keyboard Events
3. Form and InputEvents
4. Custom Events
5. Document and Window Events

Question 33

Working with Mouse and Keyboard Events.

Answer 33

1. Mouse- mousedown- mouseup-mouseneter-mouseover/mouseenter- mouseleave- mousemove
2. Keyboard-keyup-keydown-kepress

Question 34

Event Phases and their differences.

Answer 34

Стандарт DOM Events описывает 3 фазы прохода события:
Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
Фаза всплытия (bubbling stage) – событие начинает всплывать. Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент capture вот так:
elem.addEventListener(…, {capture: true})

Question 35

Stopping event propagation.

Answer 35

event.stopPropagation()

Question 36

Event delegation and its pros/cons.

Answer 36

Pros:

Improved Performance: By attaching fewer event listeners, you reduce the overhead on the browser. This is especially beneficial when dealing with many elements or dynamically added content.
Easier Maintenance: You only need to modify the event handler logic in one place (the delegated listener) to affect all relevant elements.
Works with Dynamic Content: When new elements are added to the DOM that you want to handle events for, they automatically inherit the event handling from the parent element with the delegated listener.
Cons:

Slightly More Complex Logic: The event handler function needs to check the event.target to determine which element was clicked, adding a bit more complexity compared to attaching a direct listener.
Potential for Over-delegation: While delegation is efficient, attaching too few listeners can make it harder to isolate event handling for specific elements later.

Question 37

Timezones and Internationalization in JavaScript (Intl).

Answer 37

var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat(“en-US”, {
timeZone: “America/New_York”,
timeZoneName: “short”
});

// use the format() method to display the date and time in the specified format
// (e.g. “12/8/2020, EST”)
const formatted = dateFormat.format(date);

const date = new Date(‘2022-05-01T12:00:00Z’); // UTC time
const options = { weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’ };
const formatter = new Intl.DateTimeFormat(‘en-US’, options);
console.log(formatter.format(date)); // Output: Monday, May 1, 2022

Question 38

Be able to use call and apply Function built-in methods
Know how to bind this scope to function
Binding, binding one function twice

Answer 38

const car = {
model: ‘Toyota’,
year: 2007,
showModel: function(color, engine){
console.log(this.model, color, engine);
}
};

const anotherCar = {
model: ‘Benz’,
year: 1998
};

// car.showModel.call(anotherCar, ‘green’, ‘gas’);
// car.showModel.apply(anotherCar, [‘red’, ‘diesel’])

const fun1 = car.showModel.bind(anotherCar);
fun1(‘pink’, ‘test’)