Фронтенд Гайд

📌 Чем let отличается от var ? Ключевые слова let и var используются для объявления переменных, но между ними есть несколько важных различий, касающихся области видимости, поднятия (hoisting) и создания блока. 🤔 Область видимости (Scope) ➕ Var: Объявления переменных с использованием var имеют функциональную область видимости, что означает, что переменная, объявленная с помощью нее внутри функции, доступна везде в этой функции. ➕ Let: В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока. 🤔 Поднятие (Hoisting) ➕ Var: Переменные, объявленные с ее помощью, поднимаются в начало функции или скрипта. Это означает, что они могут быть использованы до своего объявления, хотя до инициализации они будут иметь значение undefined. ➕ Let: Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ). 🤔 Создание в глобальном контексте ➕ Var: Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах). ➕ Let: Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта. 🤔 Примеры:

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

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

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

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

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

📲 Weather App Concept – красивая анимация для мобильного приложения, написанная на чистом CSS. Лучше всего работает в Chrome.

🖥 Бесплатный фоновый ремувер заднего фона, работающий в вашем браузере на базе WebGPU (с использованием transformer.js)

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Какие особенности в js ? Спросят с вероятностью 3% Это высокоуровневый, интерпретируемый язык программирования, который обладает рядом уникальных особенностей и возможностей. Рассмотрим основные из них: 1️⃣Динамическая типизация Является языком с динамической типизацией, что означает, что тип переменной определяется во время выполнения, а не во время компиляции. Тип переменной может изменяться в процессе выполнения программы.

let variable = 42; // Число
variable = 'Hello, world!'; // Строка

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

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

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
  return fn(value);
}

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

3️⃣Замыкания (Closures) Это функции, которые имеют доступ к переменным из своей внешней функции даже после того, как внешняя функция завершила выполнение. Это позволяет создавать функции с привязанными к ним переменными из внешнего окружения.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4️⃣Прототипное наследование Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.

const animal = {
  speak: function() {
    console.log(${this.name} издает звук);
  }
};

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук

5️⃣Асинхронность и события Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения. Использование коллбеков:

function fetchData(callback) {
  setTimeout(() => {
    callback('Данные получены');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование промисов:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование async/await:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // Данные получены (через 1 секунду)
}

getData();

6️⃣Интуитивно понятная работа с объектами Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов. Деструктуризация:

const person = {
  name: 'Alice',
  age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

Операторы расширения:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

🌟 Animated Star Rating Каждая звезда - это радио кнопка, при нажатии на которую задействуются свои CSS-стили.