Заметки для облегчения изучения Javascript.

Быстрый совет |
🔹Найдите ⚡для каждой темы
🔹Найдите мем😆 в конце каждой темы

☘️Каталог

  • Отладка
  • Модули
  • Обратные вызовы
  • Привязать, подать заявку, позвонить
  • Этот
  • Контекст В.С. Объем
  • Лексическая область
  • Подъемник

Хорошие ресурсы🌳
ZeroToMastery | Javascript — продвинутая концепция
Все коды в моем Github | Расширенный J аваскрипт

До начала,

Чтобы понять ECMAScript.
«Попробуйте | Переполнение стека"

Версия Javascript

Загляните сюда | W3Schools

⚡Отладчик

Еще в МДН

Оператор debugger вызывает любые доступные функции отладки, такие как установка точки останова. Если функции отладки недоступны, этот оператор не действует. — MDN

const c = [[1, 2], [3, 4], [5, 6], 7].reduce((accumulator, array) => {
  console.log('array', array)
  return accumulator.concat(array)
}, [])

Если мы поместим коды в консоль в браузере,

когда вы нажимаете ENTER, у нас появляется новое окно отладки.

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

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

⚡JS-модули

Что такое модуль? | Подробнее на Javascript.info

Руководство для начинающих | FreeCodeCamp

🔸Примеры из W3Schools

🔹Именованный экспорт

// a.js
const name = "Alice";
const age = 18;

export {name, age};

🔹Экспорт по умолчанию

// b.js
const intro = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default intro;

🔹Импорт

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

Именованные экспорты строятся с использованием фигурных скобок. Экспорт по умолчанию — нет. — W3Schools

import { name, age } from "./a.js";

🔹Импорт модулей из экспорта по умолчанию

import intro from "./b.js";

⚡Обратные звонки

Пример в W3Schools

ВЫЗВАТЬ функцию в функции с именем 😮

function a(zz) {
  console.log(zz)
}

function b(x, y, c) {
  let z = x + y;
  c(z);
}

b(5, 5, a);

Вы вызываете функцию (b) с обратным вызовом (c)

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

Он передается b() в качестве аргумента.

⚡связать

Отличные примеры в freeCodeCamp |
Как использовать функции вызова, подачи заявки и привязки⭐⭐⭐⭐⭐

С помощью метода bind() объект может заимствовать метод у другого объекта. — W3Schools

Вам также необходимо знать концепцию this, чтобы понять bind()метод.

🔸это

Еще в W3Schools

🔹Это ключевое слово, а не переменная.

🔹относится к объекту

const a = {
  id: 2,
  first: "Alice",
  last : "Juice",
  title: 'Miss',
  greeting : function() {
    return this.title + " " + this.last;
  }
};

console.log(a.greeting())

Это относится к объекту человека.

🔸связать

Еще в МДН

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

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

const a = {
  x: 18,
  y: function() {
    return this.x;
  }
};

const b = a.y;
console.log(b());  // undefined

const c = b.bind(a);
console.log(c()); // 18

🔸Звоните

Аналогично методу Apply().

function A(x, y){
 this.x = x;
 this.y = y;
}

function B(x1){
 A.call(this, "Detail 01", "sth 01");
 this.x1 = x1;
 console.log(`A details = `, this);
}

function C(x2){
 A.call(this, "Detail 02", "sth 02");
 this.x2 = x2;
 console.log(`A details = `, this);
}

const bb = new B('sth new');
const aa = new C(123456);

🔸Применить

Узнайте больше в W3Schools
Отличные примеры в freeCodeCamp ⭐⭐⭐⭐⭐

🔹apply() принимает аргументы в виде массива или подобного массиву объекта.

🔹call() принимает аргументы отдельно.

const a = [true,"a", "b",false];
const b = [0, 1, 2];
a.push.apply(a, b);
console.log(a);

⚡Подводя итог

🔹Call помогает заменить значение this внутри функции.

🔹Apply может передавать массив в качестве списка аргументов.

🔹Bind создает другую функцию, которую вы можете выполнить позже с предоставленным новым контекстом this.

⚡Контекст и объем

Еще в Modernweb | понимание контекста и контекста в javascript
Отличная статья об этом | freeCodeCamp ⭐⭐⭐⭐⭐

По сути, область на основе функций, а контекст на основе объектов.
— Модернвеб

🔸Контекст

Контекст всегда является значением ключевого слова this, которое является ссылкой на объект, который владеет исполняемым в данный момент кодом.
— freeCodeCamp

🔸Область

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

⚡Лексический объем

Еще в freeCodeCamp

А.К.А. Статический объем

Лексическая область видимости — это место, где переменная определяется, а НЕ место, где она вызывается.

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

const a = "HEYYYYYEA";

function b() {
  return a;
}

Еще один пример, вдохновленный freeCodeCamp.

function b() {
  const a = "HEYYYYYEA";
  return a;
}

Переменная a определена в локальной среде функции b.

b() = переменная лексического окружения a.

⚡Подъем

Отличная статья от freeCodeCamp

🔹Перемещение объявлений наверх в качестве поведения JS по умолчанию .
🔹переменная может использоваться до того, как она была объявлена.
— W3Schools

🔸Функция подъема

a(); 

function a() {
  console.log('This function has been hoisted.');
};

🔸Переменный подъем

x = 5; 

var x; 

console.log(x)

⚡IIFE

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

🔹Синтаксис —

(function (){ 
  // sth
})();

🔸Нормальная функция

    function a() {
        console.log("Heeeeeyyyea");
    };
    a();

🔸IIFE

// IIFE
(function() {
        console.log("Heeeeeyyyea");
})();

🔹IIFE имеет свою собственную область применения.

🔹Избегайте загрязнения глобального пространства имен

🔹Для создания замыканий

🔹Избегайте конфликтов имен переменных между библиотеками и программами.

🔹IIFE используется для создания частных и общедоступных переменных и методов.

🔹Используется для выполнения функций async и await

— Еще от GeeksforGeeks