Основы JavaScript

В этой статье объясняются основы JavaScript.

YouTube Video

Выполнение Hello World!

Обзор JavaScript

JavaScript — один из самых широко используемых языков программирования в веб-разработке. Он в основном используется для добавления динамических элементов на веб-страницы, позволяя взаимодействовать с пользовательским интерфейсом, передавать данные и создавать анимации. Он может работать как на стороне клиента (в браузере), так и на стороне сервера, используя такие технологии, как Node.js. Благодаря своей простоте и гибкости его легко учить новичкам, и он широко используется профессиональными разработчиками.

Переменные в JavaScript

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

Объявление переменной

В JavaScript есть три ключевых слова для объявления переменных.

• var: Старый способ объявления переменных, но управление его областью видимости сложно и требует осторожности. Основан на области видимости функции.

1var x = 10;

• let: Введен в ES6, позволяет объявлять переменные с областью видимости в блоке. Ее можно переназначить, но нельзя повторно объявить в той же области видимости.

1let y = 20;

• const: Используется для объявления переменных, которые являются неизменяемыми (константами). Имеет блочную область видимости и не может быть переназначен или объявлен повторно после определения.

1const z = 30;

Область видимости

Переменные обладают понятием области видимости.

Глобальная область видимости

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Переменные в глобальной области видимости доступны из любой части кода. Переменные, объявленные с помощью var, имеют глобальную или функциональную область видимости, а let и const — блочную область видимости.

Блочная область видимости

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Блочная область видимости: Переменные, объявленные с помощью let или const, действительны только внутри {} (фигурных скобок).

• Ошибка возникает при попытке доступа извне {} (фигурные скобки).

Функциональная область видимости

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Функциональная область видимости: Переменные и функции, определенные внутри функции, недоступны за ее пределами. Переменные, объявленные внутри функции с помощью var, принадлежат этой области видимости.

• В этом примере переменная functionVar доступна извне {} (фигурных скобок), пока она находится в пределах области видимости функции. С другой стороны, попытка доступа к переменной functionScoped за пределами области видимости функции приведет к ошибке.

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

Типы данных

Переменные в JavaScript могут хранить значения разных типов данных. Существуют string для работы с текстом и number для работы с численными значениями.

Основные типы данных следующие:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Примитивные типы:
  • number: Работает с числовыми значениями (целыми и с плавающей запятой).
  • string: Работает со строками символов.
  • boolean: Обрабатывает булевые значения true или false.
  • null: Явно представляет значение 'ничего'.
  • undefined: значение, автоматически присваиваемое переменным, которые не были инициализированы.
  • Symbol: Тип данных, используемый для создания уникальных значений.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Типы объектов:
  • Object: Структура данных с несколькими свойствами.
  • Массив: Список, содержащий несколько значений.
  • Функция: Объект функции.

Присвоение и повторное присвоение переменным

Переменные, объявленные с помощью let или var, могут быть переопределены, но const не может быть переопределена после объявления.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Поднятие переменных (hoisting)

В JavaScript существует явление, при котором объявления переменных 'поднимаются' наверх своей области видимости. Переменные, объявленные с помощью var, поднимаются, но использование let или const до их объявления вызывает ошибку.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• В этом случае переменные, объявленные с помощью var, всплывают, и их значения выводятся.

1console.log(b); // ReferenceError
2let b = 20;

• Переменные, объявленные с использованием let, не всплывают, что приводит к ошибке.

Правильное использование переменных

Учтите следующие моменты для правильного использования переменных.

• Предпочитайте использование const и избегайте использования var.
• Следуйте соглашениям по наименованию переменных.
  • Используйте camelCase, например, userName или totalPrice.
  • Избегайте неоднозначных имен, таких как data или value, и используйте осмысленные названия для улучшения читаемости.
  • Имя переменной не может начинаться с цифры, поэтому такие имена, как 1variable, недопустимы.
• Чрезмерное использование глобальных переменных может вызвать неясность областей видимости и привести к ошибкам, поэтому избегайте их использования, если это возможно.

Резюме

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

Что такое управляющие символы (escape characters) в JavaScript?

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

Примеры использования управляющих символов

Ниже приведены примеры кода с использованием управляющих символов.

Экранирование двойных и одинарных кавычек

Используйте управляющие символы для представления двойных или одинарных кавычек в строке.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Экранирование обратных косых черт

Чтобы включить саму обратную косую черту в строку, экранируйте её с помощью \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Экранирование новых строк и табуляций

Вы можете вставлять новые строки и табуляции, чтобы сделать длинные строки более читаемыми.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Экранирование символов Unicode

Использование последовательностей экранирования Unicode позволяет представлять определённые символы с помощью шестнадцатеричных кодов.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Примечания

Чрезмерное использование управляющих символов может ухудшить читаемость

Чрезмерное использование управляющих символов может снизить читаемость вашего кода. Особенно важно использовать управляющие символы с осторожностью в длинных строках.

Рассмотрите использование шаблонных строк

В JavaScript шаблонные строки с использованием обратных кавычек позволяют включать новые строки или вставлять внутрь выражения без управляющих символов.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Резюме

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

Версии JavaScript

JavaScript имеет стандартную спецификацию под названием ECMAScript (ES). JavaScript развивался на основе этого стандарта. Ниже приведено краткое описание его основных версий.

• ES3 (1999)

  Первая версия, которая получила широкое распространение. Была установлена базовая синтаксическая структура и функционал.

• ES5 (2009)

  Введен strict mode, добавлены новые функции, такие как Array.prototype.forEach, Object.keys и др.

• ES6 / ES2015 (2015)

  В JavaScript было внесено крупное обновление. Были введены многие функции, лежащие в основе современного JavaScript, такие как let, const, стрелочные функции, классы, промисы, модули и т.д.

• ES7 / ES2016 (2016)

  Были добавлены Array.prototype.includes и оператор возведения в степень (**).

• ES8 / ES2017 (2017)

  Были добавлены async/await, что упростило написание асинхронных процессов.

• ES9 / ES2018 (2018)

  Были добавлены асинхронные итераторы и Rest/Spread Properties.

• ES10 / ES2019 (2019)

  Были добавлены flatMap и Object.fromEntries.

• ES11 / ES2020 (2020)

  Были добавлены Optional Chaining (?.) и Nullish Coalescing Operator (??), что позволило писать код проще и безопаснее.

• ES12 / ES2021 (2021)

  Были добавлены, среди прочего, String.prototype.replaceAll и Promise.any.

• ES13 / ES2022 (2022)

  Были добавлены, среди прочего, Array.prototype.at и приватные поля класса (#field).

• ES14 / ES2023 (2023)

  Были добавлены, среди прочего, Array.prototype.toSorted и Symbol.prototype.description.

• ES15 / ES2024 (2024)

  Были добавлены, среди прочего, Promise.withResolvers для упрощенного управления Promise и изменяемый ArrayBuffer.

Современный JavaScript обновляется каждый год, и даже в последних версиях добавляются новые функции.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video