Svelte Variables

A variable stores a piece of information that your page can display or change. Svelte lets you use plain JavaScript variables directly inside your component, without any special syntax to learn first.

Declaring A Variable

You declare a variable inside a script tag at the top of a Svelte file. The value can be text, a number, a list, a true or false flag, or an object holding several pieces of related data.

<script>
  let name = "Riya";
  let age = 28;
  let isMember = true;
</script>

Each line above creates one variable and gives it a starting value. The word let tells Svelte that the value inside this variable might change later.

Displaying A Variable On The Page

Curly braces act like a window that shows the value stored inside a variable. Place a variable name inside curly braces anywhere in your HTML to display it on the page.

<p>Hello, {name}. You are {age} years old.</p>

The browser renders this line as plain text, replacing each set of curly braces with the current variable value. A visitor sees "Hello, Riya. You are 28 years old." without ever seeing the curly braces themselves.

Variable Flow Diagram

Script Section              HTML Section
-----------------            -----------------
let name = "Riya"   ---->    {name} shows "Riya"
let age = 28         ---->    {age} shows 28
let isMember = true   ---->    {isMember} shows true

Changing A Variable Value

You can update a variable inside a function, such as one triggered by a button click. Svelte then refreshes the exact page part that shows that variable, without reloading the whole page.

<script>
  let count = 0;
  function increase() {
    count = count + 1;
  }
</script>

<button on:click={increase}>Add One</button>
<p>Count: {count}</p>

Clicking the button runs the increase function. The function adds one to count, and Svelte updates the paragraph showing Count automatically. You never write code that manually tells the browser to update the paragraph text.

Variable Types You Will Use Often

• Text values, called strings, hold words and sentences inside quotes
• Number values hold whole numbers or decimals without quotes
• Boolean values hold either true or false, useful for toggles and switches
• Array values hold ordered lists of items, such as a shopping list
• Object values hold grouped data, such as a single user's name and age together

A Layman Analogy

Think of a variable as a labeled box on a shelf. The label stays the same, but you can open the box and swap what sits inside whenever you need to. Svelte watches every labeled box and updates the page the moment something inside a box changes.

Scope Of A Variable

A variable declared inside a script tag stays available anywhere inside that same component's markup. A variable declared inside a function stays limited to that function alone, and code outside the function cannot read or change it. Keeping this boundary in mind helps you decide where a new variable should live when writing a component.

Constants Versus Changeable Variables

The word const creates a variable that never changes after its first assignment, useful for fixed values like a maximum limit or a label that never updates. The word let creates a variable that can change, useful for values tied to user actions or live data.

<script>
  const maxItems = 10;
  let currentItems = 0;
</script>

Attempting to reassign maxItems later produces an error, while currentItems can update freely as items get added or removed.

Key Points

• Variables live inside the script tag of a Svelte file
• Curly braces display a variable value inside HTML
• Updating a variable refreshes only the parts of the page that use it
• Common variable types include text, numbers, booleans, arrays, and objects