Pure functions when working with DOM manipulation

Question

I am trying to wrap my head around pure functions, but I am not sure that I really understand it. I know that pure functions shouldn't mutate external state, and it should return the same output every time as long as it has the same input.

I know that for example this function is impure, because it mutates the cart variable which other parts of the program may use:

const addToCart = (cart, item) => { 
  cart.push(item); 
  return cart; 
};

The same function in a pure state:

const addToCart = (cart, item) => { 
  const newCart = lodash.cloneDeep(cart); 
  newCart.push(item); 
  return newCart; 
};

This makes sense to me. I have learned that pure functions should always return something.

However, I am working on some stuff that requires me to use the HTML5 canvas element, and I have this function which clears the canvas:

function clearCanvas(canvas) { 
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); 
}

How can I make the above function pure? I realize it's impure because it doesn't return anything, also it mutates the state of the canvas variable. Is DOM-manipulation inherently impure?

Any help would be appreciated :)

Answer 1

DOM-manipulation is impure. You cannot clear the canvas in a "pure" way.

Anything which changes the system's state or interacts with the outside world is said to have side effects, and in a purely-functional programming environment side effects are to be avoided.

However, DOM-manipulation clearly does both of these; clearing the canvas is both a change of state (uncleared to cleared) and the user can see this change.

---

You may want to have a deeper look into functional programming, which seems to be what you're trying to achieve with your pure/impure function approach.

The object of functional programming is to avoid changing state, so that, for example, one program doesn't change an object while another program is working with it, which can have unexpected and unwanted results.

Answer 2

the IO monad

You might be interested in the IO monad – essentially IO contains a thunk, or a lazy function, which only runs when we call runIO. More importantly tho, we can keep things bottled up in IO and map an ordinary function that allows us to operate on the contained value.

For a good read and another IO implementation, see Chapter 9: Monadic Onions from Brian Lonsdorf's book

---

little demo

// IO :: (void -> a) -> IO a
const IO = f => ({
  // runIO :: void -> a
  runIO: f,
  // map :: IO a => (a -> b) -> IO b
  map: g =>
    IO(() => g(f())),
  // chain :: IO a => (a -> IO b) -> IO b
  chain: g =>
    IO(g(f()).runIO)
})

// IO.of :: a -> IO a
IO.of = x => IO(() => x)

// log :: String -> a -> IO a
const log = label => x =>
  IO(() => (console.log(label, x), x))

// $ :: String -> IO HTMLElement
const $ = x =>
  IO(() => document.querySelector(x))

// getText :: HTMLElement -> String
const getText = e =>
  e.textContent

// main :: String -> IO String
const main = selector =>
  $(selector)
    .map(getText)
    .chain(log('A'))
    .map(s => s.toUpperCase())
    .chain(log('B'))
    .runIO()

main('title')
// A hello world
// B HELLO WORLD

<title>hello world</title>