Supercharge Your Flutter Apps With Apple Watch Integration
Leandro Pontes Berleze | Sep 25, 2024
As a JavaScript developer, we should know that most things are objects – from core features, like strings and arrays, to the browser’s APIs. Here you can have a full introduction about objects in JavaScript.
JS’s objects are so beautiful: we can copy them, change and remove properties and do many cool things.
However, it’s always good to remember:
That’s a question many developers have, and here a reasonable answer: there is nothing wrong if the code is mutable – the JavaScript’s Array API is and there’s nothing wrong with that. Yet, the misuse of mutability can cause side effects to your software. Here’s an example:
const user = {
name: 'John Due',
birthdate: '1988-08-15',
}
const changeName = (user, newName) => {
const newUser = user
newUser.name = newName
return newUser
}
const userWithNewName = changeName(user, 'Jojo')
// both users will have the name = 'Jojo'
console.log(user, userWithNewName)
We can see that: although we are creating a new object, the user
one was modified. This happens because when you assign a new value to an existing object, you are just assigning a memory reference to it.
const newUser = user
Immutability is the art of maintaining the state of an object, making development simple, traceable, testable and decreasing any possible side effects. The main idea is: an update should not change the object, but create a new object with the updated data.
We can achieve immutability through pure functions, aka functions that will always return a given value if provided with the same input values. Neat, right? See this example:
const user = {
name: 'John Due',
birthdate: '1988-08-15',
}
const changeName = (user, newName) => {
return {
...user, // destructuring user object
name: newName, // override name attribute with new name
}
}
const userWithNewName = changeName(user, 'Jojo')
// the old user object has name = 'John Due' and the new object, name = 'Jojo'
console.log(user, userWithNewName)
Here we have a user
object and its changeName
function. You can see that, given the initial user and the new name, the initial object isn’t updated, and we always have the same result.
Okay, we already know what can happen if we change the object’s state, now we need to know how to work with objects without causing side effects.
There are some ways to make immutable objects, but the most recommended approach to create them is using the Objects API and the ES6 destructuring assignment. We could also use functions like .map
, .filter
and .reduce
to accomplish the same task.
// Example using Objects.assign
const changeName = (user, newName) => Object.assign({}, user, {
name: newName
})
// Example using destructuring assignment
const changeName = (user, newName) => ({
...user,
name: newName,
})
When coding with JavaScript, manipulating objects is simple and practical, even though, it requires some care so your code does not end up bringing you headaches. Always remember to test your code to avoid unexpected mutation of objects.
There are some libraries that work pretty good with immutability, like ImmutableJS, Freezer and seamless-immutable.
Here at Cheesecake Labs we use Redux and ImmutableJS to accomplish pure and functional Front-end projects, keeping our code clean and easy to read.
Happy Coding!
A Front-End developer passionate about open source culture. Trying to help people by sharing code.