👩‍💻 Какие существуют типы данных в JS?

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

🔵Примитивные типы данных

1. String: Строки используются для представления текстовых данных. Они могут быть заключены в одинарные ('...'), двойные ("...") или косые наклонные (`...`) кавычки.

let message = "Hello, World!";

2. Number: Числа в JavaScript могут быть как целыми, так и дробными. JavaScript не имеет отдельного типа для целых и дробных чисел; все они являются типом Number.

let integer = 42;
let float = 3.14;

3. Boolean: Этот тип данных может принимать два значения: true или false. Он часто используется для логических операций и условных выражений.

let isTrue = true;

4. Null: Этот тип представляет собой намеренное отсутствие значения. Его значение всегда является null.

let emptyValue = null;

5. Undefined: Этот тип автоматически присваивается переменной, если ей не было дано значение. Он также возвращается, если функции не возвращают значения.

let undefinedValue;

6. Symbol: Этот тип данных был введен в ES6 и используется для создания уникальных идентификаторов. Каждый символ уникален и защищен от конфликтов.

const uniqueId = Symbol('id');

7. BigInt: Этот тип данных был добавлен в ES11 (ES2020) и используется для представления целых чисел, которые превышают пределы типа Number. BigInt создается добавлением суффикса n к целому числу.

let bigIntValue = 123456789012345678901234567890n;

🔵Сложные типы данных (объектные)

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

let person = {
    name: "Alice",
    age: 30
};

2. Array: Массивы являются специализированным типом объектов, которые используются для хранения упорядоченных коллекций данных. Массивы можно рассматривать как объекты со свойством length и числовыми индексами.

let fruits = ["apple", "banana", "cherry"];

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

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

4. Date, RegExp, Map, Set и другие: JavaScript также предоставляет встроенные объекты для работы с датами, регулярными выражениями, коллекциями и другими структурами данных.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Какие бывают селекторы и как они работают в CSS?

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

1. Селекторы по тегам: Выбирают все элементы определённого типа.

   p {
       color: blue;
   }
   

Этот селектор применяет голубой цвет ко всем абзацам на странице.

2. Селекторы по классам: Выбирают элементы, имеющие указанный класс. Классы обозначаются точкой.

   .highlight {
       background-color: yellow;
   }
   

Этот селектор применяет жёлтый фон ко всем элементам с классом highlight.

3. Селекторы по идентификаторам: Выбирают элемент с конкретным идентификатором. Идентификаторы обозначаются решёткой (#).

   #header {
       font-size: 24px;
   }
   

Этот селектор применяет стиль к элементу с идентификатором header.

4. Групповые селекторы: Позволяют применять одни и те же стили к нескольким элементам.

   h1, h2, h3 {
       font-family: Arial, sans-serif;
   }
   

Здесь задан один стиль для заголовков h1, h2 и h3.

5. Селекторы потомков: Выбирают элементы, которые являются потомками другого элемента.

   div p {
       color: red;
   }
   

Этот селектор применяет красный цвет ко всем абзацам, находящимся внутри div.

6. Селекторы потомков и прямых потомков: Используются для выбора элементов, которые являются прямыми потомками другого элемента.

   ul > li {
       list-style-type: none;
   }
   

Этот селектор применяет стиль к элементам li, которые являются прямыми потомками элемента ul.

7. Соседние селекторы: Выбирают элементы, которые идут сразу после другого элемента.

   h1 + p {
       margin-top: 0;
   }
   

Этот селектор применяется к первому абзацу (p), который идет сразу после заголовка (h1).

8. Селекторы по атрибутам: Выбирают элементы на основе наличия и значения атрибутов.

   input[type="text"] {
       border: 1px solid #ccc;
   }
   

Этот селектор применяет стиль ко всем input, у которых атрибут type равен text.

9. Псевдоклассы: Определяют состояние элемента.

   a:hover {
       color: green;
   }
   

Этот селектор применяет стиль к ссылкам, когда на них наводят курсор.

10. Псевдоэлементы: Позволяют стилизовать части элементов.

    p::first-line {
        font-weight: bold;
    }
    

Этот селектор применяет жирное начертание к первой строке каждого абзаца.

Эти селекторы могут комбинироваться для более точного выбора элементов. Например, можно создать селектор, который сочетает класс с селектором по тегу:

div.highlight {
    border: 2px solid red;
}

Это применит стиль только к div, которые имеют класс highlight.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Объясни понятие компонентов в React

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

Вот основные аспекты компонентов в React:

1. Определение и типы компонентов
Существует два основных типа компонентов в React:

- Классовые компоненты: Это компоненты, которые определяются с использованием классов JavaScript. Они могут содержать собственное состояние и методы жизненного цикла.

class MyComponent extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}
  

- Функциональные компоненты: Это более простые компоненты, которые определяются как функции. С введением хуков в React 16.8 функциональные компоненты могут также управлять состоянием и жизненным циклом.

function MyComponent() {
    return <h1>Hello, World!</h1>;
}

2. Состояние и свойства (props)
- Свойства (props): Свойства — это данные, передаваемые в компонент из его родительского компонента. Свойства используются для настройки поведения и отображения компонента.

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

// Использование компонента с передачей свойства
<Greeting name="Alice" />

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

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

3. Жизненный цикл компонента
Компоненты в React проходят через несколько этапов, таких как монтаж, обновление и размонтирование. Классовые компоненты предоставляют специальные методы жизненного цикла, такие как componentDidMount, componentDidUpdate, componentWillUnmount, которые позволяют выполнять код в определенный момент жизни компонента.

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

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

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

function App() {
    return (
        <div>
            <Header />
            <Content />
            <Footer />
        </div>
    );
}

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Какие способы объявить переменную существуют в JS?

В JavaScript существуют три основных способа объявления переменных: var, let и const. Каждое из этих ключевых слов имеет свои особенности и области применения.

1. var

- Область видимости: var имеет функциональную область видимости, что означает, что переменные, объявленные с помощью var, доступны внутри функции, в которой они были объявлены, или в глобальной области видимости, если объявлены вне функции.
- Подъем переменной (hoisting): Переменные, объявленные с помощью var, поднимаются к верхней части своей области видимости. Это означает, что можно обращаться к переменной до её фактической декларации, но она будет иметь значение undefined.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

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

2. let

- Область видимости: let имеет блочную область видимости, что означает, что переменная доступна только внутри блока, в котором она была объявлена (например, внутри фигурных скобок `{}`).

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

- Подъем переменной: Переменные, объявленные с помощью let, также поднимаются, но не могут быть использованы до того, как они были объявлены в коде — это называется «временной мертвой зоной» (temporal dead zone).

console.log(z); // ReferenceError: Cannot access 'z' before initialization
let z = 10;

- Переопределение: Нельзя повторно объявить переменную с тем же именем в одной и той же области видимости с помощью let.

3. const

- Область видимости: Как и let, const имеет блочную область видимости.

if (true) {
    const a = 20;
    console.log(a); // 20
}
console.log(a); // ReferenceError: a is not defined

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

const b = 30;
// b = 40; // TypeError: Assignment to constant variable.

const arr = [1, 2, 3];
arr.push(4); // Это допустимо, массив теперь [1, 2, 3, 4]

- Подъем переменной: const, как и let, также поднимается, но также находится в «временной мертвой зоне».


Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Какие типы данных существуют в TypeScript?

В TypeScript существуют следующие основные типы данных:

1. Простые типы:
- number
- string
- boolean
- null
- undefined
- symbol
- bigint

2. Сложные типы:
- array
- tuple
- object
- enum
- any
- void
- never

3. Пользовательские типы:
- type
- interface

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Что такое JSX?

JSX (JavaScript XML) — это синтаксическое расширение для JavaScript, которое используется в React. Он позволяет писать разметку, похожую на HTML, прямо внутри JavaScript-кода. Это делает код более читаемым и простым для понимания, так как разработчики могут описывать интерфейс пользователя в привычном им формате.

Пример использования JSX:

const element = <h1>Привет, мир!</h1>;

В этом примере element — это JSX-элемент, который будет представлен в виде дерева объектов React. JSX позволяет включать JavaScript-выражения в фигурных скобках {}, что дает возможность динамически генерировать разметку:

const name = 'Мир';
const element = <h1>Привет, {name}!</h1>;

При компиляции код на JSX трансформируется в функции JavaScript, которые используют React.createElement для создания элементов React. Например, следующий код на JSX:

const element = <h1>Привет, мир!</h1>;

Будет преобразован в нечто подобное:

const element = React.createElement('h1', null, 'Привет, мир!');

Важно отметить, что JSX не является обязательным для использования React. Можно писать компоненты React, используя чистый JavaScript, но использование JSX делает код более выразительным и упрощает создание пользовательских интерфейсов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Чем отличаются var, let и const?

var, let и const — это ключевые слова, используемые для объявления переменных в JavaScript, но у них есть различные особенности:

1. var:
- Доступен в функции или глобальной области видимости.
- Позволяет повторные объявления.
- Подвержен подъем (hoisting), переменная инициализируется значением undefined до ее объявления.

2. let:
- Доступен в блочной области видимости (например, внутри {}).
- Не позволяет повторные объявления в одной и той же области видимости.
- Также подвержен подъем, но не инициализируется до фактического объявления.

3. const:
- Также доступен в блочной области видимости.
- Не позволяет повторные объявления.
- Требует инициализации при объявлении и не может быть переопределен (но объекты и массивы, объявленные с const, можно изменять).

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Зачем нужны семантические элементы в HTML?

Семантические элементы в HTML предназначены для улучшения структуры и понимания документа как для людей, так и для машин. Они:

1. Улучшение смыслового значения: Ясно описывают содержимое (например, <header>, <footer>, <article> и <nav>), делая код более читаемым и понятным.

2. SEO (поисковая оптимизация): Помогают поисковым системам лучше индексировать и понимать контент.

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

4. Структура документа: Способствуют более логичной и организованной разметке, что упрощает стилизацию и поддержание кода.

Использование семантических элементов приводит к более чистому и эффективному коду.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Что такое специфичность селекторов и как она рассчитывается?

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

1. Атрибуты специфичности:
- Важность Inline-стилей: 1000 (например, style="...")
- Идентификаторы (id): 100 (например, #id)
- Классы, псевдоклассы и атрибуты: 10 (например, .class, :hover, [type="text"])
- Элементы и псевдоэлементы: 1 (например, div, h1, ::before)

2. Как рассчитывается:
- Специфичность представляется в виде трехзначного числа (a, b, c), где:
- a — количество Inline-стилей,
- b — количество id-селекторов,
- c — количество классов, псевдоклассов и элементов.

3. Пример:
- Селектор #header .menu li имеет специфичность (0, 1, 2): 0 id, 1 класс (.menu), 2 элемента (li).
- Селектор div имеет специфичность (0, 0, 1).

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Что такое тип any и когда его следует использовать?

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

🔵 Когда использовать any:
1. Импорт сторонних библиотек: Когда нет типов для сторонней библиотеки, и нужно временно обойти типизацию.
2. Постепенный переход на TypeScript: Если переписывается проект из JavaScript в TypeScript и нужно минимизировать количество ошибок на начальных этапах.
3. Неопределенные данные: Когда невозможно заранее знать тип данных (например, данные от API, которые могут иметь произвольную структуру).

🔵 Лучше избегать использования any:
- Если возможно, лучше использовать более конкретные типы или unknown, так как это окупится лучшей типизацией и безопасностью в долгосрочной перспективе.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Что такое всплытие переменных?

Всплытие переменных (hoisting) — это поведение в JavaScript, при котором объявления переменных и функций поднимаются ("всплывают") в верхнюю часть их контекста выполнения (например, функции или глобального контекста) перед тем, как выполняется код.

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

console.log(x); // undefined
var x = 5;
console.log(x); // 5

В данном примере компилятор фактически исполняет код как будто он выглядит так:

var x; // объявление переменной
console.log(x); // undefined
x = 5; // присваивание
console.log(x); // 5

🔵Переменные, объявленные с помощью let и const
Переменные, объявленные с помощью let и const, также подлежат всплытию, но они имеют "временную мёртвую зону" (temporal dead zone), что означает, что доступ к ним до их декларации вызовет ошибку:

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 10

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 В чем разница между функциональными и классовыми компонентами?

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

1. Объявление и синтаксис

- Функциональные компоненты:
Функциональные компоненты — это обычные JavaScript функции, которые принимают «props» (свойства) как аргумент и возвращают React-элементы. Синтаксис более простой и компактный.

const MyComponent = (props) => {
    return <div>{props.message}</div>;
};

- Классовые компоненты:
Классовые компоненты создаются с помощью классов ES6, которые расширяют React.Component. Они требуют метода render() для возврата JSX и могут содержать более сложную внутреннюю логику.

class MyComponent extends React.Component {
    render() {
        return <div>{this.props.message}</div>;
    }
}

2. Состояние (state)

- Функциональные компоненты:
Ранее функциональные компоненты не могли иметь состояние, но начиная с React 16.8 и введения хуков (Hooks), функциональные компоненты могут использовать useState, useReducer и другие хуки для управления состоянием.

import React, { useState } from 'react';

const MyComponent = () => {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

- Классовые компоненты:
Классовые компоненты могут иметь состояние, которое хранится в объекте this.state, и состояние обновляется с помощью метода this.setState().

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return <button onClick={this.increment}>{this.state.count}</button>;
    }
}

3. Жизненный цикл

- Функциональные компоненты:
С хуками функциональные компоненты могут использовать такие хуки, как useEffect, чтобы управлять побочными эффектами и имитировать методы жизненного цикла классовых компонентов (например, componentDidMount, componentDidUpdate и componentWillUnmount).

import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        console.log("Компонент смонтирован");
        return () => {
            console.log("Компонент будет размонтирован");
        };
    }, []);

    return <div>Hello World!</div>;
};

- Классовые компоненты:
Классовые компоненты имеют методы жизненного цикла, которые позволяют выполнять код в определенные моменты, такие как монтирование, обновление и размонтирование.

class MyComponent extends React.Component {
    componentDidMount() {
        console.log("Компонент смонтирован");
    }

    componentWillUnmount() {
        console.log("Компонент будет размонтирован");
    }

    render() {
        return <div>Hello World!</div>;
    }
}

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Как работает наследование стилей в CSS?

Наследование стилей в CSS работает по следующему принципу:

1. Наследование: Некоторые свойства CSS, такие как color, font-family и line-height, наследуются от родительских элементов к дочерним. Если дочерний элемент не имеет своего значения для этих свойств, он принимает значение от родителя.

2. Не наследуемые свойства: Многие свойства, такие как margin, padding и border, не наследуются. Дочерние элементы используют свои собственные значения, если они не заданы.

3. Приоритет: При возникновении конфликта между наследуемыми стилями и прямо заданными стилями (например, в CSS-классах или инлайн-стилях) применяется правило "более специфичный селектор" или "последовательность". Так, если стиль задан на уровне элемента, он перекроет унаследованный стиль.

Наследование позволяет создавать иерархическую структуру стилей, упрощая управление внешним видом элементов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Какие новые семантические элементы были введены в HTML5?

1. <header> — заголовок раздела.
2. <nav> — навигационные ссылки.
3. <article> — независимая единица контента.
4. <section> — тематический раздел документа.
5. <aside> — боковая информация.
6. <footer> — нижний колонтитул раздела.
7. <figure> — изображение или графический элемент.
8. <figcaption> — подпись к изображению.
9. <main> — основной контент страницы.
10. <time> — обозначение времени.

Эти элементы помогают улучшить структуру и семантику HTML-документов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Чем отличаются null и undefined?

null и undefined в JavaScript представляют собой два различных типа, которые используются для обозначения отсутствия значения, но имеют разные семантики.

1. undefined: Данный тип автоматически назначается переменным, которые объявлены, но не инициализированы. Это также значение, возвращаемое функцией, если она ничего не возвращает.

let someVariable; // Объявлена переменная, но не инициализирована
console.log(someVariable); // Выведет: undefined

2. null: Это преднамеренное отсутствие значения. Программист явно назначает null переменной, чтобы указать, что значение отсутствует.

let anotherVariable = null; // Переменная явно инициализирована null
console.log(anotherVariable); // Выведет: null

- Предназначение: undefined используется системой для обозначения без значения, в то время как null используется разработчиком, чтобы показать отсутствие значения намеренно.

В общем, undefined сигнализирует о том, что значение не было установлено, а null указывает, что значение было сброшено или отсутствует по замыслу. Использование этих типов зависит от контекста и требований к дизайну кода.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Как создается и используется состояние в функциональных компонентах?

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

Пример создания и использования состояния

import React, { useState } from 'react';

const Counter = () => {
    // Инициализация состояния с помощью useState
    const [count, setCount] = useState(0); // count — текущее состояние, setCount — метод для его обновления

    // Функция для увеличения счетчика
    const increment = () => {
        setCount(count + 1); // Обновляем состояние, увеличивая значение на 1
    };

    return (
        <div>
            <h1>Current Count: {count}</h1> {/* Отображаем текущее значение счетчика */}
            <button onClick={increment}>Increment</button> {/* Кнопка для увеличения значения */}
        </div>
    );
};

export default Counter;

Объяснение кода:

1. Импорт useState:
- Хук useState импортируется из React для управления состоянием.

2. Инициализация состояния:
- const [count, setCount] = useState(0); — здесь count хранит текущее значение состояния, а setCount — функция для его обновления. Начальное значение равно 0.

3. Функция обновления состояния:
- increment — функция, вызывающая setCount для увеличения count на 1.

4. Возврат JSX:
- Внутри возвращаемого JSX отображается текущее значение count и кнопка, которая вызывает функцию increment при нажатии.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Зачем нужен <head> в HTML-документе?

<head> в HTML-документе выполняет несколько важных функций. Он содержит метаданные и предоставляет браузеру информацию о документе, которая не отображается непосредственно на странице. Вот основные элементы, которые часто включаются в <head>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- Определяет кодировку документа -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Обеспечивает адаптивность страницы на мобильных устройствах -->
    <noscript>Document Title</noscript> <!-- Заголовок страницы, отображаемый на вкладке браузера -->
    <link rel="stylesheet" href="styles.css"> <!-- Подключение CSS-стилей -->
    <noscript src="noscript.js" defer></noscript> <!-- Подключение JavaScript-файла -->
</head>
<body>
    <!-- Основное содержимое страницы -->
</body>
</html>

Основные функции <head>:

1. Метаданные: Содержит информацию о странице (например, описание, ключевые слова, автор).
2. Дополнительные ресурсы: Подключение CSS и JavaScript для стилизации и интерактивности.
3. Заголовок документа: Заголовок, который показывается в заголовке вкладки браузера.

Использование <head> критически важно для правильной работы и оптимизации страницы.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Как осуществляется контроль типов в TypeScript во время компиляции?

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

Пример использования типов

// Определение интерфейса для пользователя
interface User {
    name: string;
    age: number;
}

// Функция, принимающая объект пользователя
function greet(user: User): string {
    return `Hello, ${user.name}. You are ${user.age} years old.`;
}

// Корректный вызов функции
const user1: User = { name: "Alice", age: 30 };
console.log(greet(user1)); // Выведет: Hello, Alice. You are 30 years old.

// Ошибка типов при неверном вызове функции
// const user2: User = { name: "Bob" }; // Ошибка: свойство 'age' отсутствует.

Как работает контроль типов:

1. Статическая типизация:
- TypeScript проверяет типы данных на этапе компиляции. Если тип не соответствует ожиданиям, компилятор выдает ошибку.

2. Интерфейсы и типы:
- Позволяют описывать структуры данных и принуждают использовать их в соответствии с определением. Например, интерфейс User требует наличия свойств name и age.

3. Функции и параметры:
- Типы также могут быть указаны для аргументов функций, что предотвращает передачу некорректных данных. В примере выше функция greet принимает только объекты, соответствующие интерфейсу User.

4. Автопроверка:
- Компилятор TS сам проверяет код, выводя ошибки и предупреждения, если определенные условия не выполнены.

5. Инференция типов:
- TypeScript может автоматически определять типы, если они не указаны явно, основываясь на контексте.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 В чем разница между классом и идентификатором в CSS?

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

Классы

- Классы обозначаются с помощью точки (.) перед именем в CSS.
- Один элемент может иметь несколько классов. Это позволяет применить несколько стилей к одному элементу.

<div class="box highlight"></div>

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

.highlight {
    border: 2px solid yellow;
}

Идентификаторы

- Идентификаторы обозначаются с помощью решетки (#) перед именем в CSS.
- Каждый идентификатор должен быть уникальным на странице. Один элемент может иметь только один идентификатор.

<div id="mainBox"></div>

#mainBox {
    width: 200px;
    height: 200px;
    background-color: green;
}

Ключевые отличия:

1. Синтаксис:
- Классы: .className
- Идентификаторы: #idName

2. Уникальность:
- Классы могут повторяться на нескольких элементах.
- Идентификаторы уникальны и могут быть использованы только один раз на странице.

3. Приоритет и специфичность:
- Идентификаторы имеют более высокий приоритет при конфликте стилей, чем классы. CSS применяет стили с более высокой специфичностью.

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

Правильное использование классов и идентификаторов помогает организовать стили и обеспечить удобство в работе с элементами на странице.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Чем ссылочный тип данных отличается от примитивов?

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

Примитивные типы данных, такие как number, string, boolean, хранятся непосредственно в памяти, и их значения копируются при присвоении или передаче в функции. Рассмотрим пример:

let a = 10; // Примитивный тип (число)
let b = a; // Копируем значение a в b
b = 20;    // Изменяем b, a остается 10

console.log(a); // Вывод: 10
console.log(b); // Вывод: 20

Ссылочные типы данных, такие как объекты и массивы, хранятся в куче, а переменные содержат ссылки на места в памяти. Их поведение при присвоении и передаче отличается:

let obj1 = { value: 10 }; // Ссылочный тип (объект)
let obj2 = obj1;          // Копируем ссылку на объект
obj2.value = 20;         // Изменяем значение через obj2

console.log(obj1.value); // Вывод: 20
console.log(obj2.value); // Вывод: 20

В этом примере изменение obj2 повлияло на obj1, поскольку обе переменные ссылаются на один и тот же объект.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈

👩‍💻 Объясни разницу между блочными и строчными элементами

В HTML элементы делятся на блочные и строчные, и это различие определяет их поведение на странице.

Блочные элементы занимают всю ширину своего родительского контейнера и располагаются друг под другом. К таким элементам относятся <div>, <h1>, <p>, <ul> и многие другие. Пример использования блочного элемента:

<div style="background: lightblue;">
    Это блочный элемент
</div>
<p>Это новый абзац, который также блочный элемент.</p>

В данном примере, div и p являются блочными элементами, и они будут отображаться на новом уровне, каждый занимая всю ширину.

Строчные элементы, напротив, занимают только необходимую ширину и располагаются в одну линию, если это возможно. К таким элементам относятся <span>, <a>, <strong>, <img> и другие. Пример:

<p>
    Это обычный текст с <strong>строчным элементом</strong> и <a href="#">ссылкой</a>.
</p>

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

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям тут 👈