Variables & Functions

Designers work with named things all the time. In Figma you might create a colour token called brand-purple and reuse it across every component. Change one token, everything updates. JavaScript variables work the same way — you give a value a name, then use that name everywhere instead of repeating the raw value.

Variables — named containers

A variable is a named box that holds a value. There are two keywords for creating them:

const — the value is set once and never changes (like a locked colour token).
let — the value can be updated later (like a text layer you’ll edit).

const brandColor = '#7C3AED'; // will never change
let buttonLabel = 'Sign up';  // might change to 'Creating account…'

Use const by default. Reach for let only when you know the value will need to change.

Functions — reusable actions

A function is a block of instructions you give a name to, so you can run those instructions whenever you need them — just like a Figma component that performs an action when triggered.

function greet() {
  var message = 'Hello, ' + name + '!';
  document.querySelector('#output').textContent = message;
}

Writing a function doesn’t run it. To actually run it, you call it by writing its name followed by ():

greet(); // runs the instructions inside greet

You can call a function as many times as you like. That is the whole point — write the logic once, reuse it everywhere.

Try it — a greeting button

The example below stores a name in a variable, defines a greet function that builds a message using that variable, then connects the function to a button click. Press the button to see it in action.

<button id="runBtn">Say hello</button>
<p id="output">Press the button.</p>

Notice how the function uses the name variable to build its message. If you changed name to 'world', every call to greet() would automatically say 'Hello, world!' — you only update the value in one place.

Recap

Concept	What it does	Figma parallel
`const`	Stores a value that won’t change	Published colour token
`let`	Stores a value that can be updated	Editable local override
`function`	Bundles instructions under a name	Component with an interaction
Calling `fn()`	Runs the function’s instructions	Triggering a component action