# Curly Braces & Understanding Core Syntax

### Curly Braces & Understanding Core Syntax in Svelte

In Svelte, single curly braces `{}` are used to output or run various elements such as functions, variables, and any single-line expressions. This guide will help you understand how to utilize curly braces effectively in your Svelte applications.

#### Basic Usage of Curly Braces

Curly braces in Svelte can be used to output:

* **Functions**
* **Variables**
* **Single-line expressions**

Let's explore each of these with examples.

#### Functions and Variables

You can use curly braces to display the values of functions and variables directly in your HTML. Here’s a simple example:

{% tabs %}
{% tab title="src/App.svelte" %}

```html
<script>
    let name = "Shento";
    let age = $state(23);
    function increaseAge() {
        age += 1;
    }
</script>

<h1>Hello, my name is {name}, my age is {age}</h1>
<button onclick={increaseAge}>Increase my age</button>
```

{% endtab %}

{% tab title="localhost:5000" %}
Hello, my name is Shento, my age is 23

Increase my age
{% endtab %}
{% endtabs %}

#### Explanation

* **name** and **age**: These are variables that can be named anything you like.
* **increaseAge**: This is a function that increments the age variable.
* **{name}** and **{age}**: These curly braces are Svelte-specific syntax used to display the values of the variables in the HTML.

#### Single-Line Expressions

Curly braces can also be used to evaluate and display single-line expressions. Here’s an example:

{% tabs %}
{% tab title="src/App.svelte" %}

```html
<script>
    let name = "Shento";
    let age = 23;
</script>

<h1>Hello, my name is {name.toUpperCase()}, my age in 10 years is {age + 10}</h1>
```

{% endtab %}

{% tab title="localhost:5000" %}
Hello, my name is SHENTO, my age in 10 years is 33
{% endtab %}
{% endtabs %}

#### Explanation

* **name.toUpperCase()**: This is a JavaScript method that converts the name variable to uppercase.
* **age + 10**: This is a simple arithmetic expression that adds 10 to the age variable.
* **{name.toUpperCase()}** and **{age + 10}**: These curly braces are used to evaluate and display the expressions in the HTML.

#### Additional Information

{% hint style="info" %}
Curly braces in Svelte are used to bind JavaScript expressions to the HTML, making it easy to dynamically display data.
{% endhint %}

#### Warning

{% hint style="warning" %}
Ensure that the expressions inside curly braces are single-line expressions. Multi-line expressions are not supported within curly braces.
{% endhint %}

#### Critical Alert

{% hint style="danger" %}
Avoid using complex logic inside curly braces. For better readability and maintainability, keep the logic in the script section and use curly braces only for simple expressions.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/base-syntax-and-core-features-of-svelte/curly-braces-and-understanding-core-syntax.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.