basic js Flashcards
Разница между function expression / function declaration
- Function Declaration (Объявление функции)
В объявлении функции ключевое слово function используется в начале оператора. Функции, созданные таким образом, могут быть вызваны до того, как код, содержащий их, выполнится. Это называется “подъемом” функции (hoisting), и это позволяет размещать вызовы функций до их фактического определения в коде.
- Function Expression (Функциональное выражение)
Функциональное выражение создается, когда ключевое слово function используется как часть выражения. Обычно они присваиваются переменной. Функциональные выражения не могут быть вызваны до того, как они будут присвоены. Они не поднимаются как объявления функций.
Главное различие между этими двумя заключается в том, как они обрабатываются во время фазы подъема (hoisting) и доступности в коде. В то время как объявления функций могут быть вызваны до своего фактического определения в коде, функциональные выражения должны быть определены до того, как они будут вызваны, иначе будет ошибка.
Как сравнить два объекта?
При обсуждении объектных сравнений в JavaScript следует иметь в виду два типа равенств:
- Ссылочное равенство: Определяет, ссылаются ли два предоставленных операнда на одну и ту же ссылку/экземпляр объекта.
- Глубокое равенство: Определяет, равны ли объекты, сравнивая каждое свойство в операндах.
Ссылочное равенство можно определить с помощью операторов равенства (===, ==), а также с помощью функций Object.is(), но определить глубокое равенство довольно сложно, поскольку объекты могут быть вложенными.
Глубокое равенство:
1.Ручное сравнение. Очевидно, что при решении этой задачи первым делом нужно взять каждое свойство и сравнить его со свойствами и значениями другого операнда. Но, как уже говорилось, эти объекты могут иметь вложенные свойства. Следовательно, для сравнения вложенных объектов необходимо использовать рекурсивный метод.
- Метод JSON.stringify()
Этот метод является скорее трюком, который мы можем использовать для определения того, являются ли два объекта глубоко равными или нет. Несмотря на то, что JavaScript не имеет готового решения для сравнения двух объектов, он без проблем сравнивает две строки. Поэтому в данном методе мы преобразуем наши два объекта в строки с помощью метода JSON.stringify() и сравним два значения, чтобы определить, равны ли объекты в глубину. Даже если объекты имеют вложенные свойства, этот метод может справиться и с ними. Важно отметить, что наличие различных порядков атрибутов может дать некорректные результаты при использовании данного метода.
- Сравнение с помощью библиотек (например Lodash).
Что такое строгий режим Strict Mode?
Строгий режим (Strict Mode) в JavaScript — это специальный режим выполнения кода, введенный в ECMAScript 5 (ES5), который изменяет семантику JavaScript, делая её более строгой и безопасной.
use strict это директива, которая вводит строгий режим выполнения кода. Указывается в начале скрипта или функции.
В строгом режиме:
- Попытки присваивания значений необъявленным переменным вызывают ошибку.
Использование зарезервированных слов для будущих версий ECMAScript, таких как let, static, implements, запрещено. - При попытке удаления неудаляемых свойств объекта (как свойств, определенных через Object.defineProperty()) будет выброшено исключение.
- Использование with является запрещенным.
- Параметр функции не может иметь одинаковые имена.
- Запрещено использование eval в качестве метки или переменной функции.
- Контекст this в нестрогом режиме может указывать на глобальный объект в некоторых случаях, в строгом режиме this остаётся неизменным, если функция вызывается без контекста.
Современный JavaScript поддерживает «классы» и «модули», которые автоматически включают строгий режим. Поэтому в них нет нужды добавлять директиву “use strict”.
В консоли браузера строгий режим по умолчанию выключен.
Что такое переменная?
Переменная в JavaScript является именованным контейнером для хранения данных. Она позволяет нам сохранять, изменять и использовать значения в процессе выполнения программы. В JavaScript переменные объявляются с использованием ключевых слов var, let, или const.
Каждая переменная имеет имя, которое используется для обращения к ней в коде. Имя переменной должно быть уникальным в контексте своей области видимости.
Переменные могут содержать различные типы данных, такие как числа, строки, объекты, функции и другие. Тип данных переменной определяется автоматически при присвоении значения.
В JavaScript есть два ограничения, касающиеся имён переменных:
- Имя переменной должно содержать только буквы, цифры или символы $ и _.
- Первый символ не должен быть цифрой.
Если имя переменной содержит несколько слов, то используется lowerCamelCase (стиль написания составных слов слитно).
Регистр имеет значение. apple и APPLE две разные переменные.
Нелатинские буквы разрешены, но не приветствуются.
Существует список зарезервированных слов, которые нельзя использовать в качестве имён переменных, потому что они используются самим языком. Например: let, class, return и function зарезервированы.
Основные характеристики JavaScript
JavaScript (JS) — это легковесный интерпретируемый (или JIT-компилируемый) язык программирования с функциями первого класса. Наиболее широкое применение находит как язык сценариев веб-страниц, но также используется и в других программных продуктах, например, Node.js.
JavaScript это прототипно-ориентированный, мультипарадигменный язык с динамической типизацией, который поддерживает объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили программирования.
Основные архитектурные черты:
- динамическая типизация,
- слабая типизация,
- автоматическое управление памятью,
- прототипное программирование,
- функции как объекты первого класса.
Самая первая реализация JavaScript была создана Бренданом Эйхом (англ. Brendan Eich) в компании Netscape в 1995 году.
Что такое функция первого класса (First-class function)?
Функция первого класса (First-class function) в программировании означает, что функции могут быть использованы так же, как и любые другие значения, такие как числа, строки или объекты. Это означает, что функции могут быть присвоены переменным, переданы в качестве аргументов другим функциям, возвращены из других функций, а также созданы во время выполнения программы.
Что такое коллбек (callback function)?
Коллбэк (callback) - это функция, которая передается в качестве аргумента другой функции и вызывается этой функцией в определенный момент времени или при наступлении определенного события. Коллбэк функции позволяют реализовать асинхронное программирование и обработку событий в JavaScript.
В чем разница между объявлением функции через const name = () => {} и function?
Объявление стрелочной функции const name = () => {} это присваивание некоторого выражения в константу. Выражением тут является анонимная функция () => {}, и это накладывает те же ограничения, какие существуют для констант: нельзя переназначить константу и нельзя ее использовать до того, как она объявлена, а так же ограничивается зона видимости по всем правилам создания переменных через const, let, var, нет hoisting.
Объявление через function () {} расширяет зону видимости функции и позволяет её использовать до создания функции, то есть имеет hoisting.
Также у стрелочных функций нет своего контекста. Если происходит обращение к this, его значение берётся снаружи.
Типы данных в JavaScript
Есть восемь основных типов данных в JavaScript.
- Число Number / целые числа и числа с плавающей точкой, специальные числовые значения Infinity, -Infinity, NaN
- BigInt / числа больше чем (2 ** 53 - 1) (т. е. 9007199254740991) или меньше, чем -(2 ** 53 - 1) для отрицательных чисел. Чтобы создать значение типа BigInt, необходимо добавить n в конец числового литерала.
- Строка String
- Логический тип Boolean
- Null / специальное значение, которое представляет собой «ничего», «пусто» или «значение неизвестно».
- Undefined / специальное значение, которое представляет собой «значение не было присвоено». Обычно null используется для присвоения переменной «пустого» или «неизвестного» значения, а undefined – для проверок, была ли переменная назначена.
- Символ Symbol
- Объект Object
Как проверить тип данных в JavaScript?
- Оператор
typeofпозволяет нам увидеть, какой тип данных сохранён в переменной.
- Имеет две формы: typeof x или typeof(x).
- Возвращает строку с именем типа. Например, “string”.
- Для null возвращается “object” – это ошибка в языке, на самом деле это не объект.
- Функции относятся к объектному типу. Но typeof обрабатывает их особым образом, возвращая “function”.
-
instanceof- это оператор в JavaScript, который используется для проверки принадлежности объекта к определенному типу или классу.myArray instanceof Array// true или false - Метод
Object.prototype.toString.call(): Этот метод возвращает строку, представляющую тип объекта.
Object.prototype.toString.call(42); // "[object Number]"
Object.prototype.toString.call("hello"); // "[object String]"
Object.prototype.toString.call(true); // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(function(){}); // "[object Function]"
Преобразование типов в JS
Виды преобразований:
- ToString
- ToNumber
- ToBoolean
- ToPrimitive
- JSON.Stringify
1.ToBoolean:
Boolean({})!!42
Где происходит:
- Boolean()
- !!
- if, while, for, do/while
- тернарный оператор
- левая часть && и || (короткий цикл вычислений)
Любой объект => true
Все остальное тоже true кроме 7 falsy значений:
- NaN
- null
- undefined
- ‘’ / empty sting
- 0, -0
- 0n, -0n
- false
- ToString
- Для примитивов String(42) => ‘42’
- Для объектов вызовет преобразование к примитивному типу ToPrimitive
Где происходит:
- String()
- object[value]
- ${value} шаблонные строки
- ToNumber
- true/false => 1/0
- строку попробует конвертировать в число
'42' => 42' 42\n ' => 42'42px' => NaN
пустая строка => 0
если в строке есть пробелы и экранированные символы (\n) то они отбросятся
методыparseIntparseFloatраспознают число до первого лишнего символаparseInt('42x') => 42 - Для объектов также вызывает преобразование к примитивному типу ToPrimitive
- undefined => NaN
- null => 0
- NaN => NaN
Где происходит:
- Number()
- Математические и битовые операции кроме бинарного +
- В случае бинарного + если один операнд строка, то второй преобразуется в строку. Но для объектов вызовется метод valueOf а затем это значение преобразуется в строку
- Алгоритм ToPrimitive
- вызывает
Symbol.toPrimitiveесли он реализован - если нет то вызывает методы
toStringилиvalueOf
- JSON.stringify
- попробует вызвать метод toJson
- свойства function, undefined, symbol в объекте удаляются, в массиве превратятся в null
- NaN Infinity превратятся в null
- встроенные объекты без метода toJSON превратся в {}
Сравнения:
- Сравнения без преобразования типов
===!== -
=====сравнивают объекты по ссылке -
==!=><>=<=предпочитают числа - особый случай
undefined == null // true
NaN
- NaN === NaN // false
- isNaN(‘string’) //true
- Object.is(NaN, NaN) //true
Symbol
- логическое преобразование символа всегда true
- к числу всегда ошибка
- преобразование к строке может происходить только явно, в остальных случаях это ошибка.
Свойства объекта
[[Class]]
[[Prototype]]
[[Extensible]]
Флаги свойств
- Свойства-данные value, writable, enumerable, configurable
- Свойства-аксессоры get, set
Object.getOwnPropertyDescriptor/s
Object.defineProperty
Информация о свойствах объекта
- in - проверит объект и всю цепочку прототипов
- Object.keys - только перечисляемые свойства
- Object.getOwnPropertyNames - все свойства
- Object.getOwnPropertySymbols - все символы
- Object.getOwnPropertyDescriptors - все дескрипторы
Символы
const s1 = Symbol(‘apple’)
Глобальный реестр символов для всего окружения
const s1 = Symbol.for
Symbol.keyFor
Встроенные символы:
- Symbol.iterator
- Symbol.toStringTag
- Symbol.toPrimitive
и другие
Свойство [[Prototype]]
- Это служебное свойство для переиспользования кода.
- Проставляется вручную или при вызове функции с
new - Поиск свойства произойдет по цепочке прототипов если обратиться к этому свойству
- у встроенных объектов уже есть своя иерархия прототипов
Связь prototype и [[Prototype]]
- [[Prototype]] указывает на объект в свойстве prototype
- prototype это свойство функции в JavaScript. Когда функция используется как конструктор (т.е. вызывается с оператором new), prototype определяет прототип для новых объектов, создаваемых этим конструктором.
const proto = {question: 42}
function Class () {}
Class.prototype = proto
const object = new Class()
object.question // 42
object.\_\_proto\_\_ === Class.prototype // true
__proto__
Нестандартное свойство для доступа прямо к [[Prototype]]
Object.setPrototypeOf(object, prototype)
Object.setPrototypeOf(object)
const object = Object.create(prototype)
Функция-конструктор
Функция может быть либо просто функцией или функцией-конструктором.
- Название с Большой Буквы (просто соглашение)
- Вызывается только вместе с new
- использует свойство prototype
- скорее всего внутри себя использует обращение к ключевому слову this
Оператор New
- Создается новый объект
- Он же назначается в качестве this
- Для него же выставляется [[Prototype]]
- Функция конструктор возвращает новый объект
- При возвращении другого объекта созданный объект отбросится
```
function Language (name) {
this.name = name
}
new Language (name) {
// this = {}
// this.[[Prototype]] = Language.prototype
this.name = name
//return this
}
~~~
Классы ES6
- Вызываются только вместе с new
- Не всплывают
- Класс родителя должен быть объявлен выше чем дочерний класс
- Strict mode
- синтаксическая обертка для функций-конструкторов
Контекст, this
this – способ связать функцию с объектом
4 способа связывания:
- по умолчанию
- неявное связывание
- явное связывание
- связывание через new
- По умолчанию this - глобальный объект или undefined в строгом режиме
const value = 42
function something () {
return this.value
}
something() // 42
'use strict'
something() // TypeError
- Неявное связывание
Одновременный доступ и вызов метода
```
const object = {
value: 42,
getValue: function () { return this.value }
}
object.getValue() // 42
~~~
- Явное связывание call apply bind
~~~
const object = {
value: 42,
getValue: function () { return this.value }
}
const method = object.getValue
method.call(object) // 42
~~~
