Инструкции в JavaScript: от основ до сложных решений

Раздел: Изучение JavaScript -> Обучение JavaScript

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

Основные инструкции JavaScript

Как объявить переменную с неизменяемым значением?

Переменную, значение которой не планируется изменять, следует объявлять с помощью const.

const PI = 3.14159;

инструкция js (инструкция по javascript)

Для изменяемых значений применяется let.

let count = 0;

Какие альтернативы существуют для объявления переменных?

Ранее использовалась инструкция var. Она отличается поднятием объявления и функциональной областью видимости.

var name = "Alice";

Также возможно объявление без ключевого слова, но такая переменная становится глобальной.

age = 30;
Какие проблемы возникают при использовании var?

var позволяет обратиться к переменной до её объявления (подъем). Это может привести к неожиданным ошибкам. Рекомендуется применять только let и const.

console.log(x); // undefined, а не ReferenceError
var x = 5;

{
  let y = 10;
}
console.log(y); // ReferenceError: y is not defined

Как выполнить код в зависимости от условия?

Основная инструкция для ветвления - if...else. Она проверяет логическое условие.

const age = 18;
if (age >= 18) {
  document.write("Совершеннолетний");
} else {
  document.write("Несовершеннолетний");
}

Какие ещё способы условного выполнения существуют?

Инструкция switch подходит для множества строгих сравнений.

const color = "red";
switch (color) {
  case "red": document.write("Красный"); break;
  case "blue": document.write("Синий"); break;
  default: document.write("Неизвестный");
}

Тернарный оператор ? : является выражением, возвращающим значение.

const status = (age >= 18) ? "взрослый" : "ребенок";
Какие ошибки встречаются в условных инструкциях?

В switch часто забывают break, что приводит к выполнению следующих блоков (fall-through). Необходимо явно прерывать выполнение.

const val = 2;
switch (val) {
  case 1: console.log('one'); // без break
  case 2: console.log('two'); // тоже выполнится
  case 3: console.log('three');
}
// Вывод: two, three

Также распространено нестрогое сравнение == вместо ===. Рекомендуется строгое сравнение для избежания приведения типов.

Как итерировать массив?

Современный способ - цикл for...of, который перебирает значения итерабельных объектов.

const arr = [10, 20, 30];
for (const item of arr) {
  console.log(item);
}
// 10
// 20
// 30

Какие циклы существуют в JavaScript?

Классический for с счётчиком.

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Метод forEach массива.

arr.forEach(item => console.log(item));

Цикл while и do...while для выполнения пока условие истинно.

let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

Цикл for...in предназначен для объектов, но его иногда ошибочно используют для массивов.

for (const index in arr) {
  console.log(arr[index]);
}
Какие проблемы возникают при использовании for...in для массивов?

for...in перебирает не только индексы, но и любые строковые ключи объекта, включая унаследованные. Для массивов следует применять for...of или forEach.

Array.prototype.custom = 'test';
const arr = [1,2,3];
for (const key in arr) {
  console.log(key, arr[key]); // выведет '0', '1', '2' и 'custom'
}

Как объявить функцию с помощью стрелочного синтаксиса?

Стрелочные функции обеспечивают краткий синтаксис и не имеют собственного this.

const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

Для тела из нескольких инструкций используются фигурные скобки и явный return.

const multiply = (a, b) => {
  const result = a * b;
  return result;
};

Какие существуют способы объявления функций?

Объявление функции (function declaration) поднимается в начало области видимости.

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

Функциональное выражение (function expression) присваивается переменной.

const subtract = function(a, b) {
  return a - b;
};

Также доступно объявление через конструктор new Function, но оно не рекомендуется из-за проблем безопасности.

Какие распространённые ошибки при работе с функциями?

Стрелочные функции не имеют своего this, что может привести к ошибке при использовании в качестве метода объекта. Для методов лучше использовать обычные функции.

const obj = {
  value: 42,
  getValue: () => this.value // undefined, this указывает на внешний контекст
};
console.log(obj.getValue()); // undefined

Также различие в подъёме: function declaration можно вызвать до объявления, function expression - нет.

console.log(declared()); // работает
function declared() { return 'yes'; }

console.log(expr()); // TypeError: expr is not a function
const expr = function() { return 'no'; };

Как перехватить и обработать исключение?

Инструкция try...catch позволяет выполнить код и перехватить возникшую ошибку.

try {
  JSON.parse("invalid json");
} catch (error) {
  console.error("Ошибка парсинга:", error.message);
}

Какие дополнительные блоки можно использовать?

Блок finally выполняется всегда, независимо от наличия ошибки.

try {
  // код
} catch (e) {
  // обработка
} finally {
  console.log("Очистка ресурсов");
}

Также можно самому выбрасывать ошибки через throw.

function divide(a, b) {
  if (b === 0) throw new Error("Деление на ноль");
  return a / b;
}
Какие ошибки допускают при обработке исключений?

Не рекомендуется использовать пустой блок catch без обработки ошибки. Лучше логировать или перебрасывать ошибку. Также следует избегать перехвата всех типов ошибок, если требуется специфичная обработка - проверять тип через instanceof.

try {
  // ...
} catch (e) {
  if (e instanceof TypeError) {
    console.error("Типовая ошибка");
  } else {
    throw e; // переброс
  }
}

Области видимости let, const и var

Пример 
{
  let a = 1;
  const b = 2;
  var c = 3;
  console.log(a, b, c); // 1 2 3
}
// console.log(a); // ReferenceError
// console.log(b); // ReferenceError
console.log(c); // 3 (var доступна вне блока)

function test() {
  var d = 4;
  let e = 5;
  console.log(d, e); // 4 5
}
// console.log(d); // ReferenceError
// console.log(e); // ReferenceError
3

Вложенный тернарный оператор

Пример 
const score = 85;
const grade = score >= 90 ? 'A' :
              score >= 80 ? 'B' :
              score >= 70 ? 'C' :
              score >= 60 ? 'D' : 'F';
console.log(grade); // 'B'
B

Итерация с индексами через entries()

Пример 
const colors = ['red', 'green', 'blue'];
for (const [index, color] of colors.entries()) {
  console.log(`Индекс ${index}: ${color}`);
}
Индекс 0: red
Индекс 1: green
Индекс 2: blue

Рекурсивный факториал

Пример 
const factorial = (n) => {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
};
console.log(factorial(5)); // 120
120

Пользовательский класс ошибки

Пример 
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

try {
  throw new ValidationError('Некорректные данные');
} catch (e) {
  if (e instanceof ValidationError) {
    console.log('Перехвачена ошибка валидации:', e.message);
  } else {
    throw e;
  }
}
Перехвачена ошибка валидации: Некорректные данные

Инструкция по JavaScript - comments

En
инструкция js (javascript)