Javascript pure function example with objects

Question

I have the example below of an impure function. Note the variable a is outside of the function scope is being changed. To get around it, one could clone the object inside the function and return a copy, but is that the right way?

What are some options to make the function transformObject pure?

var a = {
    a : 1,
    b : 2
};

function transformObject(obj) {
    var ref = obj;
    _.each(ref, function(val, index){
        ref[index] = val*2;
    });
    return ref;
}

s=JSON.stringify
$('#code').text(s(transformObject(a)))
$('#code2').text(s(a))

https://jsfiddle.net/br17kk2h/1/

@RubenYeghikyan, I guess OP is asking for better/correct approach.. — Rayon, Oct 23 '15 at 09:45
if so, maybe this will be helpful https://jsfiddle.net/br17kk2h/2/ — Ruben Yeghikyan, Oct 23 '15 at 09:46
@RubenYeghikyan I am not sure that is correct, value of `a` is changed in the same way — filype, Oct 23 '15 at 09:53
http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-an-object — Ruben Yeghikyan, Oct 23 '15 at 09:57
If you want to have the original unchanged you need to define a new object inside your transform function, like this: https://jsfiddle.net/boq2qwdL/ — Danmoreng, Oct 23 '15 at 09:57

score 3 · Accepted Answer · edited May 23 '17 at 12:23

A pure function follows three main principles:

The function has a single responsibility

The function should do only one thing.

The function has no side effects

The function does not change state outside its scope.

The function is referentially transparent

The function outputs the same value for the same inputs.

The next step is to explore the impact of these principles in the design of the function.

Your function already meets the first principle, although the name should be improved ;)

And it meets the second principle too, because it doesn't modify anything else outside its scope (its input parameters).

Unfortunately it doesn't meet the third principle:

var a = {
  a : 1,
  b : 2
};

var b = transformObject(a);//b = {2, 4}

var c = transformObject(a);//c = {4, 8}

Same inputs (a) but different outputs. That violates the third principle.

Referentially transparent functions needs immutable data.

A good answer has already been posted by Nina Scholz:

function transformObject(a) {
  var b = {};
  Object.keys(a).forEach(function (k) { b[k] = a[k] * 2; });
  return b;
}

But it only works because the input object does not contain any other object nested in it.

Right now there are some good libraries that gives you immutable structures (like ImmutableJS).

A simple example using ImmutableJS:

describe('a List', () => {

    function addMovie(currentState, movie) {
        return currentState.push(movie);
    }

    it('is immutable', () => {

        let state = List.of('Avengers', 'Antman');
        let nextState = addMovie(state, 'Superman');

        expect(nextState).to.equal(List.of(
            'Avengers',
            'Antman',
            'Superman'
        ));

        expect(state).to.equal(List.of(
            'Avengers',
            'Antman'
        ));
    });

    it('can be updated and returns another immutable List', () => {

        let state = List.of(1,2,3,4);

        let nextState = state.map(value => value*2);

        expect(nextState).to.equal(List.of(2,4,6,8));
        expect(state).to.equal(List.of(1,2,3,4));
    });
});

You can read more about immutable API here

Maybe it violates rule 2 as well. The side effect is that variable a changes. Thanks for the reference on immutable Js. Do you mind writing a code example using immutable js? — filype, Apr 29 '16 at 13:42
I'm not sure the third rule is violated for the reason you give: *Same inputs (`a`) but different outputs.* By that reasoning, a function that returns its own input unmutated would be in violation of that rule if the input were modified between calls. It's the mutability of `a` that makes the snippet impure. — Corey, Sep 13 '18 at 14:47
To be certain, the function is not referentially transparent, but the reason is because you can't replace the call with its output and be sure that the behavior of our code won't change. — Corey, Sep 13 '18 at 16:08

score 1 · Answer 2 · answered Oct 23 '15 at 09:57

1

Change the object:

function transformObject(a) {   
    Object.keys(a).forEach(function (k) { a[k] *= 2; });
}

var a = {
        a : 1,
        b : 2
    };
transformObject(a);  
document.write('<pre>' + JSON.stringify(a, 0, 4) + '</pre>');

Keep the object and return a new object with the result:

function transformObject(a) {
    var b = {};
    Object.keys(a).forEach(function (k) { b[k] = a[k] * 2; });
    return b;
}

var a = {
        a : 1,
        b : 2
    },
    b = transformObject(a);  
document.write('<pre>' + JSON.stringify(a, 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(b, 0, 4) + '</pre>');

answered Oct 23 '15 at 09:57

Nina Scholz

376,160
25
347
392

So which of those approaches is the preferred one? Try giving only one answer :-) – Bergi Oct 23 '15 at 10:16
OP was asking for the right way to make this function pure. Now you gave two answers, one wrong and one correct, and I don't know whether to up- or downvote or both :-) – Bergi Oct 23 '15 at 10:21

Javascript pure function example with objects

2 Answers2

The function has a single responsibility

The function has no side effects

The function is referentially transparent

Linked

Related