CODEWITHSUNDEEP
javascriptdomcanvasfunctional-programming
Olav Gundersen
Olav Gundersen

Reputation: 153

Pure functions when working with DOM manipulation

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 :)

Upvotes: 9

Views: 1871

Answers (3)

Mulan
Mulan

Reputation: 135197

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>

Upvotes: 5

Blindman67
Blindman67

Reputation: 54026

To do it via the function programming paradigm 

function clearCanvas(canvas) { 
    const imgData = canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height);
    new Uint32Array(imgData.data.buffer).set(0);
    return data;
} 

canvas.getContext('2d').setImageData(clearCanvas(canvas),0,0);

No side effects and you return the same data for the same arguments.

But functional programming is a defensive style that works on the assumption that code is dangerous and that the dangers must be isolated. It is thus very resource hungry and slow and not at all suited to performant code.

Upvotes: 0

user3310334
user3310334

Reputation:

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.

Upvotes: 5

Related Questions