hnq.me
all concepts
language Updated 2026-07-09 Step 1 of 6

Expression

A beginner-friendly guide to understanding expressions.

On this page 2026-07-09
The Simple Idea Expression vs Statement Why Expressions Matter Expressions In UI Expression Plus Scope Small Expression Languages Expression As Runtime Surface KitJS And Kitwork Notes My Learning Notes Common Misunderstandings Related Concepts

A beginner-friendly guide to understanding expressions: small pieces of logic that produce values inside languages, templates, and UI runtimes.

Expressions are everywhere in programming.

They are also one of the smallest useful units of interactivity.

expression -> value

Table of Contents

The Simple Idea

An expression is a piece of logic that can be evaluated.

It usually produces a value.

Examples:

price * quantity
count > 3
name.toUpperCase()
open == true
email.includes("@")

The shortest mental model:

expression -> value

Expression vs Statement

An expression produces a value.

A statement performs a larger step.

Expression:

price * quantity

Statement:

const total = price * quantity

Different languages draw this line differently.

But the distinction helps when building small runtimes.

Expressions are easier to embed, inspect, and limit.

Why Expressions Matter

Expressions are small enough to place inside other systems.

They appear in:

  • templates,
  • validation rules,
  • UI bindings,
  • filters,
  • formulas,
  • spreadsheets,
  • query builders,
  • configuration,
  • small component scopes.

Because expressions are smaller than full programs, a runtime can often parse, verify, and evaluate them safely.

Expressions In UI

HTML-driven runtimes often use expressions in attributes.

Example:

<b data-text="price * quantity"></b>
<span data-show="count > 3">Unlocked</span>
<button data-click="count = count + 1">+</button>

The attribute says what behavior should happen.

The expression provides the logic.

This keeps small dynamic pieces close to the markup they affect.

Expression Plus Scope

An expression needs context.

This:

price * quantity

only works if price and quantity exist.

So the real model is:

expression + scope -> value

Scope gives names meaning.

Without scope, most expressions are only text.

Small Expression Languages

An expression language does not need to be full JavaScript.

It can be a smaller grammar with:

  • numbers,
  • strings,
  • booleans,
  • variables,
  • operators,
  • comparisons,
  • simple calls,
  • object literals,
  • array literals,
  • assignment,
  • small lambdas.

A smaller language can be easier to verify.

It can also avoid dangerous features like unrestricted eval.

Expression As Runtime Surface

Expressions are a good runtime surface because they are limited.

The runtime can ask:

what names are used?
what methods are allowed?
what can this expression write?
how much work can it do?

That makes expressions useful for UI, validation, filters, and small logic capsules.

The smaller the surface, the easier it is to reason about.

KitJS And Kitwork Notes

I learned expressions first through UI behavior. In KitJS, expressions were the small pieces of logic inside directives: what text should show, whether an element should appear, what value should be read, or what condition should pass.

That made expressions feel different from normal application code. They are tiny bridges between state and interface.

In Kitwork, expressions matter on both sides. They appear in templates, request logic, validation, and runtime JS. The lesson is that expressions should stay understandable because they are often the place where data becomes visible behavior.

My Learning Notes

I used to move UI logic into JavaScript files very quickly.

Then I started noticing how much logic is tiny:

show this when count > 3
write this text as price * quantity
validate this form when email includes "@"

In a KitJS-style runtime, those small pieces can live in attributes.

The lesson:

not every interaction needs a full script
some interactions only need an expression

Common Misunderstandings

"Expression means full JavaScript."

No. An expression language can be a small subset.

"Expressions are only for math."

No. They can describe visibility, validation, text, state changes, and small UI logic.

"Small expressions are not real programming."

They are still logic. The difference is size, scope, and boundary.

Previous: blueprint

Next: evaluate

Related: scope, directive, hydrate

Search