Добро пожаловать в серию «Погружение в Javascript», посвященную изучению и пониманию самых глубоких концепций самого популярного в мире языка программирования. В этой серии мы погрузимся во внутреннюю работу Javascript и демистифицируем сложные темы, необходимые для того, чтобы стать опытным и эффективным разработчиком. Независимо от того, являетесь ли вы новичком, который хочет изучить основы, или опытным разработчиком, который хочет вывести свои навыки на новый уровень, эта серия статей для вас, так что берите чашку кофе и начнем!

Давайте начнем!

Память для основ

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

Если вы опытный разработчик JS и вам не нужно обновление памяти, я предлагаю вам перейти к следующей главе этой серии, где мы обсудим о цикле событий. Увидимся там!

Переменные

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

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

При объявлении переменной вы также можете присвоить ей значение. Например:

let foo = 5;
const bar = "What and awesome post!";

ECMAScript

В предыдущем разделе мы упомянули ES6, когда говорили о let и const. Это означает «ECMAScript 6». Но что это?

ECMAScript — это официальное название стандарта, определяющего язык программирования JavaScript. Это спецификация, описывающая правила и принципы того, как должен работать и реализовываться JavaScript.

По сути, это набор правил, определяющих, как должен работать JavaScript. Думайте об этом как о чертеже дома. Подобно тому, как план сообщает строителям, как построить дом, ECMAScript сообщает программистам, как писать код JavaScript.

Что касается его эволюции, ECMAScript претерпел несколько изменений, последним из которых является ECMAScript 11. Каждая новая версия, также известная как издание, добавляет новые функции и улучшает существующие. Некоторые из известных версий: ECMAScript 5 (ES5), ECMAScript 6 (ES6), ECMAScript 7 (ES7), ECMAScript 8 (ES8), ECMAScript 9 (ES9), ECMAScript 10 (ES10) и ECMAScript 11 (ES11).

Например, до ES6 let и const не существовало, поэтому разработчики могли объявлять переменные только с var.

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

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

Типы данных

Типы данных используются для классификации различных типов данных. Они являются основными строительными блоками языка. В JavaScript есть шесть примитивных типов данных: Number, String, Boolean, Symbol, BigInt и undefined. Эти типы данных являются самыми простыми и основными типами данных в JavaScript.

  1. Число: JavaScript использует один тип числа, которое может быть записано с десятичной точкой или без нее. Числа также можно записывать в экспоненциальном представлении.
  2. Строка: Строка представляет собой последовательность символов, используемую для представления текста. Строки могут быть созданы с использованием одинарных или двойных кавычек.
  3. Boolean: логический тип данных имеет только два возможных значения: true или false. Он используется для представления логических значений, таких как истина или ложь.
  4. Символ: символ — это новый тип данных, представленный в ES6, он используется для создания уникальных идентификаторов.
  5. BigInt: BigInt — это новый тип данных, представленный в ES10. Он используется для представления целых чисел, превышающих максимальное значение, которое может храниться в обычном числе.
  6. undefined: переменная, которая была объявлена, но ей не присвоено значение, имеет значение undefined. Мы обсудим неопределенный тип данных в следующей главе «Цикл событий».

Существует также несколько сложных типов данных: объекты и массивы. Эти типы данных могут хранить несколько значений и иметь методы и свойства.

  1. Объекты: объекты используются для хранения коллекций данных и могут использоваться для моделирования объектов реального мира, таких как автомобиль, человек и т. д.
  2. Массивы: Массивы используются для хранения списков данных и могут хранить несколько значений любых данных.
// Number
let age = 25;
const price = 19.99;

// String 
let name = "John Doe";
let message = 'Hello, World!';

// Boolean
let isStudent = true;
let hasDriverLicense = false;

// Symbol
let sym1 = Symbol();
let sym2 = Symbol("description");

// BigInt
let bigInt = BigInt(9007199254740992);

// undefined
let x;
console.log(x); // prints undefined

// Object
let person = {
  name: "John",
  age: 25,
  isStudent: true
};

// Array
let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];

Операторы

Операторы — это специальные символы в JavaScript, которые выполняют определенные операции над одним или несколькими операндами (значениями или переменными).

  1. Арифметические операторы: Эти операторы используются для выполнения математических операций, таких как сложение, вычитание, умножение и деление.
  2. Операторы сравнения. Эти операторы используются для сравнения значений и возврата логического значения.
  3. Логические операторы: эти операторы используются для выполнения логических операций и возврата логического значения.
  4. Операторы присваивания: Эти операторы используются для присвоения значения переменной.
  5. Тернарный оператор: этот оператор представляет собой сокращенный способ написания оператора if-else. Он принимает 3 операнда, условие и два выражения.
// Arithmetic operators
let x = 5;
let y = 3;
console.log(x + y); // 8
console.log(x - y); // 2
console.log(x * y); // 15
console.log(x / y); // 1.67

// Comparison operators
let x = 5;
let y = 3;
console.log(x > y); // true
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // false
console.log(x == y); // false
console.log(x === y); // false

// Logical operators
let x = 5;
let y = 3;
console.log(x > 0 && y > 0); // true
console.log(x > 0 || y > 0); // true
console.log(!(x > 0)); // false

// Assignment operators
let x = 5;
x += 3;  // x = x + 3
console.log(x); // 8

// Ternary operator
let x = 5;
let y = (x > 0) ? "positive" : "non-positive";
console.log(y); // "positive"

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

Поток управления

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

  1. Операторы if...else: Эти операторы позволяют выполнить блок кода, если определенное условие истинно, и другой блок кода, если условие ложно.
  2. Оператор switch: Оператор switch позволяет вам проверить переменную на соответствие нескольким значениям и выполнить блок кода для каждого совпадающего случая.
  3. while цикл: цикл while многократно выполняет блок кода, пока выполняется определенное условие.
  4. Цикл do...while: цикл do...while похож на цикл while, но он гарантирует, что блок кода будет выполнен хотя бы один раз.
  5. for цикл: цикл for позволяет выполнять блок кода определенное количество раз. Он состоит из 3 частей: инициализация, условие и обновление.
  6. for...of цикл: цикл for...of позволяет перебирать элементы массива, строки, набора, карты или любого другого объекта, имеющего свойство Symbol.iterator.
  7. for...in цикл: цикл for...in позволяет перебирать свойства объекта.
// if...else
let x = 5;
if (x > 0) {
  console.log("x is positive");
} else {
  console.log("x is non-positive");
}

// switch
let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Today is Monday");
    break;
  case "Tuesday":
    console.log("Today is Tuesday");
    break;
  case "Wednesday":
    console.log("Today is Wednesday");
    break;
  default:
    console.log("Today is another day");
}

// while
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

// for
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// for...of
let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
  console.log(number);
}

// for...in
let person = {
  name: "John",
  age: 25,
  isStudent: true
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

Функции

Функции являются одним из основных строительных блоков в JavaScript и используются для организации и повторного использования кода.

Функции могут быть объявлены с помощью ключевого слова function или определены как функциональные выражения. Функциональные выражения могут быть присвоены переменной.

// Function declaration
function add(a, b) {
  return a + b;
}

// Function expression
let subtract = function(a, b) {
  return a - b;
};

console.log(add(1, 2)); // 3
console.log(subtract(1, 2)); // -1

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

function multiply(x, y) {
  return x * y;
}

console.log(multiply(2, 3)); // 6

Как вы могли видеть из предыдущих примеров, функции могут возвращать значение вызывающей программе с помощью ключевого слова return. Если у функции нет оператора return или если после оператора return нет значения, она вернет undefined.

Что касается области видимости функций в Javascript, у функций есть своя область видимости, что означает, что переменные, объявленные внутри функции, недоступны за ее пределами.

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

Наконец, давайте поговорим о функциях со стрелками (ES6). Стрелочные функции — это сокращение для функциональных выражений, они более лаконичны и имеют другой способ привязки ключевого слова this. По сути, у AF нет собственной области действия, но они наследуют область действия, в которой они находятся в лексическом окружении. Сложно понять? Хорошо, давайте рассмотрим это в следующих главах.

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

function greet(name = "John") {
  console.log("Hello, " + name + "!");
}

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

Еще раз, этот пост был нацелен на людей, которые, возможно, не работали с JS. В дальнейшем планируется публиковать сообщения с более продвинутыми концепциями и теориями, связанными с Javascript.

Спасибо, что присоединились ко мне в этом путешествии, и я с нетерпением жду продолжения обучения и роста вместе с вами.

До встречи в следующей главе!