ClojureScript.net
Translations from JavaScript

Getting Started

Printing to the console

console.log("Hello, world!");
;; to print in browser console
(.log js/console "Hello, world!")

;; to print at ClojureScript REPL
(println "Hello, world!")

Code modularity

Define a library

// No native implementation
(ns my.library)

Use a library

// No native implementation
(ns my.library
  (:require [other.library :as other]))

Variables

Top Level

var foo = "bar";
(def foo "bar")

Local Variables

function foo() {
  var bar = 1;
}
(defn foo []
  (let [bar 1]))

Hoisting

// JavaScript "hoists" variables to the top of
// their scope.  So the following function:

function printName() {
  console.log('Hello, ' + name);
  var name = 'Bob';
}

// is equivalent to this function:

function printName() {
  var name;
  console.log('Hello, ' + name);
  name = 'Bob';
}

printName();
// Hello, undefined
;; ClojureScript does not hoist variables
;; this function will issue a warning

(defn print-name []
  (println "Hello, " name)
  (let [name "Bob"]))

Destructuring bind

// No native impelementation, must pull
// aparts objects and arrays manually

var o = {first: "Bob",
         middle: "J",
         last: "Smith"};

var first = o.first;
var last = o.last;
var middle = o.middle;
...
                
var color = [255, 255, 100, 0.5];
var red = color[0];
var green = color[1];
var alpha = color[3];
...
;; can always destructure in binding expression
;; including, let, function arguments, loops, etc.

(def m {:first "Bob"
        :middle "J"
        :last "Smith"})

(let [{:keys [first middle last]} m]
  ...)

(def color [255 255 100 0.5])

(let [[r g _ a] color]
  ...)

Dynamic binding

// can dynamic bind by putting
// object in scope chain
// performance implications

var x = 5;

var obj = {
  x: 10
};

with(obj) {
  console.log(x); // => 10
}

console.log(x); // => 5
;; efficient dynamic binding

(def ^:dynamic x 5)

(binding [x 10]
  (println x)) ;; => 10

(println x) ;; => 5

Mutable Locals

// In JavaScript locals are mutable

function foo(x) {
  x = "bar";
}
;; this will issue an error

(defn foo [x]
  (set! x "bar"))

Primitive Collections

Arrays

var a = new Array();
var a = [];
var a = [1 2 3]
(def a (array))
(def a (array 1 2 3))

Object

var o = {};
var o = new Object();
var o = {foo: 1, bar: 2};
(def o (js-obj))
(def o (js-obj "foo" 1 "bar" 2))

Immutable Collections

Immutable Lists

// No native implementation
;; efficient addition at head

(def l (list))
(def l (list 1 2 3))
(def l '(1 2 3))
(conj l 4) ;; => '(4 1 2 3)

Immutable Vectors

// No native implementation
;; efficient addition at the end

(def v (vector))
(def v [])
(def v [1 2 3])
(conj v 4) ;; => [1 2 3 4]

Immutable Sets (Collection of unique items)

// No native implementation
(def s (set))
(def s #{})
(def s #{"cat" "bird" "dog"})
(conj s "cat") ;; => #{"cat" "bird" "dog"}

Immutable HashMaps

// No native implementation
(def m (hash-map))
(def m {})
(def m {:foo 1 :bar 2})
(conj m [:baz 3]) ;; => {:foo 1 :bar 2 :baz 3}

Accessing Values

// map access is a static
// language feature

var m = {
  "foo": 1,
  "bar": 2
};

m["foo"];
m.foo;

// array access is a static
// language feature

var a = ["red", "blue", "green"];
a[0];
// collection access is first class

(def m {:foo 1
        :bar 2})

(get m :foo)

(def v ["red" "blue" "green"])

(nth v 0)

Arbitrary Keys

// Only string keys allowed

var m = {
  "foo": 1,
  "bar": 2
};
;; Arbitrary keys allowed

(def m { [1 2] 3
        #{1 2} 3
        '(1 2) 3 })

Adding to a collection

var a = [];
a.push("foo"); // destructive update

var b = {};
b["bar"] = 1; // destructive update
(def a [])
(conj a "foo") ;; => ["foo"]
;; efficient non-destructive update

(def b {})
(assoc b :bar 1) ;; => {:bar 1}
;; efficient non-destructive update

Callable Collections

// No native implementation
// array and object access
// is a static language feature
(def address {:street "1 Bit Ave."
              :city "Bit City"
              :zip 10111011})

(map address [:zip :street])
;; => (10111011 "1 Bit Ave.")
;; Collections can act as
;; functions. HashMaps are functions
;; of their keys.

Cloning

var a = [...];
foo(a.slice(0));

// if foo might mutate a, must clone,
// however this is only a shallow copy
// no native implementation of deep copy
// for primitive collections
(def a [...])
(foo a)

;; shallow cloning, deep cloning unnecessary
;; all core collections are immutable

Equality

// No native implementation

var a = ["red", "blue", "green"];
var b = ["red", "blue", "green"];

console.log(a == b); // => false

// == tests identity
// must implement your own deep
// equality test for all types
(def a ["red" "blue" "green"])
(def b ["red" "blue" "green"])
(= a b) ;; => true

Booleans

If Statements

var bugNumbers = [3234,4542,944,124];

if (bugNumbers.length > 0) {
  console.log('Not ready for release');
}
(def bug-numbers [3234 452 944 124])

(if (pos? (count bug-numbers))
  (println "Not ready for release"))

Handling of empty strings

var emptyString = "";

if (emptyString) {
  console.log("You won't see me!");
} else {
  console.log("Empty string is treated"+
              " as false!");
}
(def empty-string "")

(if empty-string
  (println "Empty string is not false!"))

Handling of zero

var zero = 0;

if (zero) {
  console.log("You won't see me!");
} else {
  console.log("Zero is treated as false!");
}
(def zero 0)

(if zero
  (println "Zero is not false!"))

Value and Identity Equality

// == operator is coercive
1 == "1" // => true

// sometimes based on value
{} == {} // => false
;; ClojureScript has no coercive
;; equality operator, equality
;; is always based on value

(= 1 "1") ;; => false
(= {} {}) ;; => true (see Collections)

Functions

Function definition

function foo() {
  ...
  return true;
}
(defn foo []
  true)

Return Value

// JavaScript is statement oriented
// explicit return

function foo() {
  ...
  return true;
}
;; ClojureScript is expression oriented
;; no explicit return

(defn foo []
  true)

Assign a function to a variable

var foo = function() {
  ...
  return true;
}
(def foo (fn [] true))

Optional Parameters

function foo(a, b, c) { return c; };

foo(1) // => undefined
foo(1, 2, 3) // => 3
(defn foo [a b c] c)

(foo 1) ;; WARNING: function called with incorrect
        ;; number of arguments

(foo 1 2 3) ;; => 3

Dispatch on arity

// No native implementation must manipulate
// arguments object - performance implications
(defn foo
  ([a] "one")
  ([a b] "two")
  ([a b c] "three"))

(foo 1) ;; => "one"
(foo 1 2) ;; => "two"
(foo 1 2 3) ;; => "three"

;; Under advanced compilation direct dispatch to
;; arity. No arguments object manipulation

Variable arguments

// No native implementation. Manipulate arguments
// object explicitly. Performance implications.

function foo() {
  var args = arguments;
  ...
}
;; all arguments beyond two will be placed in a
;; sequence bound to rest

(defn foo [a b & rest]
  ...)

Named Parameters & Defaults

// No native implementation. Pass objects
// explicitly.

function foo(o) {
  var bar = o.bar,
      baz = o.baz;
  ...
}

foo({bar: 1, baz: 2});

function foo(o) {
  var bar = o.bar || "default1",
      baz = o.baz || "default2";
  ...
}
(defn foo [& {:keys [bar baz]}]
  ...)

(foo :bar 1 :baz 2)

(defn foo [& {:keys [bar baz]
              :or {bar "default1"
                   baz "default2"}}]
  ...)

Iterators

Uniform Iteration For All Types

// JavaScript does not have uniform iteration
// over native types.

var colors = ['red', 'orange', 'green'];

for (var i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

var data = { ... };

for (var key in data) {
  console.log('key', key);
  console.log('value', data[key]);
}
;; All ClojureScript datastructures support
;; uniform iterations. JavaScript natives are
;; safely extended to the same iteration protocol

(def colors (array "red" "orange" "green"))

(doseq [color colors]
  (println color))

(def colorsv ["red" "orange" "green"])

(doseq [color colorsv]
  (println color))

(def data { ... })

(doseq [[k v] data]
  (println "key" k)
  (println "value" v))

Closure and counters in loops

var callbacks = [];

// A closure must be used to preserve the
// return for each function at each step of
// the loop.  Otherwise every entry in
// callbacks will return 2;

for (var i = 0; i < 2; i++) {
  (function(_i) {
    callbacks.push(function() {
      return _i;
    });
  })(i);
}

// Without the internal closure,
// the result is 2

callbacks[0]() // == 0

// ECMAScript 6 can support this with
// the use of blocks

let callbacks = [];
for (let i = 0; i < 10; i++) {
  let j = i;
  callbacks.push(function() { print(j) });
}
;; ClojureScript has proper lexical scope

(def callbacks (atom []))

(dotimes [i 2]
  (swap! callbacks conj (fn [] i)))

((@callbacks 0)) // => 0

Lazy Sequences

Map

// this will traverse two arrays

var colors = ["red", "green", "blue"];
console.log((colors.map(function(s) {
  return s[0];
})).map(function(c) {
  return c + "foo";
})); // => ["rfoo", "gfoo", "bfoo"]
;; lazy, will only traverse once

(def colors ["red" "green" "blue"])

(println
  (map #(str % "foo") (map first colors))
;; => ("rfoo" "gfoo" "bfoo")

Filter

var numbers = [0, 1, 2, 3, 4, 5, 7, 8, 9, 10];

var filtered = numbers.filter(function(n) {
  return n % 5 == 0;
}); // filters entire array

var firstn = filtered[0];
// but we only want the first one
(def numbers [0 1 2 3 4 5 6 7 8 9 10])

(def filtered
  (filter #(zero? (rem % 5)) numbers))

(def firstn (first filtered))

;; lazy filter, values after 5 haven't
;; been looked at

Types

Define

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return "Hello, " + this.name;
}
(deftype Person [name]
  Object
  (greet [_]
    (str "Hello" name)))

;; Constructors don't look like functions
;; No explicit prototype manipulation
;; No explicit 'this' to access fields

Instantiate

var person = new Person("Bob");
(Person. "Bob")

Reflection

var name = "Bob";
typeof name // => "string"
;; reflection returns constructors not strings

(def name "Bob")
(type name) ;; => String

Check Type

var name = "Bob";

name instanceof String // => true

(!(name instanceof Number)) // => true
(def name "Bob")

(= (type name) js/String) ;; => true
(string? name) ;; => true

(not= (type name) js/Number) ;; => true
(not (number? name)) ;; => true

Protocols

// Duck typing, implement two different types
// with the same method names

function Cat() {};
Cat.prototype.sound = function() {
  return "Meow!";
}

function Dog() {};
Dog.prototype.sound = function() {
  return "Woof!";
}

// lacking indirection no way to provide defaults
(1).sound() // Error
(defprotocol ISound (sound []))

(deftype Cat []
  ISound
  (sound [_] "Meow!"))

(deftype Dog []
  ISound
  (sound [_] "Woof!"))

(extend-type default
  ISound
  (sound [_] "... silence ..."))

(sound 1) ;; => "... silence ..."

Regular Expressions

var email = "test@example.com";
email.match(/@/)
// => ["@"]
(def email "test@example.com")
(.match email #"@")
;; => ["@"]
var invalidEmail = "f@il@example.com";
invalidEmail.match(/@/g)
// => ["@", "@"]
(def invalid-email "f@il@example.com")
(re-seq #"@" invalid-email)
;; => ("@" "@")

Exceptions

Throw an exception

throw Error("Oops!");
(throw (js/Error. "Oops!"))

Catch an exception

try {
  undefinedFunction();
} catch(e) {
  if (e instanceof ReferenceError) {
    console.log('You called a function'+
                'that does not exist');
  }
} finally {
  console.log('This runs even if'+
              'an exception is thrown');
}
(try
  (undefined-function)
  (catch js/Error e
    (if (= (type e) js/ReferenceError)
      (println
        (str "You called a function"
             "that does not exist"))))
  (finally
    (println
      (str "this runs even if an"
           "exception is thrown"))))

Expression Problem

Modifying Types You Don't Control

// JavaScript allows you to modify prototypes

String.prototype.foo = function(...) {
  ...
};

// Because of the likelihood of clashes this is
// considered bad practice
;; ClojureScript namespaces everything, you
;; can make local extensions with little worry

(defprotocol MyStuff
  (foo [this]))

(extend-type string
  MyStuff
  (foo [this]
    ...))

;; In addition native JavaScript objects like
;; Function, Object, Array, Number, String
;; are never actually directly extended

;; For example say you'd like to use RegExps
;; as functions

(extend-type js/RegExp
  IFn
  (-invoke
   ([this s]
     (re-matches this s))))

(filter #"foo.*" ["foo" "bar" "foobar"])
;; => ("foo" "foobar")
;; This is precisely how callable collections
;; are implemented.

Metaprogramming

Runtime

// JavaScript is dynamic, standard runtime
// metaprogramming techniques applicable
;; ClojureScript is dynamic, standard runtime
;; metaprogramming techniques applicable

Compile Time

// No native implementation, must use external
// compilation tools.
;; ClojureScript has compiler macros, no external
;; tool required

(defmacro my-code-transformation [...]
  ...)

;; Ocaml, Haskell style pattern matching is a
;; library.

;; Prolog style relational programming is a
;; library