Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Выражения и инструкции

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

Транскрипт урока

Взгляните на эту простую строчку кода:

const x = 5;

Вы точно знаете, что в ней происходит, верно? Создадим новую константу x, зададим ей значение 5. Ничего особенного тут нет.

Вот другая строчка кода:

const y = getAnswer();

Создадим новую константу y, зададим ей то значение, которое возвращает функция getAnswer. Теперь представьте, что getAnswer — это на самом деле невероятно сложная функция с миллионом строчек кода и потребуется 12 лет для её вычисления.

Насколько отличаются эти строчки? Оказывается, в информатике более важный и полезный воспрос: "насколько они схожи?".

И ответ, конечно — "всё относительно".

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

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

Эти две строчки подобны, потому что справа от знака равно в обоих случаях находится выражение. Выражение — это фрагмент кода, который превращается в значение. Другими словами — становится значением. Да, знаю, 5 — это уже значение, но для интерпретатора JavaScript это выражение, которое превращается в значение 5. Другое выражение, которое превращается в значение 5 — это, например, 2 + 3.

Вызов функции getAnswer() — это тоже выражение, потому что функция что-то возвращает. Этот вызов будет заменён на значение, которое она возвращает. Другими словами, вызов функции превратится в значение, а поэтому он является выражением.

Не всё в коде становится значением. Так что не всё в коде — это выражение, хотя большая часть его — именно выражения.

JavaScript различает выражения и инструкции. Инструкция — это команда, действие. Помните условие с if, циклы с while и for — всё это — инструкции, потому что они только производят и контролируют действия, но не становятся значениями.

Это что, какие-то мутные технические термины из учебников? Может так показаться, но в реальности очень важно понимать и видеть разницу между выражениями и инструкциями.

Это помогает правильно понимать процесс вычисления и выполнения программы. Посмотрите на пример:

12 + square(7 + 5) + square(square(2));

Это выражение состоит из нескольких подвыражений.

Первое — 12 — выражается в 12. Следующее состоит из множества подвыражений:

  • 7 выражается в 7
  • 5 выражается в в 5
  • 7 + 5 выражается в 12
  • square(12) выражается в 144

К этому моменту в процессе JavaScript видит такую картинку:

12 + 144 + square(square(2));

Это еще не конец, остались необработанные выражения. Это будет продолжаться пока всё выражение не превратится в единое значение.

square(square(2)) решается таким способом:

  • 2 выражается в 2
  • square(2) выражается в 4
  • square(4) выражается в 16

Давайте заглянем в мозг интерпретатора снова:

12 + 144 + 16;

Все внутренние выражения решены, так что теперь сложение происходит в два шага:

12 + 144 + 16;
156 + 16;
172;

Теперь решено всё выражение.

Кстати, оператор сложения имеет левую ассоциативность. Это значит, что в случае с составными сложениями процесс пойдёт слева направо, вот почему мы вначале видим 12 + 144, а потом 156 + 16.

Вы не можете ставить инструкции там, где должны быть выражения. Например, передача инструкции const как аргумента функции приведёт к ошибке. Как и попытка присвоить инструкциюif переменной. Подобное просто не имеет смысла в этом языке, потому что в таких случаях предполагаются только выражения:

console.log(const x);   // error!
let b = if (x > 10) { return 100; };    // error!

Зная такие вещи, вы скоро обретёте две важные суперспособности:

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

Выводы

Выражением (expression) является любой корректный блок кода, который возвращает значение.

Ниже 5 это expression, оно выражается в значение 5:

const x = 5;

Ниже getAnswer() — это вызов функции — другое выражение. Этот вызов возвращает значение, то есть этот вызов функции выразится в значение:

const y = getAnswer();

Ниже пример выражения, которое состоит из нескольких подвыражений, и пошаговый процесс превращения каждого выражения по порядку, пока целое выражение не превратится в одно значение:

12 + square(7 + 5) + square(square(2));

12 + square(12) + square(square(2));
12 + 144 + square(square(2));
12 + 144 + square(4);
12 + 144 + 16;
156 + 16;
172;

JavaScript различает выражения (expressions) и инструкции (statements). Инструкция — это (грубо говоря) команда, действие.

if, while, for, const — примеры инструкций. Они производят или контролируют действия, но не превращаются в значения.


Дополнительные материалы

  1. Выражения / Mozilla Developer Network
  2. Приоритет операторов
  3. Expressions / Mozilla Developer Network
  4. Expressions versus statements in JavaScript

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».