​Что такое контекст в функции ?

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

Как работает this в разных ситуациях:
1. В глобальном контексте: Вне любой функции он ссылается на глобальный объект. В браузере это будет window, а в Node.js — global.

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

3. При использовании конструктора (с new): Будет ссылаться на вновь созданный объект.

4. При использовании call(), apply(), bind(): Эти методы позволяют явно задать контекст для этой в функции.

Примеры:

Глобальный контекст

console.log(this === window); // true в браузере

Функция внутри объекта

const person = {
  name: 'Иван',
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // Вывод: Иван

В этом примере this внутри sayName ссылается на объект person.

Изменение контекста с bind()

const person = {
  name: 'Иван',
};

function sayName() {
  console.log(this.name);
}

const sayNameForPerson = sayName.bind(person);
sayNameForPerson(); // Вывод: Иван

Здесь мы явно задаем контекст для this с помощью bind(), чтобы функция sayName могла ссылаться на person.

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

👉 @seniorFront

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 1 messages
Our filtering prevented you from: 9 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)
Frontender's notes [ru]: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 0 messages
Our filtering prevented you from: 10 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

💾 Stacked Cards with Autoplay – карточки, которые перелистываются автоматически. Активная карточка имеет слабую оранжевую подсветку в виде рамки. Подсветка не исчезает во время анимации.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1987
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 21 messages
Today you received: 1 messages
Our filtering prevented you from: 20 messages

Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 11 message(s)
Frontender's notes [ru]: 4 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 0 messages
Our filtering prevented you from: 10 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Frontender's notes [ru]: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

This is a daily stats digest!
Today the bot processed: 20 messages
Today you received: 0 messages
Our filtering prevented you from: 20 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 12 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Frontender's notes [ru]: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

👀 Код без боли: шрифты, которые спасут твои глаза

Если ты все еще не нашел идеальный шрифт для работы, эта статья может спасти твое зрение.

Читать...


Original post link: t.me/frontendnoteschannel/4013
Forwarded and filtered by @smartfeed_bot

👩‍💻 Когда нужен TypeScript: введение в мир надежного программирования

Поговорим про введение в TypeScript и то, как с помощью него мы можем сделать наше программирование и наш код на JavaScript более надежными и прогнозируемыми.

Читать...


Original post link: t.me/frontendnoteschannel/4014
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 2 messages
Our filtering prevented you from: 8 messages

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

This is a daily stats digest!
Today the bot processed: 17 messages
Today you received: 0 messages
Our filtering prevented you from: 17 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 12 message(s)
Frontender's notes [ru]: 3 message(s)
Веб-страница: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

🖥 Самые интересные публикации за последние дни:

• Когда нужен TypeScript: введение в мир надежного программирования

• Посмотрим на never с разных сторон?

• Что нас ждет в Next.js 15: обзор заявленных новинок

• Пишем одностраничное приложение с помощью htmx

• Веб-доступность. Бесконечная лента


Original post link: t.me/frontendnoteschannel/4019
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 1 messages
Our filtering prevented you from: 11 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 5 message(s)
Frontender's notes [ru]: 3 message(s)
Сайтодел | GitHub, Верстка, Сайты, FullStack: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

AI Side Panel

Интересное Chrome-расширение, с помощью которого можно вызвать ChatGPT и Google Gemini прямо в окне браузера в пару кликов.

Есть одно — для работы потребуется VPN. Сама же панель открывается комбинацией Alt + Q. 

Ссылка на расширение: https://chromewebstore.google.com/detail/ai-side-panel/icapcpllhdnnpcmfdcgpnbgchfenmjmg


Original post link: t.me/tproger_web/4864
Forwarded and filtered by @smartfeed_bot

✔️ Валидация модели данных в ASP.NET Core 8.0 на основе HTMX

В статье мы освоим базовую реализацию валидации данных на стороне сервера. На стороне сервера мы используем самый простой способ коммуникации - HTTP.

Читать...


Original post link: t.me/frontendnoteschannel/4045
Forwarded and filtered by @smartfeed_bot

👩‍💻 Форматирование списка чисел

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

Пример: Для списка [-10, -9, -8, -6, -3, -2, -1, 0, 1, 3, 4, 5, 7, 8, 9, 10, 11, 14, 15, 17, 18, 19, 20] функция должна вернуть строку "-10--8,-6,-3-1,3-5,7-11,14,15,17-20".

Решение задачи🔽

function solution(list) {
let result = [];
let i = 0;

while (i < list.length) {
let start = list[i];
while (list[i + 1] - list[i] === 1) i++;
let end = list[i];

if (end - start >= 2) {
result.push(`${start}-${end}`);
} else {
result.push(start.toString());
if (end !== start) {
result.push(end.toString());
}
}
i++;
}

return result.join(',');
}


Original post link: t.me/frontendnoteschannel/4046
Forwarded and filtered by @smartfeed_bot

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

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

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

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

3. Токсичность
Пожалуй, самое затасканное понятие, которое часто неверно понимают. Токсичность — это не «плохое поведение», а действия, которые отравляют окружение при контакте. К примеру, собеседник вполне себе вежлив, но капля сарказма тут, усмешка там и вот уже с ним нет желания говорить даже в чате, не то, что в реале.

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

5. Хамство
Одна из самых старых форм выражения эмоций, которую на фоне остального негатива почти уже не обращают внимания, так как просто привыкли и очерствели от окружающего. Один послал на другого, тот в ответ сказал то же самое — все «довольные» разошлись. В коллективе же такое поведение медленно разъедает команду, люди перестают доверять друг другу и просто общаться.

👉 @seniorFront

👩‍💻 Проверка сбалансированных скобок

Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке.

Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}" — false.

Решение задачи🔽

function isBalanced(str) {
const stack = [];
const pairs = { ')': '(', '}': '{', ']': '[' };

for (let char of str) {
if (['(', '{', '['].includes(char)) {
stack.push(char);
} else if ([')', '}', ']'].includes(char)) {
if (stack.pop() !== pairs[char]) return false;
}
}
return stack.length === 0;
}

// Пример использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false


Original post link: t.me/frontendnoteschannel/4054
Forwarded and filtered by @smartfeed_bot

👩‍💻 Упаковка массива последовательностей

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

Пример: Для массива [1, 2, 3, 5, 6, 8, 9, 10] функция должна вернуть [[1, 2, 3], [5, 6], [8, 9, 10]].

Решение задачи🔽

function packSequences(arr) {
let result = [];
let temp = [];

for (let i = 0; i < arr.length; i++) {
if (temp.length === 0 || arr[i] === arr[i - 1] + 1) {
temp.push(arr[i]);
} else {
result.push(temp);
temp = [arr[i]];
}
}
if (temp.length > 0) result.push(temp);

return result;
}

// Пример использования:
console.log(packSequences([1, 2, 3, 5, 6, 8, 9, 10])); // [[1, 2, 3], [5, 6], [8, 9, 10]]


Original post link: t.me/frontendnoteschannel/4067
Forwarded and filtered by @smartfeed_bot

#вопросы_с_собеседований
Объясните стрелочные функции.

Стрелочная функция – это краткий способ записи функциональных выражений.

Стрелочные функции не являются конструкторами, не поддерживают ключевые слова this, arguments, super и new.target и записываются так, как показано на картинке.


Original post link: t.me/senior_front/2294
Forwarded and filtered by @smartfeed_bot