📌 Как задать последовательность выполнения скриптов?

💬 Спрашивают в 3% собеседований

Последовательность выполнения скриптов можно контролировать несколькими способами:

1️⃣ Порядок размещения в HTML:

Скрипты выполняются в порядке их появления в документе.

   <script src="script1.js"></script>
   <script src="script2.js"></script>
   

2️⃣ Атрибут `defer`:

Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.

   <script src="script1.js" defer></script>
   <script src="script2.js" defer></script>
   

3️⃣ Атрибут `async`:

Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.

   <script src="script1.js" async></script>
   <script src="script2.js" async></script>
   

🤔 Вкратце: Скрипты выполняются в порядке их размещения в HTML. Атрибуты defer и async позволяют управлять этим процессом: defer сохраняет порядок, async выполняет скрипты по мере загрузки.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое event loop?

💬 Спрашивают в 67% собеседований

Event Loop (цикл событий) — это один из ключевых аспектов асинхронного программирования, обеспечивающий возможность выполнения JavaScript-кода в однопоточном режиме, не блокируя выполнение других операций. Это достигается за счёт использования цикла, который постоянно проверяет, есть ли задачи для выполнения, и если они есть, то выполняет их одну за другой.

JavaScript работает в одном потоке, что означает, что в любой момент времени может выполняться только одна операция. Однако, благодаря Event Loop, он способен обрабатывать асинхронные действия, такие как запросы к серверу, таймеры или обработка событий пользовательского интерфейса, не останавливаясь для ожидания их завершения.

🤔 Работает Event Loop следующим образом:

1️⃣ Call Stack (Стек вызовов):

Содержит текущий стек выполнения функций. Когда функция вызывается, она добавляется в стек вызовов, а когда выполнение функции заканчивается, она удаляется из стека.

2️⃣ Callback Queue (Очередь обратных вызовов):

Когда асинхронная операция завершается, её callback (функция обратного вызова) помещается в очередь обратных вызовов.

3️⃣ Event Loop:

Цикл событий непрерывно проверяет стек вызовов на наличие функций для выполнения. Если стек вызовов пуст, Event Loop извлекает первую функцию из очереди обратных вызовов и помещает её в стек вызовов для выполнения.

Это позволяет JavaScript обрабатывать длительные операции, такие как загрузка данных, не блокируя главный поток и обеспечивая отзывчивость приложения.

➕ Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
    console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

В этом примере, несмотря на то что setTimeout имеет задержку в 0 миллисекунд, вывод в консоль будет следующим:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

Это происходит потому, что вызов setTimeout помещает его callback в очередь обратных вызовов, который будет выполнен только после того, как выполнение текущего кода в стеке вызовов завершится и стек станет пустым.

🤔 Итог:

Event Loop позволяет JavaScript выполнять асинхронные операции, обрабатывая их по мере завершения, не блокируя при этом главный поток выполнения. Это делает возможным создание отзывчивых и асинхронных веб-приложений.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое замыкание ?

💬 Спрашивают в 47% собеседований

Замыкание — это функция, которая запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам:

1️⃣ Инкапсуляция данных:

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

2️⃣ Сохранение состояния:

Позволяют сохранять состояние между вызовами функции, без использования глобальных переменных.

3️⃣ Кадрирование и функциональное программирование:

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

➕ Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2

В этом примере, функция увеличить имеет доступ к переменной количество, даже после того как создатьСчетчик завершила выполнение. Это происходит благодаря механизму замыканий: увеличить "запоминает" переменные, которые были в её области видимости в момент создания.

🤔 Итог:

Замыкание — это когда функция запоминает и имеет доступ к переменным из своей области видимости, даже после того, как она выполняется в другом контексте. Это позволяет функциям сохранять данные между вызовами и обеспечивать инкапсуляцию состояния, что очень полезно для создания приватных переменных и управления состоянием в программе.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое promise и какие состояния у него есть?

💬 Спрашивают в 47% собеседований

Promise (обещание) — это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать.

🤔 Состояния:

1️⃣ Pending (Ожидание):

Начальное состояние; асинхронная операция не завершена.

2️⃣ Fulfilled (Исполнено):

Операция завершена успешно, и promise возвращает результат.

3️⃣ Rejected (Отклонено):

Операция завершена с ошибкой, и promise возвращает причину отказа.

➕ Пример:

let обещание = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

обещание.then(
    function(результат) { console.log(результат); }, // обработчик успеха
    function(ошибка) { console.log(ошибка); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций.

🤔 Итог:

Promise — это способ организации асинхронного кода, который предоставляет более удобный и понятный интерфейс для работы с асинхронными операциями, чем традиционные callback-функции. У каждого обещания есть три состояния: ожидание, исполнено и отклонено, которые помогают управлять результатом асинхронных операций.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какие типы данных существуют?

💬 Спрашивают в 27% собеседований

Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.

🤔 Примитивные типы:

➕ Number: представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.

➕ String: представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".

➕ Boolean: имеет два значения, true и false, и используется для работы с логическими операциями.

➕ Undefined: переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.

➕ Null: специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.

➕ Symbol: уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.

➕ BigInt: тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

🤔 Объекты:

➕ Object: могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов.

🤔 Специальные типы:

➕ Массивы: используются для хранения упорядоченных коллекций данных.

➕ Функции: объекты первого класса, поддерживающие вызов.

➕ Дата: для работы с датами и временем.

➕ Регулярные выражения: для работы с регулярными выражениями.

Важно понимать разницу между примитивными типами и объектами, поскольку это влияет на способ работы с переменными и передачу данных в функции.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое virtual dom?

💬 Спрашивают в 27% собеседований

Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом.

Эта концепция призвана решить данную проблему. Вместо того чтобы напрямую взаимодействовать с реальным DOM при каждом изменении, изменения сначала применяются к виртуальному, который является лёгкой копией реального DOM. После этого, с помощью процесса, называемого согласованием (reconciliation), виртуальный DOM сравнивается с предыдущей его версией, чтобы определить, какие именно изменения необходимо внести в реальный. Это позволяет минимизировать количество операций с реальным DOM, что значительно увеличивает производительность приложения.

🤔 Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

В этом случае каждое изменение непосредственно обновляет DOM, что может быть неэффективно при множественных обновлениях.

🤔 Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return <div>Новый текст</div>;
  }
}

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный.

Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной.

🤔 Итог:

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Чем let отличается от var ?

💬 Спрашивают в 27% собеседований

Ключевые слова let и var используются для объявления переменных, но между ними есть несколько важных различий, касающихся области видимости, поднятия (hoisting) и создания блока.

🤔 Область видимости (Scope)

➕ Var:

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

➕ Let:

В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока.

🤔 Поднятие (Hoisting)

➕ Var:

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

➕ Let:

Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ).

🤔 Создание в глобальном контексте

➕ Var:

Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах).

➕ Let:

Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта.

🤔 Примеры:

if (true) {
  var varVariable = "Я доступен везде в функции";
  let letVariable = "Я доступен только в этом блоке";
}

console.log(varVariable); // Работает, потому что var имеет функциональную область видимости
console.log(letVariable); // Ошибка, потому что let имеет блочную область видимости

console.log(a); // undefined из-за поднятия
var a = 3;

console.log(b); // ReferenceError из-за временной мертвой зоны
let b = 4;

🤔 Итог:

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

В то время как var объявляет переменную, доступную во всей функции, а let ограничивает видимость переменной блоком, в котором она объявлена.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Чем var отличается от const ?

💬 Спрашивают в 23% собеседований

Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.

🤔 Область видимости (Scope)

➕ Var:

Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.

➕ Const:

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

🤔 Переназначение и изменение

➕ Var:

Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.

➕ Const:

Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.

🤔 Поднятие (Hoisting)

➕ Var:

Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined.

➕ Const:

Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".

🤔 Инициализация

➕ Var:

Эти переменные можно объявить без инициализации, и их начальное значение будет undefined.

➕ Const:

Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

🤔 Примеры:

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

🤔 Итог:

Использование var, let и const зависит от нужд разработки. var предоставляет функциональную область видимости и большую гибкость за счёт возможности переназначения, но это может привести к ошибкам из-за непреднамеренных изменений или переназначений. const используется для объявления переменных, значение которых не должно изменяться, что помогает предотвратить случайное переназначение и делает код более предсказуемым. Сейчас let и const являются предпочтительными для блочной области видимости и контроля за изменяемостью данных.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 В чем разница == и === ?

💬 Спрашивают в 20% собеседований

Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода.

🤔 Оператор == (равно)

Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам.

➕ Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

🤔 Оператор ===(строго равно)

В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым.

➕ Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

🤔 Почему важно знать разницу

Понимание разницы между == и === критически важно, чтобы избежать ошибок, связанных с неожиданным приведением типов. Использование === помогает гарантировать, что сравниваемые значения совпадают по типу и значению, что является более безопасным подходом в большинстве случаев. В целом, рекомендуется использовать === для сравнения значений, чтобы код был более читабельным и предсказуемым.

🤔 Итог:

== сравнивает значения, приводя их к общему типу, что может привести к неожиданным результатам из-за неявного приведения типов. === сравнивает как значения, так и типы без приведения типов, обеспечивая более строгое и предсказуемое сравнение. Использование === рекомендуется для большей надёжности и читабельности кода.


🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какие способы изоляции стилей существуют?

💬 Спрашивают в 20% собеседований

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

1️⃣ Использование уникальных имен классов

Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

2️⃣ CSS-модули

Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

3️⃣ CSS-in-JS

Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

4️⃣ Shadow DOM

Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

5️⃣ Scoped CSS

Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

6️⃣ Использование IFRAME

Размещение контента внутри <iframe> позволяет полностью изолировать его стили от остальной части страницы. Это крайний способ, который может быть полезен для встраивания стороннего контента, но он приносит дополнительную сложность и ограничения.

7️⃣ CSS-переменные для темизации

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

🤔 Итог:

Изоляция стилей — важный аспект разработки надёжных и масштабируемых веб-приложений. Выбор метода зависит от конкретных требований проекта, технологического стека и предпочтений разработчика. Использование современных инструментов и подходов, таких как CSS-модули, CSS-in-JS и Web Components, может значительно упростить управление стилями и повысить качество конечного продукта.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 В чем различие методов call apply bind?

💬 Спрашивают в 20% собеседований

Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.

🤔 Сall

Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

➕ Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice".

🤔 Apply

Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

➕ Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива.

🤔 Bind

Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

➕ Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

Здесь он используется для создания новой функции greetEarth, которая при вызове выводит тот же результат, что и предыдущие примеры, но с тем отличием, что контекст this и аргументы были заранее заданы.

🤔 Итог:

➕ call вызывает функцию с указанным контекстом this и отдельными аргументами.

➕ apply аналогичен call, но принимает аргументы в виде массива.

➕ bind создаёт новую функцию с предустановленным контекстом this и аргументами, если они были предоставлены, но не вызывает её немедленно.

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


🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какие способы создания функций знаешь?

💬 Спрашивают в 3% собеседований

В JavaScript существует несколько способов создания функций. Каждый способ имеет свои особенности и применяется в зависимости от контекста. Рассмотрим основные из них: функциональные выражения, функциональные объявления, стрелочные функции и методы объекта.

1️⃣ Функциональное объявление (Function Declaration)
Это наиболее традиционный способ объявления функции. Функция, объявленная таким образом, доступна во всем блоке кода благодаря поднятию (hoisting).

🤔 Пример:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"

🤔 Особенности:

➕ Функция доступна до своего объявления благодаря поднятию.

➕ Легко читается и используется для создания именованных функций.

2️⃣ Функциональное выражение (Function Expression)
Функция, объявленная как выражение, не поднимается. Такая функция может быть анонимной или именованной.

🤔 Пример:

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("Bob")); // "Hello, Bob!"

🤔 Особенности:

➕ Функция не поднимается, доступна только после её объявления.

➕ Может быть анонимной или именованной.

3️⃣ Стрелочные функции (Arrow Functions)
Стрелочные функции введены в ES6. Они имеют более короткий синтаксис и не имеют своего this, arguments, super, или new.target.

🤔 Пример:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Charlie")); // "Hello, Charlie!"

🤔 Особенности:

➕ Не имеют своего this, используют значение this из внешнего контекста.

➕ Не могут быть использованы в качестве конструкторов.

➕ Подходят для коротких функций и коллбеков.

4️⃣ Методы объекта (Object Methods)
Функции могут быть объявлены как методы объекта. В ES6 для этого используется сокращенный синтаксис.

🤔 Пример:

const person = {
  name: "David",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

console.log(person.greet()); // "Hello, David!"

🤔 Особенности:

➕ Метод объекта имеет доступ к свойствам объекта через this.

➕ Поддерживается краткий синтаксис в ES6.

5️⃣ Конструкторные функции (Constructor Functions)
Конструкторные функции используются для создания объектов с помощью ключевого слова new.

🤔 Пример:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return `Hello, ${this.name}!`;
};

const person = new Person("Eve");
console.log(person.greet()); // "Hello, Eve!"

🤔 Особенности:

➕ Используются с ключевым словом new для создания новых объектов.

➕ Создают экземпляры объектов с общими методами.

6️⃣ Генераторные функции (Generator Functions)

Генераторные функции возвращают объект-итератор и могут приостанавливать своё выполнение с помощью ключевого слова yield.

🤔 Пример:

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

🤔 Особенности:

➕ Возвращают объект-итератор.

➕ Могут приостанавливать и возобновлять выполнение.

🤔 Вкратце:

1️⃣ Функциональное объявление: Классический способ, функция доступна во всём блоке.

2️⃣ Функциональное выражение: Функция объявляется в выражении, не поднимается.

3️⃣ Стрелочные функции: Краткий синтаксис, нет своего this.

4️⃣ Методы объекта: Функции, объявленные внутри объекта.

5️⃣ Конструкторные функции: Используются с new для создания объектов.

6️⃣ Генераторные функции: Возвращают итераторы, могут приостанавливать выполнение.

Короткий ответ: В JavaScript можно создавать функции разными способами: обычные функции, функции внутри переменных, стрелочные функции, функции внутри объектов, функции для создания объектов и специальные функции, которые могут делать паузы.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что известно о различии между function expression и function declaration?

💬 Спрашивают в 20% собеседований

Существует два основных способа объявления функций: Function Declaration (Объявление Функции) и Function Expression (Функциональное Выражение). Хотя оба подхода определяют функции, между ними есть несколько ключевых различий, влияющих на поведение и использование функций в коде.

🤔 Function Declaration (Объявление Функции)

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

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

🤔 Особенности:

➕ Поднятие (Hoisting):

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

➕ Область видимости:

Определяется её местом в коде: в глобальной области видимости, в области видимости другой функции или в блочной области видимости (в строгом режиме).

➕ Мутабельность: Имя функции является неизменным и не может быть переназначено.

🤔 Function Expression (Функциональное Выражение)

Способ объявления функции, при котором функция создаётся в рамках выражения. Функциональные выражения могут быть анонимными или именованными.

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

🤔 Особенности:

➕ Поднятие (Hoisting):

Переменные, объявленные через var, поднимаются, но инициализируются значением undefined, поэтому функциональное выражение не будет доступно до его объявления в коде. Если функциональное выражение объявлено через let или const, то оно вообще не будет доступно до объявления из-за временной мертвой зоны.

➕ Анонимные и именованные функции:

Функциональные выражения могут быть анонимными (не иметь имени) или именованными. Именованные функциональные выражения могут быть полезны для улучшения читаемости кода и при отладке.

➕ Использование в выражениях:

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

🤔 Итог:

Основное различие между Function Declaration и Function Expression заключается в том, что объявления функций поднимаются и доступны в своей области видимости до выполнения кода, в то время как функциональные выражения доступны только после своего объявления в коде. Выбор между этими двумя способами объявления функций зависит от конкретной задачи, стиля программирования и предпочтений разработчика. Function Expression предоставляет большую гибкость, особенно когда необходимо использовать анонимные функции или присваивать функции переменным.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых