Что известно про преобразование типов ?
Спросят с вероятностью 7%

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

Виды преобразования

1️⃣Неявное (автоматическое):
Это преобразование, которое происходит автоматически при выполнении операций с разными типами данных. Например, при сложении числа и строки JavaScript автоматически преобразует число в строку.

2️⃣Явное:
Это преобразование, которое выполняется разработчиком явно с использованием встроенных функций или операторов.

Примеры неявного

1️⃣Строковое преобразование:
При конкатенации строки с числом число автоматически преобразуется в строку.

      const result = 'The answer is ' + 42;
   console.log(result); // 'The answer is 42'
   

2️⃣Числовое преобразование:
При выполнении арифметических операций строка, содержащая число, автоматически преобразуется в число.

      const result = '42' - 10;
   console.log(result); // 32
   

3️⃣Логическое преобразование:
В логическом контексте (например, в условиях if) значения автоматически приводятся к логическому типу (true или false).

      if ('hello') {
     console.log('This is true'); // This is true
   }

   if (0) {
     console.log('This is false'); // This will not be executed
   }
   

Примеры явного

1️⃣Преобразование в строку:
Для явного преобразования в строку можно использовать метод String() или оператор + с пустой строкой.

      const num = 42;
   const str1 = String(num);
   const str2 = num + '';

   console.log(str1); // '42'
   console.log(str2); // '42'
   

2️⃣Преобразование в число:
Для явного преобразования в число можно использовать функции Number(), parseInt(), или parseFloat().

      const str = '42';
   const num1 = Number(str);
   const num2 = parseInt(str, 10);
   const num3 = parseFloat(str);

   console.log(num1); // 42
   console.log(num2); // 42
   console.log(num3); // 42
   

3️⃣Преобразование в логическое значение:
Для явного преобразования в логическое значение можно использовать функцию Boolean() или двойное отрицание !!.

      const value = 0;
   const bool1 = Boolean(value);
   const bool2 = !!value;

   console.log(bool1); // false
   console.log(bool2); // false
   

Таблица преобразования типов

| Значение | К строке | К числу | К логическому |
|-------------------|-------------------|------------------|-----------------|
| undefined | 'undefined' | NaN | false |
| null | 'null' | 0 | false |
| true | 'true' | 1 | true |
| false | 'false' | 0 | false |
| 42 | '42' | 42 | true |
| 0 | '0' | 0 | false |
| '' (пустая строка) | '' | 0 | false |
| '42' | '42' | 42 | true |
| 'hello' | 'hello' | NaN | true |
| {} (пустой объект) | '[object Object]' | NaN | true |
| [] (пустой массив) | '' | 0 | true |
| [42] | '42' | 42 | true |
| [1, 2, 3] | '1,2,3' | NaN | true |


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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Как расшифровывается css ?
Спросят с вероятностью 7%

CSS расшифровывается как Cascading Style Sheets, что в переводе означает "каскадные таблицы стилей". Давайте рассмотрим каждый элемент этого термина:

1️⃣Cascading (каскадные):
Этот термин указывает на то, что стили применяются к элементам HTML в определенном порядке приоритетов. Когда стили конфликтуют (например, когда одно и то же свойство задано несколькими стилями), CSS использует каскадные правила для разрешения этих конфликтов. Эти правила включают:
✅Специфичность селекторов (различные типы селекторов имеют разный приоритет).
✅Порядок расположения в коде (последний стиль имеет больший приоритет).
✅Использование ключевого слова !important (приоритет выше всех обычных правил).

2️⃣Style (стили):
Стили определяют, как должны выглядеть элементы HTML на веб-странице. Это включает в себя множество свойств, таких как цвета, шрифты, размеры, расположение, отступы и многие другие аспекты внешнего вида.

3️⃣Sheets (таблицы):
CSS-правила обычно хранятся в файлах, которые называются таблицами стилей. Эти файлы могут быть внешними (подключенными к HTML-документу через элемент <link>), встроенными (внутри элемента <style> в самом HTML-документе) или инлайновыми (непосредственно в атрибутах стиля HTML-элементов).

Вот пример CSS, который показывает использование каскадных таблиц стилей для стилизации HTML-документа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Example</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .inline-style {
      color: red;
    }
  </style>
</head>
<body>
  <h1 class="heading inline-style">Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

В этом примере:
✅Внешний файл styles.css задает стили для body, h1 и элементов с классом .heading.
✅Встроенные стили в элементе <style> задают цвет текста для элементов с классом .inline-style.
✅Каскадные правила CSS определяют, что цвет текста элемента <h1> будет красным, так как инлайновые стили имеют наибольший приоритет.

CSS расшифровывается как Cascading Style Sheets, что означает "каскадные таблицы стилей". Это язык, используемый для описания внешнего вида и форматирования HTML-документов, поддерживающий каскадные правила для разрешения конфликтов между стилями.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Какие функции есть в js ?
Спросят с вероятностью 7%

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

1️⃣Функциональные выражения и объявленные функции

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

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

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

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

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

Не "всплывают" и не могут быть вызваны до их определения.
const greet = function(name) {
  returned 
};

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

2️⃣Стрелочные функции (Arrow Functions)

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

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

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

3️⃣Анонимные функции

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

setTimeout(function() {
  console.log('This will run after 1 second');
}, 1000);

4️⃣Функции-конструкторы

Для создания объектов. Они вызываются с ключевым словом new и обычно имеют заглавную букву в названии.

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

const alice = new Person('Alice', 30);
console.log(alice.name); // Alice

5️⃣Методы объекта

Являются свойствами объекта.

const person = {
  name: 'Alice',
  greet: function() {
    return Hello, my name is ${this.name};
  }
};

console.log(person.greet()); // Hello, my name is Alice

6️⃣Генераторы (Generators)

Могут быть приостановлены и возобновлены в любой момент. Они объявляются с помощью function* и используют ключевое слово yield.

function* generatorFunction() {
  yield 'First';
  yield 'Second';
  yield 'Third';
}

const gen = generatorFunction();
console.log(gen.next().value); // First
console.log(gen.next().value); // Second
console.log(gen.next().value); // Third

7️⃣Асинхронные функции (Async/Await)

Возвращают промис и позволяют использовать синтаксис await для упрощения работы с асинхронным кодом.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => console.log(data));

8️⃣Функции обратного вызова (Callbacks)

Передаваемые в качестве аргументов в другие функции и вызываемые позже.

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // { name: 'Alice' }
});

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Что такое репозиторий ?
Спросят с вероятностью 3%

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

Основные типы

1️⃣Локальные:
✅Хранятся на локальной машине разработчика.
✅Используются для разработки и тестирования кода до его отправки в удаленный репозиторий.

2️⃣Удаленные:
✅Хранятся на удаленных серверах или в облачных сервисах.
✅Обеспечивают совместную работу нескольких разработчиков, доступность и резервное копирование кода.
✅Примеры: GitHub, GitLab, Bitbucket.

Основные функции

1️⃣Управление версиями:
✅Отслеживание всех изменений в коде с помощью системы контроля версий (например, Git).
✅Позволяет вернуться к любой предыдущей версии кода, сравнивать изменения и анализировать историю.

2️⃣Совместная работа:
✅Обеспечивает возможность совместной работы над проектом, слияния изменений от разных разработчиков и разрешения конфликтов.
✅Поддерживает рабочие процессы, такие как ветвление (branching) и слияние (merging).

3️⃣Резервное копирование и безопасность:
✅Хранение кода в удаленных репозиториях обеспечивает его сохранность и доступность.
✅Поддерживает механизмы контроля доступа для защиты кода от несанкционированного доступа.

Основные команды для работы

1️⃣Создание репозитория:
✅Локальный репозиторий: git init
✅Клонирование удаленного репозитория: git clone <url>

2️⃣Отслеживание и фиксация изменений:
✅Добавление изменений в индекс: git add <file>
✅Фиксация изменений: git commit -m "Сообщение коммита"

3️⃣Работа с ветками:
✅Создание новой ветки: git branch <branch-name>
✅Переключение на другую ветку: git checkout <branch-name>
✅Создание и переключение на новую ветку: git checkout -b <branch-name>

4️⃣Слияние изменений:
✅Слияние ветки в текущую ветку: git merge <branch-name>

5️⃣Работа с удаленными репозиториями:
✅Добавление удаленного репозитория: git remote add origin <url>
✅Отправка изменений в удаленный репозиторий: git push origin <branch-name>
✅Получение изменений из удаленного репозитория: git pull origin <branch-name>

Пример

1️⃣Создание локального репозитория:

      mkdir my-project
   cd my-project
   git init
   

2️⃣Добавление файла и фиксация изменений:

      echo "# My Project" > README.md
   git add README.md
   git commit -m "Initial commit"
   

3️⃣Подключение к удаленному репозиторию на GitHub:

      git remote add origin https://github.com/username/my-project.git
   git push -u origin master
   

4️⃣Создание новой ветки и работа в ней:

      git checkout -b new-feature
   echo "New feature" > feature.txt
   git add feature.txt
   git commit -m "Add new feature"
   git push origin new-feature
   

Репозиторий — это хранилище кода и связанных данных проекта, используемое для управления версиями и совместной работы. Он может быть локальным или удаленным. Позволяют отслеживать изменения, работать с ветками, сливать изменения и обеспечивать резервное копирование кода.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Откуда берется контекст функции ?
Спросят с вероятностью 7%

Контекст функции — это значение, которое доступно через ключевое слово this. Контекст функции определяется способом ее вызова, а не тем, где функция была определена. Вот основные способы, которыми определяется контекст функции:

1️⃣Глобальный контекст и контекст функций

✅Глобальный контекст:
В глобальной области видимости this ссылается на глобальный объект. В браузере это объект window.

    console.log(this); // В браузере это будет window
  

✅Контекст функции:
При обычном вызове функции this ссылается на глобальный объект (в строгом режиме — undefined).

    function showThis() {
    console.log(this);
  }

  showThis(); // В браузере это будет window (или undefined в строгом режиме)
  

2️⃣Контекст методов объекта

Когда функция вызывается как метод объекта, this ссылается на объект, которому принадлежит метод.

const obj = {
  name: 'Alice',
  showThis: function() {
    console.log(this);
  }
};

obj.showThis(); // { name: 'Alice', showThis: [Function: showThis] }

3️⃣Конструкторы и классы

При вызове функции-конструктора с ключевым словом new, this ссылается на новый созданный объект.

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

const alice = new Person('Alice');
console.log(alice.name); // Alice

4️⃣call, apply и bind

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

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

    function showThis() {
    console.log(this);
  }

  const obj = { name: 'Alice' };
  showThis.call(obj); // { name: 'Alice' }
  

✅apply: вызывает функцию с указанным значением this и аргументами, переданными в виде массива.

showThis.apply(obj); // { name: 'Alice' }

✅bind: возвращает новую функцию, которая при вызове будет иметь указанный контекст this.

const boundShowThis = showThis.bind(obj);
  boundShowThis(); // { name: 'Alice' }

5️⃣Стрелочные функции

Не имеют собственного контекста this. Вместо этого они захватывают this из окружающего лексического контекста.

const obj = {
  name: 'Alice',
  showThis: function() {
    const arrowFunc = () => console.log(this);
    arrowFunc();
  }
};

obj.showThis(); // { name: 'Alice' }

6️⃣Обработчики событий

В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // <button> элемент
});

Контекст функции (this) определяется способом вызова функции. В глобальной области видимости this ссылается на глобальный объект. В методах объекта this ссылается на сам объект. В функциях-конструкторах this ссылается на новый созданный объект. Методы call, apply и bind позволяют явно задавать значение this. Стрелочные функции захватывают this из окружающего контекста. В обработчиках событий this ссылается на элемент, к которому прикреплен обработчик.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Почему важно указывать ширину и высоту для картинок ?
Спросят с вероятностью 7%

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

1️⃣Улучшение производительности и оптимизация рендеринга

✅Предотвращение перерисовок и переформатирования (reflows):
Когда браузер загружает страницу, он сначала строит DOM (Document Object Model) и CSSOM (CSS Object Model). Если размеры изображений не указаны, браузеру приходится ждать, пока изображения загрузятся, чтобы узнать их размеры. Это может вызвать переформатирование страницы, когда элементы перемещаются, чтобы освободить место для изображений. Указание размеров заранее позволяет браузеру зарезервировать нужное пространство, избегая дополнительных перерисовок и улучшая производительность.

2️⃣Улучшение пользовательского опыта

✅Стабильная компоновка (layout stability):
Когда размеры изображений указаны, браузер может зарезервировать пространство для каждого изображения до его загрузки. Это предотвращает смещение контента во время загрузки страницы, обеспечивая более плавный и предсказуемый пользовательский опыт.

3️⃣Быстрая загрузка страниц

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

4️⃣Сокращение времени до первого отрисовки (First Contentful Paint, FCP)

✅Оптимизация рендеринга:
Когда браузер знает размеры изображений, он может быстрее отрисовать контент страницы, даже если изображения еще не загружены. Это сокращает время до первого отрисовки (FCP), что является важным показателем производительности.

Рассмотрим пример HTML-кода, в котором указаны размеры изображения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Size Example</title>
  <style>
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Example Image</h1>
  <img src="image.jpg" width="600" height="400" alt="Example Image">
</body>
</html>

В этом примере:

✅Атрибуты width и height задают фиксированные размеры для изображения. Это позволяет браузеру зарезервировать нужное пространство до загрузки изображения.
✅CSS-правило max-width: 100%; height: auto; гарантирует, что изображение будет масштабироваться в зависимости от ширины контейнера, сохраняя пропорции.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Как сравнить объекты в js ?
Спросят с вероятностью 7%

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

1️⃣Сравнение ссылок на объекты

При сравнении объектов с использованием оператора равенства (== или ===), сравниваются их ссылки, а не содержимое.

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

2️⃣Глубокое сравнение объектов

Для сравнения содержимого объектов необходимо проверять каждое свойство. Один из способов — написать рекурсивную функцию для глубокого сравнения.

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) {
    return true;
  }

  if (obj1 == null || typeof obj1 !== 'object' ||
      obj2 == null || typeof obj2 !== 'object') {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false

3️⃣Использование библиотек

Существуют библиотеки, которые предоставляют функции для глубокого сравнения объектов, например, lodash или deep-equal.

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

4️⃣Проверка свойств с учетом порядка и типов

Для простых случаев можно использовать сериализацию объектов с помощью JSON.stringify, однако этот метод имеет ограничения и может не работать с более сложными структурами (например, с функциями, undefined, или символами).

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false

Для сравнения объектов можно использовать:
✅Сравнение ссылок с ===, если нужно проверить, указывают ли переменные на один и тот же объект.
✅Глубокое сравнение с помощью рекурсивной функции или библиотек (например, lodash), чтобы проверить равенство содержимого объектов.
✅Сериализация с JSON.stringify для простых случаев, хотя этот метод имеет ограничения и может не работать с более сложными структурами.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Когда используются переменные, var, let, const ?
Спросят с вероятностью 7%

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

var

Использовался до появления ES6 (ECMAScript 2015) и обладает следующими особенностями:
1️⃣Область видимости: var имеет функциональную область видимости, то есть она видна внутри функции, где была объявлена, или в глобальной области, если объявлена вне функций.
2️⃣Поднятие (hoisting): Объявления с var поднимаются вверх своей области видимости, но присвоение значения происходит в том месте, где оно записано. Это значит, что переменную можно использовать до ее объявления.
3️⃣Повторное объявление: Переменные, объявленные с var, могут быть переобъявлены в пределах одной и той же области видимости.

Пример:

function exampleVar() {
  console.log(x); // undefined
  var x = 10;
  console.log(x); // 10
}
exampleVar();

let

Появился в ES6 и решает многие проблемы, связанные с var:
1️⃣Область видимости: let имеет блочную область видимости, то есть виден только внутри блока {}, в котором объявлен.
2️⃣Поднятие (hoisting): Хотя объявления с let поднимаются, доступ к ним возможен только после строки, где они объявлены (временная мертвая зона).
3️⃣Повторное объявление: Нельзя переобъявить переменную, объявленную с let, в той же области видимости.

Пример:

function exampleLet() {
  console.log(y); // ReferenceError: y is not defined
  let y = 10;
  console.log(y); // 10
}
exampleLet();

const

Также введённый в ES6, используется для объявления констант:
1️⃣Область видимости: Как и let, имеет блочную область видимости.
2️⃣Поднятие (hoisting): Ведет себя аналогично let в плане поднятия и временной мертвой зоны.
3️⃣Изменение значения: Переменная, объявленная с const, должна быть инициализирована при объявлении и её значение нельзя изменить после этого. Однако, если const используется для объявления объекта или массива, можно изменять их содержимое.

Пример:

function exampleConst() {
  const z = 10;
  console.log(z); // 10
  z = 20; // TypeError: Assignment to constant variable.
}
exampleConst();

function exampleConstObject() {
  const obj = { key: 'value' };
  obj.key = 'new value'; // Изменение допустимо
  console.log(obj.key); // 'new value'
}
exampleConstObject();

Когда использовать

✅`var`: Обычно рекомендуется избегать, так как let и const обеспечивают лучшую управляемость кода.
✅`let`: Используется для переменных, которые могут изменяться в процессе выполнения программы.
✅`const`: Используется для значений, которые не будут переназначены. Это помогает предотвратить ошибки и делает код более предсказуемым.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Что такое функция в js ?
Спросят с вероятностью 7%

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

Зачем они нужны

1️⃣Повторное использование кода: Один раз написав функцию, можно вызывать её множество раз с разными аргументами, не переписывая один и тот же код.
2️⃣Упрощение и структурирование кода: Функции помогают разбивать программу на логические блоки, что делает код более понятным и поддерживаемым.
3️⃣Инкапсуляция: Функции могут скрывать внутреннюю реализацию и предоставлять только необходимый интерфейс.

Как они создаются

Есть несколько способов создания функций:

1️⃣Function Declaration (Объявление функции):

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Hello, Alice!

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

2️⃣Function Expression (Функциональное выражение):

const greet = function(name) {
  return

ни нужны

1️⃣Повтор

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

Функция создается и присваивается переменной. Такие функции могут быть анонимными (без имени).

3️⃣Arrow Function (Стрелочная функция):

const greet = (name) => {
  return

 Hello, ${name}!;

};
console.log(greet('Carol')); // Hello, Carol!

Стрелочные функции имеют более короткий синтаксис и не имеют своего контекста this.

Вызов функции

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

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

Параметры и аргументы

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

Возвращаемое значение

Функция может возвращать значение с помощью ключевого слова return. Если return отсутствует, функция возвращает undefined.

function multiply(a, b) {
  return a * b;
}
console.log(multiply(4, 5)); // 20

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

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

function scopeExample() {
  let localVar = 'I am local';
  console.log(localVar); // I am local
}
scopeExample();
console.log(localVar); // ReferenceError: localVar is not defined

Замыкания (Closures)

Функции имеют доступ к переменным из внешних функций благодаря замыканиям:

function outerFunction() {
  let outerVar = 'I am outside!';
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
const inner = outerFunction();
inner(); // I am outside!

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Зачем необходим dom ?
Спросят с вероятностью 7%

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

Зачем он нужен

1️⃣Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими.
2️⃣Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы.
3️⃣Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей.
4️⃣Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы.
5️⃣Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы.

Как он работает

Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами.

Пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Структура для этого документа:

document
 └── html
     ├── head
     │   └── title
     │       └── "Document Object Model"
     └── body
         ├── h1
         │   └── "Hello, world!"
         └── p
             └── "This is a paragraph."

Основные методы и свойства

1️⃣Доступ к элементам:
✅document.getElementById(id): Возвращает элемент по его id.
✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом.
✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом.
✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору.
✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору.

2️⃣Создание и удаление элементов:
✅document.createElement(tagName): Создает новый элемент.
✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя.
✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя.

3️⃣Изменение содержимого и атрибутов:
✅element.innerHTML: Изменяет или получает HTML-содержимое элемента.
✅element.textContent: Изменяет или получает текстовое содержимое элемента.
✅element.setAttribute(name, value): Устанавливает значение атрибута элемента.
✅element.getAttribute(name): Получает значение атрибута элемента.

Пример:

// Изменение текста заголовка
const header = document.querySelector('h1');
header.textContent = 'Hello, DOM!';

// Добавление нового параграфа
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

// Изменение атрибута
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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

Почему не пишем все стили в style ?
Спросят с вероятностью 7%

Написание всех стилей непосредственно в атрибуте style не является хорошей практикой по ряду причин:

1️⃣Разделение структуры и презентации

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

2️⃣Переиспользование стилей

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

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

3️⃣Упрощение изменений и обновлений

Изменение стилей в одном месте (CSS-файл) проще и быстрее, чем изменение атрибутов style для каждого элемента. Это особенно важно для больших проектов.

/* CSS файл */
.text-red {
  color: red;
}

HTML:

<p class="text-red">This text is red.</p>
<p class="text-red">This text is also red.</p>

Если нужно изменить цвет, достаточно поменять его в одном месте в CSS-файле.

4️⃣Улучшение производительности

Браузеры кешируют CSS-файлы, что уменьшает время загрузки страницы. Инлайновые стили загружаются каждый раз, когда загружается HTML-документ, что увеличивает нагрузку на сеть.

5️⃣Семантика и поддержка инструментов разработки

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

6️⃣Поддержка медиа-запросов и адаптивного дизайна

CSS-файлы позволяют легко использовать медиа-запросы для адаптивного дизайна. Это сложно и неэффективно делать с инлайновыми стилями.

/* CSS файл */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Плохо vs Хорошо

Плохо (все стили в `style`):

<p style="color: red; font-size: 16px;">This is a paragraph.</p>
<p style="color: red; font-size: 16px;">This is another paragraph.</p>

Хорошо (использование CSS):

/* CSS файл */
.red-text {
  color: red;
  font-size: 16px;
}

HTML:

<p class="red-text">This is a paragraph.</p>
<p class="red-text">This is another paragraph.</p>

Мы не пишем все стили в атрибуте style, потому что это делает код сложным для чтения, поддержания и повторного использования. Вместо этого мы используем CSS-файлы для разделения структуры и стилизации, что упрощает работу с кодом и повышает производительность.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

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