JavaScript Flashcards

(110 cards)

1
Q

Что такое JavaScript и зачем он используется в веб-разработке?

A

JavaScript — это язык программирования, который используется в веб-разработке для создания интерактивных интерфейсов в браузере. Он позволяет изменять DOM, обрабатывать действия пользователя и общаться с сервером.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Опишите роль HTML, CSS и JavaScript в создании веб-сайта?

A

С помощью HTML мы задаём структуру веб-страницы, через CSS мы задаём стилизацию веб-страницы, а с помощью JavaScript мы добавляет интерактивность, что сделать веб-страницу динамичной. Все они работают вместе.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Назовите области применения JavaScript помимо frontend разработки?

A

Кроме создания интерактивных интерфейсов в браузере, с помощью JavaScript можно разрабатывать мобильные, с помощью библиотеки React Native и десктопные приложения с помощью фреймворка Electron, а также можно сделать серверную часть с помощью Node.js.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Как подключить Javascript к странице?

A

Javascript подключается с помощью тега

. Можно вставить код напрямую внутри этого тега, но чаще мы подключаем внешний файл с атрибута src. Лучше размещать тег в конце <body>, либо мы можем использовать атрибут defer, чтобы не блокировать загрузку страницы.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Разница между атрибутами defer и async?

A

Оба загружают скрипт асинхронно, async выполняется сразу после загрузки, может прервать парсинг HTML и может нарушиться последовательность, defer выполняется последовательно только после полной загрузки HTML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Что такое переменные и зачем они нужны?

A

Переменные — это такие именованные контейнеры, в которых мы храним данные (числа, строки, объекты и т.д.), чтобы потом использовать их в коде.

В JavaScript переменные объявляются с помощью let, const или устаревшего var.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Расскажите о различиях между var, let и const?

A

До 16 года объявление переменной можно было только с помощью var. Она имеет функциональную область видимости, можно переобъявлять, также она имеет особенность как всплытие (hoisting). Она считается устаревшим и может приводить к неожиданным багам, связанным с областью видимости или с всплытием. Let и const это современное методы объявления, оба имеют блочную область видимости, значение в let можно менять, а const нельзя.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

Имена переменных должны начинаться с буквы, символа $ либо с нижнего подчеркивания, но не с цифры. Нельзя использовать зарезервированные слова (let, class, return и т.д.). Регистр важен, и обычно применяют стиль camelCase.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Расскажите про понятие всплытие (hoisting).

A

Всплытие (hoisting) — это механизм JavaScript, при котором объявления переменных и функций поднимаются в верх своей области видимости до выполнения кода. Таким образом мы может обратиться к ним до явного объявления. При этом переменные var инициализируются как undefined, а let и const находятся в мёртвой зоне и доступ к ним до явного объявления вызывает ошибку. Функции, объявленные через function, всплывают полностью — их можно вызывать до их определения в коде.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Какие типы данных есть в JavaScript?

A

В JavaScript есть 8 типов данных, 7 из них простые примитивы и один сложный. Примитивные типы данные это - строки, числа, большие числа, булевые, undefined, null и symbol (уникальный идентификатор). Сложный тип — object. Функции тоже считаются объектами.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Какой тип данных получим у Null?

A

Получим объект, хотя null у нас отдельный тип данных, но это ошибка которая сложилась исторически.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Как узнать тип данных?

A

С помощью оператора typeof

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

с помощью метода Number(value), либо можем использовать унарный плюс +value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Как преобразовать строку в число?

A

c помощью метода parseInt(value) преобразуем в целое число, а с помощью метода parseFloat(value) преобразуем с плавающей точкой

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Как преобразовать данные к типу строка?

A

с помощью метода String(value) либо value.toString() кроме undefined и null и еще можно сделать сложение на пустую строку

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Как преобразовать данные в булевое значение?

A

с помощью метода Boolean(value) либо с помощью двойного отрицания !!value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Перечислите ложные значения в JS?

A

false, 0, -0, 0n, пустая строка, null, undefined, NaN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Что такое конкатенация?

A

Конкатенация — это объединение строк в одну c помощью сложения

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Что такое интерполяция?

A

Интерполяция — это способ вставить переменные или выражения внутрь строки с помощью шаблонных строк и конструкции ${}.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Какие числовые значения существуют в JavaScript?

A

Кроме обычных чисел есть Infinity, -Infinity и NaN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Как получить Infinity или -Infinity?

A

Можем получить например при делении на ноль

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Когда получаем NaN?

A

NaN возникает, когда математическая операция не имеет смысла, например, при попытке разделить число со строкой

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Что представляют собой логические значения (boolean)? Для чего они применяются?

A

Логические значения true и false используются для выполнения условий, то есть если совпадает условие мы выполняем что-то.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

В чем разница между null и undefined?

A

undefined - это значение, которое автоматически присваивается переменной, когда объявили, но не присвоили значение либо функция не возвращает значение.
null - это когда явно указываем на отсутствие значения или объекта или когда мы хотим опустошить переменную.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Что такое тип данных symbol и зачем они могут быть нужны?
Symbol - это примитивный тип данных в JavaScript, который используется для создания уникальных и неизменяемых идентификаторов. Символы могут быть созданы с помощью функции Symbol(). Каждый символ, созданный с помощью этой функции, является уникальным, даже если он имеет одинаковое описание. Символы полезны, когда нужно создать уникальные ключи для свойств объектов, чтобы избежать конфликтов с другими ключами.
26
Что такое BigInt и как правильно его создавать? Какие ограничения накладываются на работу с BigInt?
BigInt — это тип данных, который позволяет работать с целыми числами произвольной длины. Он полезен для чисел, которые выходят за пределы стандартного диапазона Number (например, больше, чем 2^53-1). Для создания BigInt нужно добавить суффикс n или использовать функцию BigInt().
27
Какие ограничения накладываются на работу с BigInt?
BigInt нельзя смешивать с типами Number, есть ограничение на операции с дробными числами, ограничение на использование с методами Math и методами для работы с Number.
28
Как узнать длину строки, массива и объекта?
С помощью свойства .length
29
Как найти подстроки в строке?
Есть два метода. Метод .search() возвращает индекс первого вхождения если есть совпадение или -1 если нет. Метод .includes() возвращает булевое значение.
30
Как узнать начинается ли или заканчивается ли строка с указанной подстроки?
С помощью метода .startWith() и .endWith(). Они принимают два значения это searchString и position
31
Как можно извлечь (обрезать) часть строки?
Есть два метода .slice() и .substring(). Принимают два значение старт индекс и энд индекс и извлекает между ими. Разница slice принимает отрицательный индекс, то есть отсчет с конца, а substring() отрицательные индексы всегда интерпретируют как 0.
32
Как можно заменить часть строки на другую строку?
Используется два метода .replace() заменяет первое значение, а replaceAll заменяет все значение, оба принимают два значение какое значение, на что заменить.
33
Как можно преобразовать все символы строки в прописные либо в строчные (верхний или нижний регистр)?
С помощью метода .toUpperCase() и .toLowerCase()
34
Как получить символ из строки?
С помощью индексов, str[index] или str.charAt(index)
35
Как повторить строку?
с помощью метода .repeat(n)
36
Как удалить лишние пробелы в строке?
.trim() — удаляет пробелы с начала и конца строки .trimStart() — удаляет пробелы только с начала строки .trimEnd() — удаляет пробелы только с конца строки
37
Как узнать является ли число четным или нечетным?
Узнаем остаток от деления числа на два, если 0 то четное, если 1 то нечетное. 10%2 = 0 (четное), 7%2= 1 (нечетное)
38
Как округлить число вниз и вверх?
с помощью метода Math.floor() - вниз и Math.ceil() - вверх
39
Как убрать лишние цифры после запятой?
с помощью метода .toFixed(n)
40
Расскажи про арифметические операторы
Арифметические операторы в JavaScript используются для выполнения математических операций. Они включают: сложение, вычитание, умножение, деление, остаток от деления %, возведение в степень **, инкрементация и декрементация.
41
Разница между префиксная и постфиксной инкрементацией и декрементацией?
Постфиксная, сначала возвращает, потом применяет, а префиксная, сначала применяет потом возвращает
42
Расскажи про операторы сравнения.
Операторы сравнения используются для сравнения значений. Они включают: обычное и строгое сравнение, обычное и строгое неравенство, больше, меньше, больше или равно, меньше и равно
43
Расскажи про логические операторы.
Логические операторы используются для выполнения логических операций. Они включают: И (&&), ИЛИ (||) и НЕ (!)
44
Расскажи про операторы присваивания.
Операторы присваивания используются для назначения значений переменным. Присваивание =, прибавить и присвоить +=, вычесть и присвоить -=, умножить и присвоить *=, разделить и присвоить /=, остаток от деления и присвоить %=
45
Что происходит когда складываем или вычитаем строку и число?
При сложении строки и числа с помощью оператора + JavaScript приводит число к строке и выполняет конкатенацию. При вычитании, наоборот, JavaScript пытается преобразовать строку в число для выполнения математической операции.
46
Какие логические конструкции есть?
Условный оператор if else, else if, switch case, тернарный оператор, логические операторы И, ИЛИ, НЕ, оператор ?? (является ли значение null или undefined)
47
Что делает конструкция switch case?
Оператор switch позволяет проверять одно значение и выполнять различные действия в зависимости от его значения. let day = 3; switch (day) { case 1: console.log("Понедельник"); break; case 2: console.log("Вторник"); break; case 3: console.log("Среда"); break; default: console.log("Неизвестный день"); }
48
Какую роль играет оператор break внутри switch-case? Что произойдет, если его не использовать?
Оператор break в switch-case используется для выхода из блока switch после выполнения нужного case. Если его не использовать, выполнение будет "проваливаться" дальше — начнут выполняться все следующие case независимо от условий, пока не встретится break или конец switch
49
Тернарный оператор?
Тернарный оператор — это сокращенная форма условного оператора if-else. Он имеет следующий формат: condition ? expression1 : expression2;
50
В каких случаях удобно использовать if else, switch case или тернарный оператор?
if-else используется когда у нас много условий, а switch-case для проверки одного значения с несколькими возможными вариантами, тернарный оператор — для компактных условий с двумя результатами.
51
Что такое массив, как создать, обратиться к элементу и узнать длину?
Массив — это структура данных для хранения информации в виде списка. Создать можно с помощью квадратных скобок, обратится к элементу можно с помощью индекса, а длину можно узнать с помощью свойства length.
52
Как добавить или удалить элемент массива?
Используем методы unshift - добавить в начало, push - добавить в конец, shift - удалить с начала, pop - удалить с конца.
53
Как заменить элемент массива на новый?
с помощью метода .splice(startIndex, deleteCount, newValue)
54
Как узнать есть ли элемент в массиве?
Узнать можно с помощью метода .includes() который возвращает булевое значение либо через метод indexOf получаем индекс есть есть или -1 если нет
55
Как разделить (обрезать) массив?
Есть два метода .slice(start, end) который возвравщает новый массив и .splice(start, end) который мутирует сам массив
56
Как объединить массивы?
Можно использовать метод .concat(), возвращает новый массив, через запятую передаются массивы или можно использовать спред оператор.
57
Как из массива сделать строку?
С помощью метода .join(), разделяет с помощью запятой по умолчанию, не мутирует массив.
58
Как перевернуть массив?
С помощью метода .reverse(), мутирует массив.
59
Как из строки сделать массив по указанному разделителю?
С помощью метода .split(), не мутирует массив, если не передан разделитель вернётся массив из всей строки.
60
Как разбить строку на массив по каждому символу?
С помощью метода split("")
61
Что такое чейнинг методов?
Чейнинг методов — это когда несколько методов вызываются подряд друг за другом через точку, чтобы упростить и сократить код.
62
Что такое объект, как создать и обратиться к свойству?
Объект - это структура данных для хранения информации в виде пар "ключ: значение". Объект создается с помощью квадратных скобок. Через точку или квадратные скобки можно обратиться к свойству объекта.
63
Как добавить или удалить свойство?
Чтобы добавить новое свойство просто указываем новое название и свойство через точку, чтобы удалить используем delete obj.key
64
Что такое функции?
Функции — это блоки кода, которые можно переиспользовать. Они принимают входные данные (аргументы), выполняют действия и могут возвращать результат.
65
Как объявить функции?
Есть три способа: Function Declaration - function () {} Function Expression - const name = function () {} Arrow Function - const name = () => {} Внутри скобки можем передать аргументы, если не сделать return возвращает по умолчанию undefined
66
Разница между объявлениями функций?
Разница в всплытии то есть функция которая была объявлена с помощью Function Declaration всплывает и доступна до объявления. Функции в виде выражения и стрелочные функции не всплывают и работают только после объявления. Также у стрелочных нет своего this.
67
Разница между параметром и аргументом в функции?
Когда мы вызываем функцию мы передаем аргументы, но при создании мы используем термин параметр для обозначений мест аргументов.
68
Как пройтись по элементам массива и выполнить колбек-функцию?
Чтобы пройтись по элементам массива и выполнить колбек-функцию, мы используем различные способы. Например можем использовать циклы for, while или for...of, можно использовать методы массивов, такие как .forEach() или .map()
69
Разница между методом forEach и map?
map возвращает новый массив, forEach не возращает и не мутирует массив, а просто вызывает колбек-функцию на каждый элемент Оба метода принимают колбек-функцию в которую передается текущий элемент, индекс и сам массив.
70
Как отфильтровать массив?
С помощью метода filter, возвращает новый отфильтрованный массив. Метод принимает колбек-функцию для условия, в которой передается текущий элемент, индекс, сам массив.
71
Как найти элемент в массиве?
Чтобы найти элемент в массиве, можно использовать разные способы в зависимости от задачи. Метод .find() — возвращает первый элемент, удовлетворяющий условию или undefined, если не найден. Метод .includes() — проверяет, есть ли точное значение в массиве, возвращает булевое значение. Метод .indexOf() — возвращает индекс первого элемента или -1, если не найден
72
Как сделать проверку элементов массива на выполнения условия?
Есть два метода: some() проверяет, хотя бы один элемент массива удовлетворяет условию и every() проверяет, что все элементы массива удовлетворяют условию, оба возвращают булевое значение
73
Как узнать является ли значение числом?
Чтобы узнать, является ли значение числом в JavaScript, есть несколько способов с помощью typeof или методом Number.isFinite(value)
74
Как отсортировать массив?
С помощью метода sort можем изменить сортировку массива, мутирует массив. По умолчанию сортировка будет по строковому представлению, для чисел нужно передать колбек-функцию (a, b) ⇒ a - b, также можно отсортировать массив объектов по значению.
75
Как преобразовать массив в единое значение или структуру данных?
С помощью метода reduce, передаем колбек-функцию которая принимает (acc, currentValue, index, array) и начальное значение (если не передать будет первый элемент массива). Метод не мутирует массив, а возвращает новое значение. Часто используется для математических операций.
76
Что делает метод reduce?
Метод reduce() выполняет "свёртку" массива — он пробегается по всем элементам и аккумулирует (накапливает) результат в одно значение.
77
Что такое цикл и какие есть?
Цикл — это конструкция, которая позволяет повторять действия несколько раз, пока выполняется определённое условие. Виды циклов for, while, do...while, for...of, for...in
78
Цикл for?
Классический цикл с счётчиком for (let i = 0; i < 5; i++) { console.log(i); // 0, 1, 2, 3, 4 }
79
Цикл while?
Выполняется, пока условие истинно let i = 0; while (i < 5) { console.log(i); i++; }
80
Цикл do…while?
Сначала выполнит тело, потом проверит условие let i = 0; do { console.log(i); i++; } while (i < 5);
81
Цикл for of?
перебирает значения массива или строки const arr = ['a', 'b', 'c']; for (const item of arr) { console.log(item); }
82
Цикл for in?
перебирает ключи объекта const obj = {a: 1, b: 2}; for (const key in obj) { console.log(key, obj[key]); }
83
break и continue в циклах?
Внутри циклов можно использовать break чтобы полностью выйти из цикла и continue чтобы пропустить текущую итерацию.
84
Что такое область видимости, какие есть?
Область видимости (scope) - это зона, в которой доступна переменная или функция в коде. Основные виды это: Глобальная - доступны везде Функциональная - видны внутри функции Блочная - видны внутри любых фигурных скобок Лексическая - функции "помнят", где они были объявлены и имеют доступ к переменным родительской области
85
Какие ошибки могут возникнуть если использовать глобальную область видимости?
Переменные доступны везде, что может привести к конфликту имен переменных или случайному изменению значений.
86
Что такое функции высшего порядка?
Функции высшего порядка - это функции, которые принимают другие функции как аргументы или возвращают функцию как результат. Например методы массивов.
87
Как сделать значение по умолчанию в функции?
Значение по умолчанию для параметра функции задаётся прямо в её объявлении с помощью =
88
Что такое замыкание?
Замыкание — это функция, которая имеет доступ к переменным из своей внешней (лексической) области даже после того, как внешняя функция завершила выполнение.
89
Что такое деструктуризация?
Деструктуризация — это удобный способ извлекать значения из объектов или массивов и сразу присваивать их переменным.
90
Как сделать деструктуризацию массива?
const [a, b, c] = array
91
Как сделать деструктуризацию массива пропустив элементы?
Чтобы сделать деструктуризацию массива с пропуском элементов, просто нужно оставить пустые запятые на месте тех значений, которые хочешь пропустить.
92
Как сделать деструктуризацию объекта?
const {name, age} = user
93
Как сделать деструктуризацию объекта с переименованием?
Чтобы сделать деструктуризацию объекта с переименованием, нужно указать новое имя переменной после двоеточия :
94
Как сделать деструктуризацию объекта установив значение по умолчанию?
Чтобы задать значение по умолчанию при деструктуризации объекта, достаточно после имени свойства указать = и нужное значение.
95
Что такое Rest-оператор?
Rest-оператор (...) — это синтаксис, который позволяет собрать оставшиеся элементы в массиве, свойства в объекте в деструктуризации одну переменную или собрать аргументы в функциях в одну переменную.
96
Что такое Spread-оператор?
Spread-оператор (...) используется для распаковки элементов массива или свойств объекта. Часто используется чтобы развернуть массив или объект и добавить к нему новые данные
97
Как собрать все переданные аргументы функции в массив?
C помощью Rest-оператора
98
Как развернуть элементы массива в новый массив?
С помощью Spread-оператора
99
Как развернуть свойства объекта в новый объект?
С помощью Spread-оператора
100
Что такое DOM-дерево?
(Document Object Model) — это структурированное, древовидное представление HTML-документа, которое браузер создаёт во время загрузки страницы. Каждый узел дом дерево это HTML элемент. Благодаря DOM JavaScript может получать элементы страницы, изменять их, добавлять новые или удалять.
101
Как получить элемент из DOM?
Можно использовать один из методов document.querySelector(selector) - по селектору document.getElementById(id) - по ID
102
Как получить все элементы из DOM?
Можно использовать один из методов document.querySelectorAll(selector) - по селектору, получаем NodeList document.getElementsByClassName(className) - по классу, получаем HTMLCollection document.getElementsByTagName(tagName) - по тегу, получаем HTMLCollection
103
Как получить все дочерние элементы тега?
с помощью свойство element.children мы получаем коллекцию всех дочерних элементов (как массив)
104
Как получить первый дочерний элемент тега?
с помощью свойство element.firstChild
105
Как удалить первый дочерний элемент тега?
с помощью метода element.removeChild(tag)
106
Как поменять текст внутри тега?
с помощью свойство element.textContent = “newValue”
107
Разница между свойствами innerText и textContent?
innerText показывает только видимый текст с учётом стилей CSS, а textContent — весь текст внутри элемента, независимо от стилей, не вызывает перерасчет стилей.
108
Как установить атрибут к тегу?
с помощью метода element.setAttribute(”name”, “newValue”)
109
Как получить атрибут тега?
с помощью метода element.getAttribute(”name”)
110
Как добавить или изменить инлайн стили тега?
с помощью свойство element.style.color = “value”