Register to get access to 15+ free programming courses with interactive exercises

Expressions vs. Statements Programming fundamentals

Video may be blocked due to browser extensions. In the article you will find a solution to this problem.

Lesson notes

An expression is any valid unit of code that resolves to a value (source).

Below 5 is an expression, it resolves to value 5:

const x = 5;

Below getAnswer() — a function call — is another expression. This call will return a value, i.e. this function call will resolve to a value:

const y = getAnswer();

Below is an example of an expression that consists of multiple subexpressions, and the step-by-step process of resolving each expression in order until the whole expression is resolved to a single value:

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;

JavaScript distinguishes expressions and statements. A statement is (roughly) an instruction, an action.

if, while, for, const are examples of statements. They perform actions or control actions, but don't resolve to values.

Optional reading

Lesson transcript

Look at this simple line of code:

const x = 5;

You know exactly what's going on, right? Create a new constant named x, put the value 5 in it. Not much to it.

Here is another line of code:

const y = getAnswer();

Create a new constant named y, put inside whatever value getAnswer function returns. Now, imagine this getAnswer is actually a huge and extremely complicated function with millions of lines of code, and it takes 12 years to compute.

How different are these lines of code? Well, it turns out that in computer science a much more powerful question is usually "how similar are these?".

And, the answer is, of course, "it depends".

If you think in terms of what is actually, literally going on — they are not similar at all. One is setting a number value, another one is calling an external function. We know very well this is not the same thing. We know about functions, and arguments, and all that stuff.

But sometimes it's useful to think in other terms, on another level. Sure, running and flying a plane are very different activities, but on a certain level they are similar — both are about moving from point to point.

These two lines are similar because on the right side of the equal sign there is an expression in both cases. Expression is a piece of code that resolves to a value. In other words, becomes a value. I know, 5 is already a value, but for the language interpreter it's an expression that resolves to the value 5. Another expression that resolves to the value 5 is 2 + 3, for example.

A function call getAnswer() is also an expression, because this function will return something. So, this call will be replaced with the value it returns. In other words, the function call will be resolved to a value, therefore it's an expression.

Not everything in the code becomes a value. So, not everything in the code is an expression, although, most things are.

JavaScript distinguishes expressions and statements. A statement is an instruction, an action. Remember conditions with if, loops with while and for — all those are statements, because they just perform actions and control actions, but don't become values.

Is this one of those obscure textbook technicalities? Might seem that way, but it's actually very important to understand and see the difference between expressions and statements.

Seeing expressions helps you understand the process of computation. Take a look at an example:

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

This expression consists of multiple subexpressions.

First one — 12 — resolves to 12. Next one consists of multiple subexpressions:

  • 7 resolves to 7
  • 5 resolves to 5
  • 7 + 5 resolves to 12
  • square(12) resolves to 144

At this point in the process JavaScript sees the following picture:

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

It's not done yet, there are still things to resolve. It will continue until the whole expression is resolved to a single value.

square(square(2)) resolves like so:

  • 2 resolves to 2
  • square(2) resolves to 4
  • square(4) resolves to 16

Let's look inside the interpreter's mind again:

12 + 144 + 16;

All the inside expressions are resolved, so now the addition happens in two steps:

12 + 144 + 16;
156 + 16;

This whole expression is now resolved.

By the way, addition operator has left-associativity. This means that in the case of multiple additions, the process happens from left to right, that's why we first see 12 + 144 and then 156 + 16.

You can't put statements where expressions are expected. For example, passing a const statement as a function argument will produce an error. Or trying to assign the if statement to a variable. This just doesn't make sense in the language, because only expressions are expected in these cases:

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

Having this knowledge in mind, you will soon become the owner of two important superpowers:

  1. You will be able to see that most of the code, even that million-lines-12-year function, is just a bunch of things that become values.
  2. You will be able to notice when code just won't work because it doesn't make sense in terms of expressions-vs-statements.

Аватары экспертов Хекслета

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

Mistakes, difficulties, questions >
Found a typo or misspelling?

Select a text you want to report, press ctrl + enter and describe the problem, then send it to us. We'll get it fixed in a few days.

Stuck with exercise or subject seems difficult?

Take a look at Q&A section:

  • ask a question. You will cope with difficulties quicker and develop the skill of asking, which will come in handy in your studies and work as a programmer;
  • tell us about your experiences. If the course is too difficult, a detailed review will help us make it better;
  • Study other students' discussions. It’s a knowledge base you can and should use;

Об обучении на Хекслете

Sign up

Programming courses for beginners and experienced developers. Start training for free.

  • 130 courses, 2000+ hours of theory
  • 900 practical tasks in a browser
  • 360 000 students
By sending the form, you agree to Personal Policy and Service Conditions

Our graduates work in companies:

Alfa Bank logo
Aviasales logo
Yandex logo
Tinkoff logo
Suggested learning programs

From zero to a developer. Refunds in case you won't get a job

Frontend Developer icon
Development of front-end components for web applications
20 June 10 months

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Sign up or sign in

By sending the form, you agree to Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.