Чтение будет долгим, но позвольте мне сказать это еще раз.
JAVASCRIPT — это сложно. В последний раз мы встречались, когда я вступал в мир Javascript, ясноглазый, полный надежд программист, вступающий в дикие джунгли и говорящий: «Насколько это может быть сложно?». Насколько я ошибался???. Стало сложнее, я выживаю (с трудом), вот небольшая хаотичная история о моем путешествии.

Переменные: начало безумия
Переменные — это контейнеры, содержащие значения, в которых вы храните данные или манипулируете ими. Я имею в виду, почему у нас есть три способа их создания: var, let и const? почему? смех в ES6.
var: Они сказали, что вар — это болтливая пушка. как играть в азартную игру. Не приближайтесь к нему.
let: отлично подходит для переменных, которые могут меняться. Легче управлять.
Const: для значений, которые остаются неизменными. недвижимый. Ох, константа не означает, что значение не может измениться, это просто означает, что вы не можете его переназначить.
Примечание: ECMAScript 2015 или ES6 был второй крупной версией JavaScript.
Ох, мы попрощались с конкатенацией строк, привет шаблонным литералам. С литералами шаблонов Теперь вы можете легко использовать обратные кавычки и вставлять переменные с помощью ${}. Здесь жизнь стала немного проще, но разобраться, когда использовать обратные кавычки, а когда кавычки? Еще один сумасшедший.

// Good old concat
const message = "Hi, "   name   ". You are "   age   " years old.";
// Template literal
const message = `Hi, ${name}! You are ${age} years old.`;

Функции: AKA Мистер Многоразовость, Мистер Ремонтопригодность...
Функция — это набор операторов, выполняющих задачу. Состоит из ключевого слова функции, имени функции, параметра или нет, оператора Js в фигурных скобках.

function greet() {
  console.log("Hello, fellow strugglers?!");
}

Поначалу они казались простыми: инкапсулировать некоторую логику, вызвать ее (я говорю «вызвать») и — бац! Вы программируете.
Затем ES6 сказал: «Это стрелочные функции, используйте их». Стрелочные функции выглядят просто, не так ли? Просто короткий способ написания функций. Потребовалось некоторое время, чтобы получить синтаксис.

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

Петли: Танцы с бесконечностью.
Множество способов страдать. Циклы могут выполнять блок кода несколько раз. Они удобны, если вы хотите запускать один и тот же код снова и снова, каждый раз с другим значением. Их много:
1. Пока цикл: продолжает цикл, пока условие истинно. Зло. и я не говорю о его двоюродном брате, пока.
2. for Loop: Старый добрый цикл for, чувак. надежный цикл for. Так знакомо. Настолько безопасно и настолько полно возможностей, что можно создавать бесконечные циклы, когда вы забываете увеличить переменную.
3. forEach: — более крутой и хипстерский аналог цикла for. Ему не нужны счетчики, он не ведет меня в бесконечность. мой мужчина.
4. & 5. for..in и for..of: один отлично подходит для циклического обхода объектов, другой предназначен для перебора массивов. Я продолжаю их смешивать и учусь через боль. все еще учусь.

//for loop
for (let i = 0; i  console.log(num));

Массивы: список, который продолжает искать
Массивы начинались очень многообещающе. Простой список предметов. Толкайте вещи, вытаскивайте вещи. Легко, правда?

let shoppingList = ["apples", "bananas", "chocolate"];
shoppingList.push("ice cream");
console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']

Введите фильтр, карту, поиск и остальную часть группы методов массива. С тех пор мой мозг изменился.
Метод filter() создает новый массив, заполненный элементами, прошедшими проверку, предоставленную функцией.
Метод find() возвращает значение первого элемента, прошедшего проверку. Методов массива так много, мне нужна документация для каждого? Я имею в виду длину, сращивание, срез, объединение, всплывание, нажатие, отмену смещения, сдвиг, карту..., давайте остановимся на этом.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

Объекты: запутанный родственник массивов
Затем появились объекты. Объекты похожи на массивы, но с ключами и значениями. Я подумал: «Круто, я справлюсь с этим». Но затем JavaScript добавил методы, и внезапно объекты начали делать что-то самостоятельно. И тогда в уравнение вошел массив объектов. Доступ к свойствам я использую либо через точку, либо через скобки. И не заставляйте меня начинать с .этого

//Without method
let shoppingCart = {
  apples: 3,
  bananas: 2,
  chocolate: 1
};
// with method
let cart = {
  items: ["apple", "banana"],
  addItem(item) {
    this.items.push(item);
  }
};
cart.addItem("chocolate");
console.log(cart.items); // ['apple', 'banana', 'chocolate']

Манипулирование DOM: где началась настоящая борьба
Как только я почувствовал уверенность в работе с массивами и объектами, я подумал: «Время манипулировать DOM! Теперь я практически веб-разработчик!» «Ты ничего не знаешь», — сказала Игритт.
«Это должно быть легко», — сказал я еще раз. Просто возьмите элемент и измените его. Если это идентификатор, мне подойдет getElementbyId. Также существует класс getElementsbyClassName или селектор запросов, а также класс All со своим братом.
А еще есть вся эта история с addEventListener. Конечно, это работает, но иногда кажется, что события возникают так, будто у них есть собственный разум.
Затем я попробовал создать корзину для покупок. Мне потребовалось несколько дней и много сигналов SOS моим ученым коллегам. Здесь я добавляюChild, удаляюChild, создаю элементы, захватываю элементы, устанавливаю атрибуты, стилизирую, вызываю функции для функций.
Затем смело добавил макет базы данных; я и снова манипуляция массивом. Обращаюсь, нажимаю, нахожу, устаю (снова встаю).

Импорт и экспорт: смело разделяя безумие??
В какой-то момент я написал так много JavaScript, что мне пришлось модульно структурировать свой код. Введите импорт и экспорт.

Copy code
// module.js
export function greet() {
  console.log("Hello from the module!");
}

// main.js
import { greet } from './module.js';
greet();

Я думал, что разбиение моего кода на более мелкие части облегчит задачу. Я даже не подозревал, что в конечном итоге принесу гору путаницы.

Теперь я собираюсь начать объектно-ориентированное программирование (ООП), звучит заманчиво, но позвольте мне сначала насладиться выходными, прежде чем я снова потеряюсь.
Спасибо, что остались до конца. Цель по-прежнему остается на 1% лучше каждый день. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode