Svelte Expressions

An expression is a small piece of code that produces a value. Svelte lets you drop expressions directly into your HTML using curly braces, so your markup can display calculated results instead of only fixed text.

What Counts As An Expression

Any piece of code that resolves to a single value counts as an expression. A variable name is an expression. A math calculation is an expression. A function call that returns a value is also an expression.

<script>
  let price = 250;
  let quantity = 3;
</script>

<p>Total: {price * quantity}</p>

The browser shows "Total: 750" on the page. Svelte runs the math inside the curly braces and displays the answer, without you writing separate code to calculate and insert the value.

Combining Text And Expressions

You can mix plain text with expressions inside the same line. This mixing lets you build sentences that include live data.

<p>{quantity} items cost a total of {price * quantity} rupees.</p>

Expression Flow Diagram

Raw Values                Expression                 Displayed Result
------------              -------------------          -----------------
price = 250        \
                     ---->  price * quantity   ---->    750
quantity = 3        /

Using Functions Inside Expressions

A function call inside curly braces works the same way as a math calculation. Svelte runs the function and displays whatever value the function returns.

<script>
  let firstName = "Aarav";
  let lastName = "Shah";

  function fullName() {
    return firstName + " " + lastName;
  }
</script>

<p>Welcome, {fullName()}</p>

The page shows "Welcome, Aarav Shah". Every time firstName or lastName changes, Svelte reruns the function and updates the paragraph text.

Using Expressions Inside Attributes

Expressions work inside HTML attributes too, not only inside visible text. This feature lets you control image sources, links, and styles using variable values.

<script>
  let imageId = 12;
</script>

<img src={"photo-" + imageId + ".jpg"} alt="Product photo" />

The browser loads an image named photo-12.jpg. Changing imageId to a different number swaps the loaded image automatically.

A Layman Analogy

Picture a calculator built directly into your webpage. Instead of typing numbers into a separate calculator app and copying the answer, you place the calculation right inside the sentence. The page recalculates the answer any time the input numbers change.

Expressions Compared To Plain Text

Using Ternary Expressions

A ternary expression picks between two values based on a condition, all inside one line. This pattern works well inside curly braces where a full if block would feel too heavy for a small decision.

<script>
  let stock = 0;
</script>

<p>{stock > 0 ? "In Stock" : "Out Of Stock"}</p>

The question mark separates the condition from the two possible outcomes, and the colon separates those two outcomes from each other. A stock value above zero shows "In Stock", and any other value shows "Out Of Stock".

Expressions Cannot Hold Statements

An expression must resolve to a single value, so curly braces cannot hold a full statement like an if block or a variable declaration directly. Svelte offers separate block syntax, covered in later topics, for handling conditions and loops inside markup.

Key Points

• Expressions are small pieces of code placed inside curly braces
• Svelte runs the expression and displays the resulting value
• Function calls work inside expressions the same way as math calculations
• Expressions work inside both visible text and HTML attributes