ClojureScript

• Clojure—a dialect of LISP
  • LISP: The LISt Processing language
  • Clojure compiles to the Java Virtual Machine
• ClojureScript: Clojure that compiles to JavaScript
• A functional programming language

What’s a function?

• A function is like a “black box.”

Functions inside functions

• Inside the average function box

How to Write ClojureScript

Everything is a list.

A list consists of:

• An open parenthesis
• The name of a function
• The function arguments
• A closing parenthesis

Example:

(+ 3 5)

You may edit the code to try other numbers and operators. Press CTRL-ENTER to evaluate the code.

More Arithmetic

Here are your arithmetic functions:

+, -, *, /, quot, and rem

()

Multiple Arithmetic Operations

Translate 3 + 4 * 5 to ClojureScript:

(+ 3 (* 4 5))

How about 3 * 4 + 5?

()

How Algebraic Variables Work

Photo Credit: Angela P

x = 5

y = x · 3

How Algebraic Variables Work (cont.)

Photo Credit: Angela P

x = 5

y = x · 3

x = 6

Symbols in ClojureScript

Here is the model:

(def symbol value)

(def x 27)

In ClojureScript, you bind a symbol to a value.

Defining Functions

The model:

(def symbol (fn [parameters]
             function-body))

• Just another thing you define
• The square brackets are a vector
• The last expression in the function body is the result

Some Concrete Examples

(def average (fn [a b] (/ (+ a b) 2.0)))
(def cube (fn [n] (* n n n)))

Interacting with JavaScript

What if I wanted to do the Pythagorean distance formula? I would need to do a square root...

(sqrt (+ (* 3 3) (* 4 4)))

Interacting with JavaScript (cont.)

What if I wanted to do the Pythagorean distance formula? I would need to do a square root...

(sqrt (+ (* 3 3) (* 4 4)))

Photo Credit: Alan Turkus

How to Access JavaScript

Try these!

()

Some Shortcuts

Defining a function

(def square (fn [x] (* x x))) ⇒ (defn square [x] (* x x))

Accessing JavaScript methods

(.sqrt js/Math 5) ⇒ (js/Math.sqrt 5)

(.parseFloat js/window "12.3") ⇒
   (js/window.parseFloat "12.3") ⇒
   (js/parseFloat "12.3")

()

Pythagorean Distance

(def distance (fn [a b]
                (js/Math.sqrt (+ (* a a) (* b b)))))

The HTML

<p>
a = <input type="text" id="a" size="5"/>
b = <input type="text" id="b" size="5"/>
c = <span id="c"></span>
</p>

<p>
<input type="button" value="Calculate" id="calculate"/>
</p>

Which looks like this...

a = b = c =

Off to the “real world”...

Let’s go to a real development environment to complete this example.

• Get an element by id: (js/document.getElementById "some-id")
• Get an element’s value: (.-value element)
• Set an element’s text: (set! (.-innerHTML element) "content")

Loose Ends

• Local variables
• Conditionals

Local Variables

Here is the formula for monthly payment on a loan:

We want a function that takes:

• Principal
• Annual percentage rate
• Number of years of loan

It would be convenient to have temporary variables for:

• Monthly interest rate as a decimal
• Number of months (rather than years)
• The common sub-formula: (1 + r)ⁿ

Local Variables with let

(defn payment [principal apr years]
  (let [rate (/ (/ apr 100) 12) ; convert to monthly decimal
        n (* years 12) ; convert to months
        sub-formula (js/Math.pow (+ 1 rate) n)]
    (* principal (/ (* rate sub-formula) (- sub-formula 1)))))
    
(payment 5000 7.25 10)

Conditionals with if

The model:

(if condition true-expr false-expr)

Conditional functions: =, not=, <, >, <=, >=

Conditional operator functions: and, or, not

(defn tester [condition]
  (if condition "yes" "no"))
  
(tester (< 3 5))

Series of Conditions with cond

(defn test-cond [qty]
  (let [price 3.95
        subtotal (* price qty)]
  (cond
    (< qty 10) subtotal
    (< qty 20) (* subtotal .90)
    (< qty 50) (* subtotal .85)
    :else (* subtotal .75))))

(test-cond 10)

Collections

• Lists
• Vectors
• Maps
• Sets

Lists

• Items between parentheses
• First item must be a symbol bound to a function
• Intended to be accessed sequentially
• How to create a true list of items?

(list 1 2 (- 8 5))

List Operations

• first returns the first item in the collection
• rest returns a sequence of all the items except the first one
• last returns the last item in the collection
• count gives you the number of items in the collection
• list? returns true if its argument is a list, false otherwise
• conj takes a collection and an item; returns a new collection with that item added
• nth takes a collection and an index, and returns the item at that index

(def data (list 10 11 12 13 14))
(first data)

Vectors

• Items between square brackets
• Intended to be accessed by index
• How to create a vector of items?
  • [1 2 3]
  • (vector 1 2 3)
  • (vec (list 1 2 3))
  • (into [] (list 1 2 3))

[1 2 (- 8 5)]

Vector Operations

• first returns the first item in the collection
• rest returns a sequence of all the items except the first one
• last returns the last item in the collection
• count gives you the number of items in the collection
• vector? returns true if its argument is a vector, false otherwise
• conj takes a collection and an item; returns a new collection with that item added
• nth takes a collection and an index, and returns the item at that index

(def data [10 11 12 13 14])
(first data)

Iterating through a List/Vector

Consider this code to calculate a 10% discount on a price:

(defn discount [price]
  (* price 0.90))

With this vector of prices:

(def price-vector [3.95 6.80 2.49 5.33 1.99])

The map function

The map function applies a function to each element of a list, generating a new sequence of values:

(defn discount [price]
  (* price 0.90))

(def price-vector [3.95 6.80 2.49 5.33 1.99])

(map discount price-vector)

map 1

map 2

map 3

map 4

map 5

map 6

Huh?!

(defn discount [price]
  (* price 0.90))

(def price-vector [3.95 6.80 2.49 5.33 1.99])(map discount price-vector)

Photo credit: furlined

List Comprehensions

(def price-vector [3.95 6.80 2.49 5.33 1.99])

(for [price price-vector]
  (* price 0.90))

Reducing a Collection to a Value

Given a vector of numbers:

[2 3 5]

How do I get the sum of the squares of the numbers?

The reduce function

(defn sumsq [result value]
  (+ result (* value value)))

(reduce sumsq 0 [2 3 5])

Calling reduce

The reduction function

reduce 1

reduce 2

reduce 3

reduce 4

Back to the Real World

Develop a web page to calculate mean and standard deviation.

The map collection

• Associates keys and values
• Unfortunately has same name as map function

Creating and using maps

(def capitals {:paris "France" :london "England" :washington-dc "USA"})

• (get map key)
• Shortcut: (key map) if key is a symbol
• (keys map)

Further Links

• http://clojurescript.org/reference/documentation
• https://funcool.github.io/clojurescript-unraveled/
• https://github.com/magomimmo/modern-cljs