JavaScript Expressions: Basic Concepts and Examples

(Code speaks… but we learn how to make it talk.)

One morning you open your computer.
You create a new .js file.
The cursor blinks.

JavaScript leans toward you and whispers:

“Every time I run, I produce a value… as long as you write the right thing.”

Today, we’re going to talk about those “things that produce values.”
In other words: expressions.

But not in a boring way.
This time, we’ll truly understand it.
We’ll really grasp it.
And yes… we’ll have some fun. 😎

📌 What Is an Expression? – The Heart of the Matter

The simplest definition:

Anything that produces a value is an expression.

If a piece of JavaScript code runs and gives you a result,
there’s an expression there.

Quick mini test:

2 + 2

Result? → 4

That’s an expression.

What about this?

console.log("Hello")

This is also an expression.
Because technically, console.log() returns undefined.
And guess what? That’s still a value.

Yes… in JavaScript, almost everything produces a value.
JavaScript is kind of like:
“I always have something to say.” 😄

🧮 1. Arithmetic Expressions – When Math Flirts with Code

These are the most familiar ones:

10 + 5
10 - 3
4 * 2
20 / 4

They all run and produce a value.

But let’s go deeper.

🧠 Operator Precedence

5 + 3 * 2

What’s the result?

Many people say 16.
But JavaScript follows math rules.

Multiplication comes first:

3 * 2 = 6
5 + 6 = 11

Result → 11

If you want a different result, use parentheses:

(5 + 3) * 2

Result → 16

🎯 Tip:
Parentheses aren’t just about math.
They also improve readability.

🧮 A Slightly More Complex Example

let result = (10 / 2) + (3 * 4) - 1;
console.log(result);

Step by step:

• 10 / 2 = 5
• 3 * 4 = 12
• 5 + 12 = 17
• 17 – 1 = 16

Final result → 16

Train your brain to evaluate expressions step by step.

🔤 2. String Expressions – Playing with Words

A string is a value.
So string operations are expressions too.

"Hello" + " World"

Result → "Hello World"

🧠 The Power of Template Literals

The modern, cooler way:

let name = "Cansu";
let message = `Hello ${name}, welcome to JavaScript!`;
console.log(message);

Result:

Hello Cansu, welcome to JavaScript!

What happened here?

• ${name} is an expression.
• Inside template literals, you can run any expression.

Example:

let price = 100;
let tax = 0.18;

let total = `Total price: ${price + (price * tax)}`;
console.log(total);

${price + (price * tax)} is a full expression.

🎯 Tip:
Inside template literals, you can use math, function calls, comparisons… anything.

🧠 3. Variable Expressions – Knowing Your Identity

let age = 25;
age

When you write age, JavaScript gives you 25.
Because a variable represents a value.

🔄 Updating Values

let score = 10;
score = score + 5;
console.log(score);

Step by step:

• score = 10
• score + 5 → 15
• score is now 15

Shortcut:

score += 5;

🎯 Tip:
Operators like +=, -=, *=, /= are shorter and cleaner.

⚖️ 4. Comparison Expressions – The Judge of JavaScript

Comparisons produce Boolean values.

5 > 3
10 === 10
7 !== 2

Results:

true
true
true

🧠 === vs == (Danger Zone)

5 == "5"

Result → true

Why? Because == performs type coercion.

But:

5 === "5"

Result → false

Because === checks both value and type.

🎯 Golden Rule:
Always use ===.
== is JavaScript saying, “Let me guess a little.” 😅

🧩 5. Function Calls – Value Factories

Functions produce values.

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

let result = add(3, 7);
console.log(result);

Step by step:

• add(3, 7)
• 3 + 7
• return 10
• result = 10

A function call is an expression.

🎲 Real-Life Example

let random = Math.random();
console.log(random);

This generates a number between 0 and 1.

let dice = Math.floor(Math.random() * 6) + 1;
console.log(dice);

This generates a number between 1 and 6.

What’s happening here?

• Math.random() → expression
• Math.random() * 6 → expression
• Math.floor(...) → expression

JavaScript loves nested expressions.

🎯 6. Assignment Expressions – Deeper Than You Think

let x;
x = 10;

This is an assignment expression.

Now look at this:

let a, b;
a = b = 5;

What happened?

• b = 5 → returns 5
• a = 5

Final result:

a = 5
b = 5

JavaScript assigns from right to left.

🎯 Tip:
Be careful with chained assignments.
Readability matters.

🧪 7. Logical Expressions – The Short-Circuit Magic

true && false

Result → false

But it gets more interesting.

🧠 Short-Circuit Logic

let name = "Cansu";
let message = name && "Welcome!";
console.log(message);

If name is truthy, the result is "Welcome!".

But if:

let name = "";
let message = name && "Welcome!";

Result → ""

Because an empty string is falsy.

🧠 Default Value Technique

let username = "";
let displayName = username || "Guest";
console.log(displayName);

Result → "Guest"

This technique is widely used in real projects.

🆚 Expression vs Statement – Final Clarity

Expression → produces a value
Statement → performs an action

if (5 > 3) {
  console.log("Correct");
}

• if → statement
• 5 > 3 → expression

So expressions live inside statements.

🚀 The Big Picture – Why It Matters

Because:

• In React, you use expressions inside JSX
• Functional programming is expression-heavy
• Modern JavaScript relies heavily on expressions

When writing code, ask yourself:

“Does this piece of code produce a value?”

If the answer is yes…
you’re thinking like a JavaScript developer.

🎬 Final

The cursor is still blinking.
JavaScript is still looking at you.

Now you know:

• Math is an expression
• A string is an expression
• A function call is an expression
• A comparison is an expression
• Even some assignments are expressions

In the JavaScript world, life is simple:

If you produce a value, you exist.