|
| 1 | +--- |
| 2 | +title: "ReScript for JavaScript Developers" |
| 3 | +description: "A quick ReScript syntax guide for JavaScript developers" |
| 4 | +canonical: "/docs/manual/rescript-for-javascript-developers" |
| 5 | +section: "Overview" |
| 6 | +order: 3 |
| 7 | +--- |
| 8 | + |
| 9 | +# ReScript for JavaScript Developers |
| 10 | + |
| 11 | +If you already write JavaScript, ReScript should feel familiar quickly. This page is a compact syntax guide for the main differences you should be aware of. |
| 12 | + |
| 13 | +For a guided migration workflow, see [Converting from JS](./converting-from-js.mdx). |
| 14 | + |
| 15 | +## What to know first |
| 16 | + |
| 17 | +- `let` bindings are immutable by default. See [Let Binding](./let-binding.mdx) and [Mutation](./mutation.mdx). |
| 18 | +- ReScript does not use `null` and `undefined` as normal control flow. Reach for `option` instead. See [Null, Undefined and Option](./null-undefined-option.mdx). |
| 19 | +- Arrays must contain values of the same type. See [Array and List](./array-and-list.mdx) and [Tuple](./tuple.mdx). |
| 20 | +- Records are not ad-hoc JS objects; they have known field names and types. See [Record](./record.mdx) and [Object](./object.mdx). |
| 21 | +- Conditionals and blocks return values, so expression-oriented code is common. See [If-Else & Loops](./control-flow.mdx). |
| 22 | +- Pattern matching replaces many ad-hoc `if` or property-check branches. See [Pattern Matching / Destructuring](./pattern-matching-destructuring.mdx). |
| 23 | + |
| 24 | +## Quick reference |
| 25 | + |
| 26 | +| Topic | ReScript | Notes for JavaScript developers | |
| 27 | +| --------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | |
| 28 | +| Semicolons | `let x = 1` | Semicolons are not required. See [Overview](./overview.mdx#semicolons). | |
| 29 | +| Comments | `//`, `/* */`, `/** */` | Familiar syntax, including doc comments. See [Overview](./overview.mdx#comments). | |
| 30 | +| Variables | `let x = 5` | `let` creates an immutable binding. See [Let Binding](./let-binding.mdx). | |
| 31 | +| Mutation | `let x = ref(5)` | Mutable state is explicit through `ref` or mutable fields. See [Mutation](./mutation.mdx). | |
| 32 | +| Strings | `"hello"` | Strings use double quotes. See [Primitive Types](./primitive-types.mdx). | |
| 33 | +| String concatenation | `"hello " ++ name` | ReScript uses `++` for strings. See [Primitive Types](./primitive-types.mdx). | |
| 34 | +| Interpolation | `` `hello ${name}` `` | Template strings work similarly. See [Primitive Types](./primitive-types.mdx). | |
| 35 | +| Equality | `===`, `!==`, `==`, `!=` | No coercive equality. `==` and `!=` are structural. See [Equality and Comparison](./equality-comparison.mdx). | |
| 36 | +| Numbers | `3`, `3.14`, `2.0 * 3.0` | Arithmetic operators work for both `int` and `float`. See [Primitive Types](./primitive-types.mdx). | |
| 37 | +| Records | `{x: 30, y: 20}` | Similar object syntax, but records are typed. See [Record](./record.mdx). | |
| 38 | +| Arrays | `[1, 2, 3]` | Arrays are homogeneous. See [Array and List](./array-and-list.mdx). | |
| 39 | +| Mixed fixed-size data | `(1, "Bob", true)` | Use tuples instead of heterogeneous arrays. See [Tuple](./tuple.mdx). | |
| 40 | +| Missing values | `option<'a>` | Use `Some(value)` and `None` instead of `null` and `undefined`. See [Null, Undefined and Option](./null-undefined-option.mdx). | |
| 41 | +| Functions | `let add = (a, b) => a + b` | Familiar arrow-style syntax. See [Function](./function.mdx). | |
| 42 | +| Blocks | `{ let x = 1; x + 1 }` | The last expression is returned implicitly. See [Overview](./overview.mdx#blocks). | |
| 43 | +| Conditionals | `if cond {a} else {b}` | `if` is an expression. See [If-Else & Loops](./control-flow.mdx). | |
| 44 | +| Pattern matching | `switch value { ... }` | Use `switch` for destructuring and exhaustive branching. See [Pattern Matching / Destructuring](./pattern-matching-destructuring.mdx). | |
| 45 | +| Destructuring | `let {a, b} = data` | Works for records, arrays, tuples, and more. See [Pattern Matching / Destructuring](./pattern-matching-destructuring.mdx). | |
| 46 | +| Loops | `for i in 0 to 10 {}` | `for` and `while` exist, but collection transforms are also common. See [If-Else & Loops](./control-flow.mdx). | |
| 47 | +| Exceptions | `throw(MyException(...))` | `throw` and `try` exist, but typed data flow is preferred where possible. See [Exception](./exception.mdx). | |
| 48 | +| JSX | `<Comp message />` | JSX is supported directly, with a few ReScript conventions. See [JSX](./jsx.mdx). | |
| 49 | + |
| 50 | +## Where to Go Next |
| 51 | + |
| 52 | +- For a broader syntax reference, see [Overview](./overview.mdx). |
| 53 | +- For a migration workflow inside an existing codebase, see [Converting from JS](./converting-from-js.mdx). |
| 54 | +- For JavaScript interop, see [Interop Cheatsheet](./interop-cheatsheet.mdx). |
| 55 | +- For importing and exporting JS modules, see [Import from Export to JS](./import-from-export-to-js.mdx). |
| 56 | +- For binding to JS objects and functions, see [Bind to JS Object](./bind-to-js-object.mdx) and [Bind to JS Function](./bind-to-js-function.mdx). |
0 commit comments