Quick Links
  • -Overview
  • -Language Features
  • -JS Interop
  • -Build System
Documentation
Language Manual
Reference for all language features
ReScript & React
First class bindings for ReactJS
GenType
Seamless TypeScript integration
Reanalyze
Dead Code & Termination analysis
Exploration
Packages
Explore third party libraries and bindings
Syntax Lookup
Discover all syntax constructs
APIPlaygroundBlogCommunity
  • Playground
  • Blog
  • Twitter
  • GitHub
  • Forum
Language Manual
Overview
  • Introduction
  • Installation
  • Editor Plugins
  • Migrate to ReScript Syntax
  • Try
Language Features
  • Overview
    • Comparison to JS
    • Common Features' JS Output
  • Let Binding
  • Type
  • Primitive Types
  • Tuple
  • Record
  • Object
  • Variant
  • Null, Undefined and Option
  • Array & List
  • Function
  • If-Else & Loops
  • Pipe
  • Pattern Matching / Destructuring
  • Mutation
  • JSX
  • Exception
  • Lazy Values
  • Promise
  • Module
  • Import & Export
  • Reserved Keyword
JavaScript Interop
  • Embed Raw JavaScript
  • Shared Data Types
  • External (Bind to Any JS Library)
  • Bind to JS Object
  • Bind to JS Function
  • Import from / Export to JS
  • Bind to Global JS Values
  • JSON
  • Use Illegal Identifier Names
  • Generate Converters & Helpers
  • Browser Support & Polyfills
  • Interop Cheatsheet
Build System
  • Build System Overview
  • Build System Configuration
  • Interop with JS Build Systems
  • Build Performance
Guides
  • Converting from JS
  • Libraries
Extra
  • Newcomer Examples
  • Project Structure
  • FAQ
Docs / Language Manual / Overview
Edit

You are currently looking at the v6.0 - v8.2 docs (Reason v3.6 syntax edition). You can find the latest manual page here.

(These docs are equivalent to the old BuckleScript docs before the ReScript rebrand)

Overview

Comparison to JS

Note: the comparison is against our Reason syntax, not our ML syntax.

Semicolon

JavaScriptUs
Rules enforced by linter/formatterNo semicolon needed!

Comments

JavaScriptUs
/* Comment */Same
// Line commentSame

Variable

JavaScriptUs
const x = 5;let x = 5
var x = y;No equivalent (thankfully)
let x = 5; x = x + 1;let x = ref(5); x := x.contents + 1

String & Character

JavaScriptUs
"Hello world!"Same
'Hello world!'Strings must use "
"hello " + "world""hello " ++ "world"
`hello ${message}``{j

Boolean

JavaScriptUs
true, falseSame
!trueSame
||, &&, <=, >=, <, >Same
a === b, a !== bSame
No deep equality (recursive compare)a == b, a != b
a == bNo equality with implicit casting (thankfully)

Number

JavaScriptUs
3Same *
3.1415Same
3 + 4Same
3.0 + 4.53.0 +. 4.5
5 % 35 mod 3

* JS has no distinction between integer and float.

Object/Record

JavaScriptUs
no typestype point = {x: int, mutable y: int}
{x: 30, y: 20}Same
point.xSame
point.y = 30;Same
{...point, x: 30}Same

Array

JavaScriptUs
[1, 2, 3][|1, 2, 3|]
myArray[1] = 10Same
[1, "Bob", true](1, "Bob", true) *

* Heterogenous arrays in JS are disallowed for us. Use tuple instead.

Null

JavaScriptUs
null, undefinedNone *

* Again, only a spiritual equivalent; we don't have nulls, nor null bugs! But we do have an option type for when you actually need nullability.

Function

JavaScriptUs
arg => retValSame
function named(arg) {...}let named = (arg) => {...}
const f = function(arg) {...}let f = (arg) => {...}
add(4, add(5, 6))Same

Blocks

JavaScriptUS
const myFun = (x, y) => { const doubleX = x + x; const doubleY = y + y; return doubleX + doubleY };
let myFun = (x, y) => { let doubleX = x + x let doubleY = y + y doubleX + doubleY }

If-else

JavaScriptUs
if (a) {b} else {c}if (a) {b} else {c} *
a ? b : cSame
switchswitch but super-powered pattern matching!

* Our conditionals are always expressions! You can write let result = if (a) {"hello"} else {"bye"}

Destructuring

JavaScriptUs
const {a, b} = datalet {a, b} = data
const [a, b] = datalet [|a, b|] = data *
const {a: aa, b: bb} = datalet {a: aa, b: bb} = data

* Gives good compiler warning that data might not be of length 2.

Loop

JavaScriptUs
for (let i = 0; i <= 10; i++) {...}for (i in 0 to 10) {...}
for (let i = 10; i >= 0; i--) {...}for (i in 10 downto 0) {...}
while (true) {...}while (true) {...}

JSX

JavaScriptUs
<Comp message="hi" onClick={handler} />Same
<Comp message=message /><Comp message /> *
<input checked /><input checked=true />
No children spread<Comp>...children</Comp>

* Argument punning!

Exception

JavaScriptUs
throw new SomeError(...)raise(SomeError(...))
try {a} catch (Err) {...} finally {...}try a catch { | Err => ...} *

* No finally.

Blocks

The last expression of a block delimited by {} implicitly returns (including function body). In JavaScript, this can only be simulated via an immediately-invoked function expression (since function bodies have their own local scope).

JavaScriptUS
let result = (function() { const x = 23; const y = 34; return x + y; })();
let result = { let x = 23 let y = 34 x + y }

Common Features' JS Output

FeatureExampleJavaScript Output
String"Hello""Hello"
String Interpolation`{jHello $(message)
Character (disrecommended)'x'120 (char code)
Integer23, -2323, -23
Float23.0, -23.023.0, -23.0
Integer Addition23 + 123 + 1
Float Addition23.0 +. 1.023.0 + 1.0
Integer Division/Multiplication2 / 23 * 12 / 23 * 1
Float Division/Multiplication2.0 /. 23.0 *. 1.02.0 / 23.0 * 1.0
Float Exponentiation2.0 ** 3.0Math.pow(2.0, 3.0)
String Concatenation"Hello " ++ "World""Hello " + "World"
Comparison>, <, >=, <=>, <, >=, <=
Boolean operation!, &&, ||!, &&, ||
Shallow and deep Equality===, =====, ==
List (disrecommended)[1, 2, 3]{hd: 1, tl: {hd: 2, tl: {hd: 3, tl: 0}}}
List Prepend[a1, a2, ...oldList]{hd: a1, tl: {hd: a2, tl: theRest}}
Array[|1, 2, 3|][1, 2, 3]
Recordtype t = {b: int}; let a = {b: 10}var a = {b: 10}
Multiline Comment/* Comment here */Not in output
Single line Comment// Comment hereNot in output
TryLet Binding

© 2024 The ReScript Project

Software and assets distribution powered by KeyCDN.

About
  • Community
  • ReScript Association
Find us on