M3 | WebDev

🧩 Понимание DOM: Управление веб-страницей изнутри 🧩

📜 Что такое DOM?

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

🌳 Структура DOM:

Представьте вашу веб-страницу как дерево:

- Корневой элемент: <html> — вершина дерева.
- Дочерние элементы: <head>, <body> — ветви, идущие от корня.
- Листья: Текст и другие вложенные элементы.

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Текстовый параграф</p>
  </body>
</html>

На этой структуре построено всё взаимодействие с элементами страницы.

🔧 Работа с DOM в JavaScript:

1. Доступ к элементам
Вы можете получить доступ к элементам страницы с помощью методов, таких как getElementById, getElementsByClassName, querySelector, и querySelectorAll.

   const header = document.getElementById('main-header');
   const paragraphs = document.querySelectorAll('p');

2. Изменение содержания
С помощью DOM можно изменять текст, HTML-контент и атрибуты элементов.

   header.textContent = 'Новый заголовок';
   paragraphs[0].innerHTML = '<strong>Обновленный текст</strong>';

3. Создание и удаление элементов
Вы можете добавлять новые элементы на страницу или удалять существующие.

   const newElement = document.createElement('div');
   newElement.textContent = 'Новый элемент';
   document.body.appendChild(newElement);

   document.body.removeChild(paragraphs[1]);

💡 Зачем изучать DOM?

Работа с DOM — это основа создания динамических веб-страниц. Без понимания DOM трудно эффективно управлять контентом, взаимодействием с пользователем и реализацией интерактивных функций.

Тэги : #javascript

699 views06:01

M3 | WebDev

🛠 Разбираемся в отличиях: var, let, и const в JavaScript! 🌟

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

1. var — 🏛 Редкоиспользуемый в нынешнем времени

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

var a = 10;
var a = 20; // Допустимо

2. `let` — 🔒 Безопасный выбор

- Область видимости (Scope): let имеет блочную область видимости. Переменные, объявленные с let, существуют только внутри того блока кода, где они были объявлены (например, внутри {}).
- Поведение в циклах: В отличие от var, let создаёт новую переменную для каждой итерации цикла, что помогает избежать ошибок.
- Переопределение: Переменную, объявленную с let, нельзя объявить заново в той же области видимости, но можно изменить её значение.

let b = 10;
b = 20; // Допустимо

3. const — 🛡 Для неизменяемых значений

- Область видимости (Scope): Как и let, const имеет блочную область видимости, что делает её использование безопасным.
- Инициализация: Переменную, объявленную с const, необходимо инициализировать сразу. Её значение нельзя изменять после присвоения.
- Константность: Хотя значение переменной нельзя изменить, если const ссылается на объект или массив, вы можете изменять свойства объекта или элементы массива.

const c = 30;
// c = 40; // Ошибка

const obj = { name: 'John' };
obj.name = 'Doe'; // Допустимо

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

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

Понимание этих различий поможет вам избежать многих распространённых ошибок и писать более чистый код. 🎯

Тэги : #javascript

677 viewsedited 16:10

M3 | WebDev

💡 Типы данных и встроенные объекты в JavaScript 🧑‍💻

JavaScript поддерживает различные типы данных и встроенные объекты, которые можно разделить на примитивные и объектные.

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

- string (Строка)
Последовательность символов, заключённых в кавычки. Примеры: "Hello, World!", 'JavaScript'.

- number (Число)
Числовые значения, как целые, так и дробные. Примеры: 42, 3.14, -7.

- boolean (Булево значение)
Логический тип, принимающий true или false. Примеры: true, false.

- null (Нулевое значение)
Специальное значение, обозначающее отсутствие значения или пустоту. null используется для явного указания на отсутствие объекта. Пример: let value = null;.

Примечание: typeof null возвращает "object", что является историческим багом JavaScript и может быть не совсем интуитивно понятным.

- undefined (Неопределённое значение)
Значение, присваиваемое переменной, которая была объявлена, но не инициализирована. Пример: let x; // x is undefined.

- symbol (Символ)
Уникальное и неизменяемое значение, часто используется как идентификатор для свойств объектов. Пример: const id = Symbol("id");.

- bigint (Большое целое число)
Позволяет работать с числами, выходящими за пределы Number. Пример: const big = 1234567890123456789012345678901234567890n;.

🗂 Объект в JavaScript

Object

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

Пример создания объекта:

const person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

Некоторые из методов объекта:
- `Object.keys(obj)` – возвращает массив ключей объекта.
- `Object.values(obj)` – возвращает массив значений объекта.
- `Object.entries(obj)` – возвращает массив пар [ключ, значение].
- `Object.assign(target, source)` – копирует свойства из одного объекта в другой.

🔍 Некоторые встроенные объекты в JavaScript:

- Function
Особый тип объекта, представляющий собой выполняемый блок кода.
Примечание : typeof для функции возращает "function" , поскольку функции являются частным случаем объектов в JavaScript . Примеры создания функции:

  function greet(name) {
    return "Hello, " + name;
  }

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

  const numbers = [1, 2, 3, "four", true];

- Map
Коллекция пар ключ-значение, где ключи могут быть любого типа, а значения могут быть дубликатами. Пример:

  const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

- Set
Коллекция уникальных значений, без дубликатов. Пример:

  const set = new Set([1, 2, 3, 1]); // Set {1, 2, 3}

- Math
Встроенный объект, предоставляющий математические функции и константы. Примеры:

  const pi = Math.PI; // 3.141592653589793
  const sqrt = Math.sqrt(16); // 4

- Date
Объект для работы с датами и временем. Примеры:

  const now = new Date(); // Текущая дата и время
  const specificDate = new Date('2024-08-18');

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

  const regex = /abc/;
  const result = regex.test('abcdef'); // true

- Error
Объект для создания и обработки ошибок. Примеры:

  const error = new Error('Something went wrong');

📌 Заключение

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

Тэги : #javascript

434 viewsedited 13:30

M3 | WebDev

💡 Основные способы явного преобразования типов данных в JavaScript 🔄

Явное преобразование типов данных в JavaScript позволяет вручную конвертировать значения из одного типа в другой. Это помогает сделать код более предсказуемым и избежать неожиданных ошибок. Вот все основные методы явного преобразования:

🔢 1. Преобразование в число

- `Number(value)`: Преобразует значение в число.

  Number("123"); // 123
  Number(true);  // 1
  Number("");    // 0
  Number("abc"); // NaN

- Унарный оператор `+`: Преобразует значение в число.

  +"456";  // 456
  +true;   // 1

- Метод `parseInt(string, radix)`: Преобразует строку в целое число с заданной системой счисления.

  parseInt("42", 10); // 42
  parseInt("101", 2); // 5

- Метод `parseFloat(string)`: Преобразует строку в число с плавающей точкой.

  parseFloat("3.14"); // 3.14
  parseFloat("2.718"); // 2.718

📜 2. Преобразование в строку

- `String(value)`: Преобразует значение в строку.

  String(123); // "123"
  String(false); // "false"

- Метод `toString()`: Преобразует значение в строку (доступен у чисел, булевых значений, объектов и т. д.).

  (456).toString(); // "456"
  (true).toString(); // "true"

🔘 3. Преобразование в логическое значение

- `Boolean(value)`: Преобразует значение в логическое значение (true или false).

  Boolean(1);      // true
  Boolean(0);      // false
  Boolean("text"); // true
  Boolean("");     // false

- Оператор `!!` (двойное отрицание): Преобразует значение в логическое значение.

  !!"hello";  // true
  !!0;        // false
  !!null;     // false

🧩 4. Преобразование объектов и массивов

- `JSON.stringify(value)`: Преобразует объект или массив в строку JSON.

  JSON.stringify({ name: "Alice", age: 25 }); // '{"name":"Alice","age":25}'

- `JSON.parse(string)`: Преобразует строку JSON обратно в объект или массив.

  JSON.parse('{"name":"Alice","age":25}'); // { name: "Alice", age: 25 }

📅 5. Преобразование даты

- Метод `Date.prototype.toString()`: Преобразует объект Date в строку.

  new Date().toString(); // "Sat Aug 17 2024 13:42:15 GMT+0000 (Coordinated Universal Time)"

- Метод `Date.prototype.toISOString()`: Преобразует объект Date в строку в формате ISO.

  new Date().toISOString(); // "2024-08-17T13:42:15.000Z"

- Конструктор `Date(value)`: Преобразует строку или число в объект Date.

  new Date("2024-08-17T13:42:15.000Z"); // Date object

🧪6. Сравнение значений: == и ===

Оператор == (нестрогое равенство): Сравнивает значения после приведения их к одному типу. Это может привести к неожиданным результатам из-за автоматического преобразования типов.

0 == '0';         // true (строка '0' преобразуется в число 0)
null == undefined; // true (специальное правило в JavaScript)
1 == true;        // true (булевое значение true преобразуется в 1)

Оператор === (строгое равенство): Сравнивает значения без преобразования типов. Значения должны быть одного типа и равными, чтобы результат был true.

0 === '0';        // false (разные типы данных)
null === undefined; // false (разные значения)
1 === true;       // false (разные типы данных)

📌 Заключение

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

Тэги : #javascript

98 views17:30

M3 | WebDev

🚀 Массивы в JavaScript: Методы и манипуляции! 🚀

Массивы в JavaScript — это мощный инструмент для работы с упорядоченными данными! 🛠 Они позволяют хранить и управлять коллекциями элементов. Давайте подробнее рассмотрим массивы и некоторые полезные методы для работы с ними. 📚

🌟 Что такое массив?

Массив — это объект, который позволяет хранить несколько значений в одном месте. Эти значения могут быть любого типа: числа, строки, объекты и даже другие массивы! 📊

1️⃣ Создание массива

Вы можете создать массив несколькими способами:

С помощью литерала массива

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits); // Выведет: ["Apple", "Banana", "Orange"]

С помощью конструктора массива

const numbers = new Array(1, 2, 3);
console.log(numbers); // Выведет: [1, 2, 3]

2️⃣ Основные методы массива

`push` и `pop`

Добавляют и удаляют элементы с конца массива.

const stack = [1, 2, 3];
stack.push(4); // Добавляет 4 в конец
console.log(stack); // Выведет: [1, 2, 3, 4]

stack.pop(); // Удаляет последний элемент
console.log(stack); // Выведет: [1, 2, 3]

`shift` и `unshift`

Добавляют и удаляют элементы с начала массива.

const queue = [1, 2, 3];
queue.unshift(0); // Добавляет 0 в начало
console.log(queue); // Выведет: [0, 1, 2, 3]

queue.shift(); // Удаляет первый элемент
console.log(queue); // Выведет: [1, 2, 3]

`map`

Создает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // Выведет: [2, 4, 6]

`filter`

Создает новый массив с элементами, которые прошли проверку функции.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(x => x % 2 === 0);
console.log(even); // Выведет: [2, 4]

`reduce`

Применяет функцию к каждому элементу массива (слева направо) и возвращает одно значение.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // Выведет: 10

`find`

Возвращает первый элемент, который удовлетворяет условию функции.

const numbers = [1, 2, 3, 4];
const found = numbers.find(x => x > 2);
console.log(found); // Выведет: 3

`forEach`

Выполняет функцию для каждого элемента массива.

const numbers = [1, 2, 3];
numbers.forEach(x => console.log(x));
// Выведет:
// 1
// 2
// 3

### 3️⃣ Методы для поиска и сортировки

`includes`

Проверяет, содержит ли массив определенный элемент.

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('Banana')); // Выведет: true
console.log(fruits.includes('Grape')); // Выведет: false

`sort`

Сортирует элементы массива.

const numbers = [4, 2, 3, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // Выведет: [1, 2, 3, 4]

🔍 Заключение

Массивы и их методы в JavaScript — это неотъемлемая часть работы с данными. Они позволяют эффективно управлять коллекциями элементов и выполнять множество операций. 🌟 Надеюсь, этот пост помог вам лучше понять массивы и их методы!

Тэги : #javascript

111 views16:02

M3 | WebDev

Понимание this в JavaScript 🔍

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

1. Методы объекта 🧩

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

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name); // Выводит 'Alice'
  }
};
person.greet();

2. Функции как вызов 🚀

Когда функция вызывается без привязки к объекту (как обычная функция), this ссылается на глобальный объект в нестрогом режиме (window в браузере) или undefined в строгом режиме:

function show() {
  console.log(this); // В браузере выведет объект window
}
show();

Если включить строгий режим ('use strict';), то this будет undefined:

'use strict';
function show() {
  console.log(this); // Выводит undefined
}
show();

3. Конструкторы 🛠

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

function Person(name) {
  this.name = name;
}
const person = new Person('Bob');
console.log(person.name); // Выводит 'Bob'

4. Стрелочные функции →

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

const person = {
  name: 'Carol',
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // Выводит 'Carol'
    }, 1000);
  }
};
person.greet();

5. Управление this с помощью call, apply и bind 🎯

JavaScript предоставляет несколько способов явного управления значением this в функциях:

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


  function greet(greeting) {
    console.log(`${greeting}, ${this.name}`); // Выводит 'Hello, Dave'
  }

  const person = { name: 'Dave' };
  greet.call(person, 'Hello');

- apply: Метод apply похож на call, но принимает аргументы в виде массива:

function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`); // Выводит 'Hi, Eve!'
}

const person = { name: 'Eve' };
greet.apply(person, ['Hi', '!']);

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

function greet(greeting) {
console.log(`${greeting}, ${this.name}`); // Выводит 'Hey, Frank'
}

const person = { name: 'Frank' };
const greetPerson = greet.bind(person);
greetPerson('Hey');

Заключение 🎉

Понимание того, как this работает в различных контекстах и как управлять его значением с помощью call, apply и bind, является ключом к написанию надежного и предсказуемого кода в JavaScript. Эти правила помогают избежать распространенных ошибок и сделать код более понятным и поддерживаемым.

Тэги : #javascript

97 viewsedited 16:02

M3 | WebDev

🔄 Event Loop в JavaScript

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

Основные компоненты:

1. Call Stack (Стек вызовов): В нем выполняются функции в порядке LIFO (Last In, First Out). Когда функция вызывает другую функцию, она добавляется на вершину стека. Когда выполнение функции завершается, она удаляется из стека. Если стек пуст, Event Loop начинает извлекать задачи из очереди.

2. Task Queue (Очередь задач): Это очередь, куда попадают асинхронные задачи, такие как колбэки, промисы и другие операции, которые не могут быть выполнены немедленно. Когда стек вызовов становится пустым, Event Loop берет первую задачу из этой очереди и помещает ее в стек вызовов для выполнения.

3. Web API: Это интерфейсы, предоставляемые окружением (например, браузером), такие как setTimeout, DOM events, XHR и т.д. Эти API не входят в спецификацию JavaScript, но они обеспечивают взаимодействие с Call Stack и Task Queue через Event Loop.

Важные детали:

Task Queue делится на два типа очередей :

- Microtask Queue: Помимо обычной очереди задач, существует отдельная очередь для микрозадач, таких как Promise. Microtask Queue имеет более высокий приоритет, чем обычная Task Queue, и обрабатывается Event Loop сразу после выполнения всех синхронных операций и до начала выполнения макрозадач.

- Macrotask Queue: В эту очередь попадают такие задачи, как таймеры, события, AJAX-запросы и другие макрозадачи. Они обрабатываются после выполнения всех микрозадач.

Взаимодействие между компонентами:

1. Выполнение синхронного кода: Все синхронные операции выполняются в Call Stack. Например, вызов функции и ее выполнение.

2. Взаимодействие с Web API: При вызове асинхронных функций, таких как setTimeout, браузер или Node.js перемещают их в Web API, где они ждут своего завершения.

3. Добавление задач в очередь: Как только асинхронная операция завершается (например, таймер истекает), соответствующий колбэк перемещается в Macrotask Queue или Microtask Queue, в зависимости от типа задачи.

4. Обработка задач Event Loop: Event Loop проверяет, есть ли задачи в Microtask Queue и Macrotask Queue. Сначала выполняются все задачи из Microtask Queue, затем Event Loop переходит к задачам из Macrotask Queue.

Пример работы Event Loop:

console.log('Start'); // 1

setTimeout(() => {
  console.log('Timeout'); // 4
}, 0);

Promise.resolve().then(() => {
  console.log('Promise'); // 3
});

console.log('End'); // 2

Последовательность выполнения:
1. Выполняется первый console.log('Start') и выводится в консоль.
2. Вызов setTimeout передает колбэк в Web API, где он ожидает выполнения.
3. Промис перемещает свой колбэк в Microtask Queue.
4. Выполняется второй console.log('End').
5. Event Loop проверяет Microtask Queue, видит там колбэк промиса и выполняет его.
6. После выполнения всех микрозадач, Event Loop переходит к Task Queue и выполняет колбэк из setTimeout.

Результат в консоли:
Start → End → Promise →

Timeout

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

Такое глубокое понимание Event Loop помогает писать более эффективный код и лучше разбираться в особенностях работы JavaScript. 🚀

Тэги : #javascript

81 viewsedited 17:40

M3 | WebDev

🚀 Базовое Понимание и Возможности Классов в JavaScript

В JavaScript классы появились в ES6 и предоставляют новый способ работы с объектами, однако под капотом классы — это всё ещё функции. Классы упрощают создание объектов, наследование и использование методов, делая код более понятным и структурированным. Давайте рассмотрим основные аспекты работы с классами.

📚 Базовый синтаксис класса

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

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Привет, я ${this.name}!`);
  }
}

const user = new User('Иван');
user.sayHi(); // Привет, я Иван!

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

🧬 Наследование классов

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

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} издает звук.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} лает.`);
  }
}

const dog = new Dog('Барбос');
dog.speak(); // Барбос лает.

📊 Статические свойства и методы

Статические методы и свойства принадлежат классу, а не его экземплярам. Они определяются с помощью ключевого слова static.

class MathUtils {
  static square(x) {
    return x * x;
  }
}

console.log(MathUtils.square(4)); // 16

🔒 Приватные и защищённые методы и свойства

С появлением ES2022 в JavaScript были введены приватные свойства и методы, которые начинаются с символа #. Такие свойства и методы доступны только внутри класса.

class User {
  #password;

  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  checkPassword(password) {
    return this.#password === password;
  }
}

const user = new User('Иван', '1234');
console.log(user.checkPassword('1234')); // true

🔧 Расширение встроенных классов

Вы можете расширять встроенные классы JavaScript, такие как Array, добавляя собственные методы.

class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

const arr = new PowerArray(1, 2, 3);
console.log(arr.isEmpty()); // false

🔍 Проверка класса: "instanceof"

Оператор instanceof используется для проверки, принадлежит ли объект определённому классу или его наследнику.

console.log(arr instanceof PowerArray); // true

🧩 Примеси

Примеси позволяют разделять функциональность между классами. В JavaScript примеси реализуются через простое добавление методов в прототип класса.

let sayHiMixin = {
  sayHi() {
    console.log(`Привет, ${this.name}`);
  }
};

class User {
  constructor(name) {
    this.name = name;
  }
}

Object.assign(User.prototype, sayHiMixin);

const user = new User('Иван');
user.sayHi(); // Привет, Иван

🧭 Заключение:

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

Тэги : #javascript

87 viewsedited 17:01

M3 | WebDev

🚀 Базовые Принципы ООП

Классы в JavaScript предоставляют мощные инструменты для организации и структурирования кода, используя ключевые принципы объектно-ориентированного программирования (ООП). Давайте разберём основные из них.

🛡 Инкапсуляция

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

Пример был показан в предыдущим посту .

🧬 Наследование

Наследование позволяет одному классу (подклассу) унаследовать свойства и методы другого класса (родительского), расширяя и переопределяя их при необходимости. Это помогает избегать дублирования кода.

Пример был показан в предыдущим посту .

🎭 Полиморфизм

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

Пример:

class Animal {
  speak() {
    console.log('Животное издает звук.');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Собака лает.');
  }
}

class Cat extends Animal {
  speak() {
    console.log('Кошка мяукает.');
  }
}

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Собака лает.
// Кошка мяукает.

🔗 Внедрение зависимостей (Dependency Injection)

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

Пример:

class Engine {
  start() {
    console.log('Двигатель запущен');
  }
}

class Car {
  constructor(engine) {
    this.engine = engine;
  }

  drive() {
    this.engine.start();
    console.log('Машина едет');
  }
}

const engine = new Engine();
const car = new Car(engine);
car.drive();
// Двигатель запущен
// Машина едет

🧩 Абстракция

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

class CoffeeMachine {
  makeCoffee() {
    this.#boilWater();
    this.#brewCoffee();
    this.#pourInCup();
    console.log('Coffee is ready!');
  }

  #boilWater() {
    console.log('Boiling water...');
  }

  #brewCoffee() {
    console.log('Brewing coffee...');
  }

  #pourInCup() {
    console.log('Pouring coffee into cup...');
  }
}

const myCoffeeMachine = new CoffeeMachine();
myCoffeeMachine.makeCoffee();

📄 Интерфейсы (в контексте TypeScript)

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

Пример:

interface Drivable {
  drive(): void;
}

class Car implements Drivable {
  drive() {
    console.log('Машина едет');
  }
}

const car = new Car();
car.drive(); // Машина едет

🧭 Заключение:

📢 Эти принципы помогают создавать мощные и гибкие архитектуры, которые легко поддерживать и расширять. Начните использовать их в своём коде, и вы почувствуете, как он становится более структурированным и понятным! А следующий пост будет про приципы SOLID 🚀

Тэги : #javascript

102 viewsedited 14:31

M3 | WebDev

🔥 SOLID Принципы в JavaScript 🚀

SOLID — это набор из пяти принципов, которые помогают писать понятный, поддерживаемый и расширяемый код в объектно-ориентированном программировании (ООП). Давайте разберём каждый принцип с примерами на JavaScript! ✨

1️⃣ Single Responsibility Principle (SRP) — Принцип единственной ответственности

Каждый класс должен иметь одну ответственность.

class User {
  constructor(name) {
    this.name = name;
  }
}

class UserRepository {
  save(user) {
    // Сохраняет пользователя в БД
  }
}

Здесь User отвечает за данные пользователя, а UserRepository — за сохранение данных. 📝

2️⃣ Open/Closed Principle (OCP) — Принцип открытости/закрытости

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

class Shape {
  area() {
    throw 'Метод должен быть реализован';
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}

Вы можете добавить новый класс Square, не меняя код Circle или Shape. ⭕️➕🔲

3️⃣ Liskov Substitution Principle (LSP) — Принцип подстановки Барбары Лисков

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

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  constructor(side) {
    super(side, side);
  }
}

Экземпляр Square может заменить Rectangle и будет работать корректно. 🟦➡️🟥

4️⃣ Interface Segregation Principle (ISP) — Принцип разделения интерфейса

Лучше много маленьких интерфейсов, чем один большой. Пример на TS :

interface Printer {
  print(doc: string): void;
}

interface Scanner {
  scan(): string;
}

class MultiFunctionDevice implements Printer, Scanner {
  print(doc: string) {
    console.log(`Печать документа: ${doc}`);
  }

  scan() {
    return 'Документ отсканирован';
  }
}

💡 Реализуйте только необходимые интерфейсы.

5️⃣ Dependency Inversion Principle (DIP) — Принцип инверсии зависимостей

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

class MySQLConnection {
  connect() {
    console.log('Подключение к MySQL');
  }
}

class MongoDBConnection {
  connect() {
    console.log('Подключение к MongoDB');
  }
}

class UserRepository {
  constructor(dbConnection) {
    this.dbConnection = dbConnection;
  }

  connect() {
    this.dbConnection.connect();
  }
}

const userRepository = new UserRepository(new MySQLConnection());
userRepository.connect();

Здесь UserRepository зависит от абстракции подключения к БД, а не от конкретной реализации, что упрощает замену БД. 🛠

⚙️ Применение SOLID принципов помогает создавать гибкие и поддерживаемые приложения! Используйте их, чтобы ваш код стал прочным, как камень! 💪🔥

Тэги : #javascript

105 viewsedited 12:01

M3 | WebDev

📜 Свойства объекта в JavaScript и их конфигурация

Свойства объектов в JavaScript не ограничиваются только значениями. Они обладают флагами и могут быть геттерами/сеттерами. Давайте разберемся, как это работает.

🔍 Флаги и дескрипторы свойств

Когда создается объект, его свойства имеют три базовых флага:

1. writable: Если true, значение свойства можно изменять.
2. enumerable: Если true, свойство участвует в перечислении через циклы (for...in) или методы (Object.keys).
3. configurable: Если true, свойство можно удалить, а также изменять его флаги.

Флаги задаются при помощи дескрипторов. По умолчанию все флаги имеют значение true.

🛠 Пример использования флагов

const car = { brand: "Toyota" };

Object.defineProperty(car, 'brand', {
  writable: false,
  enumerable: false,
  configurable: false
});

// Теперь свойства "brand" не будет видно в циклах и его нельзя изменить или удалить.
console.log(car.brand); // Toyota
car.brand = "Honda"; // Ошибка: свойство недоступно для изменения

Для получения дескрипторов свойств используется Object.getOwnPropertyDescriptor:

let descriptor = Object.getOwnPropertyDescriptor(car, 'brand');
console.log(descriptor);
// Вывод: { value: 'Toyota', writable: false, enumerable: false, configurable: false }

🛠 Свойства — геттеры и сеттеры

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

- Геттер (get): возвращает значение при обращении к свойству.
- Сеттер (set): вызывается при установке значения свойства.

🛠 Пример геттеров и сеттеров

const person = {
  firstName: 'Alice',
  lastName: 'Johnson',

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },

  set fullName(value) {
    [this.firstName, this.lastName] = value.split(' ');
  }
};

console.log(person.fullName); // Alice Johnson
person.fullName = 'John Doe';
console.log(person.firstName); // John
console.log(person.lastName);  // Doe

В этом примере, при присвоении person.fullName у нас автоматически устанавливаются firstName и lastName.

📋 Практические случаи применения:

1. Контроль доступа: Изменение writable позволяет защитить важные данные от случайных изменений.
2. Настраиваемое поведение: Использование геттеров и сеттеров упрощает работу с данными, добавляя возможность валидации или форматирования.
3. Оптимизация производительности: Отключение enumerable для некоторых свойств помогает скрыть их в циклах или при копировании объектов.

📊 Сводка: В чем преимущества?

- 📌 Безопасность данных: Защита свойств от изменений или удаления.
- 📌 Гибкость: Настраиваемое поведение при чтении и записи.
- 📌 Удобство работы с объектами: Легкость реализации вычисляемых свойств и контроля за доступом.

Изучение свойств и их конфигурации поможет глубже понять JavaScript и писать более чистый и защищенный код! 🎉

Тэги : #javascript

70 viewsedited 19:01

M3 | WebDev

Пост про связанные списки 📚

Связанный список — это абстрактная структура данных, позволяющая вставлять элементы в любую точку памяти за O(1) (константное время). Чтение элементов занимает O(n), где *n* — количество элементов в списке.

🧩 Основные компоненты связанного списка:

1. Узел (Node): Содержит значение и ссылку на следующий узел.
2. Заголовок (Head): Указывает на начало списка.
3. Хвост (Tail): Ссылка на последний узел, который ссылается на null.

✨ Двухнаправленный связанный список:

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

📊 Сравнение массивов и связанных списков:

1. Хранение данных:

- Массив: Элементы массива хранятся в памяти последовательно, непрерывно. Это означает, что доступ к элементам массива по индексу осуществляется за константное время.

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

2. Размер и изменяемость:

- Массив: Размер массива фиксирован и определяется при создании. Изменение размера массива может потребовать перевыделения памяти и копирования элементов.

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

3. Вставка и удаление элементов:

- Массив: Вставка и удаление элементов из середины массива требует перемещения всех элементов после изменяемого, что может быть затратно по времени.

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

4. Память:

- Массив: Массивы могут потреблять больше памяти, чем реально требуется, особенно если размер массива больше, чем количество используемых элементов.

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

5. Сложность операций:

- Массив: В среднем доступ к элементу массива по индексу имеет сложность O(1), а вставка и удаление элементов в середине массива имеют сложность O(n), где n - размер массива.

- Связанный список: Доступ к элементу по индексу имеет сложность O(n), а вставка и удаление элементов в середине списка имеют сложность O(1).

Пример реализации на JavaScript:

class Node {
    constructor(value, next = null) {
        this.value = value;
        this.next = next;
    }
}

class LinkedList {
    constructor() {
        this.head = null;
        this.tail = null;
    }

    append(value) {
        const newNode = new Node(value);

        if (!this.head || !this.tail) {
            this.head = newNode;
            this.tail = newNode;
            return this;
        }

        this.tail.next = newNode;
        this.tail = newNode;
        return this;
    }

    prepend(value) {
        const newNode = new Node(value, this.head);
        this.head = newNode;

        if (!this.tail) {
            this.tail = newNode;
        }
        return this;
    }

    find(value) {
        if (!this.head) return null;
        let current = this.head;
        
        while (current) {
            if (current.value === value) return current;
            current = current.next;
        }
        return null;
    }

    insertAfter(value, prevNode) {
        if (prevNode === null) return this;
        const newNode = new Node(value);
        newNode.next = prevNode.next;
        prevNode.next = newNode;

        if (newNode.next === null) this.tail = newNode;
        return this;
    }
}

🎯 Где используются связанные списки?

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

Тэги : #javascript #структурыданных

75 views19:01

About

Blog

Apps

Platform