Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 13, 2016 15:41
Show Gist options
  • Save anonymous/c93afbe621868a5da517cc740e1d9fb3 to your computer and use it in GitHub Desktop.
Save anonymous/c93afbe621868a5da517cc740e1d9fb3 to your computer and use it in GitHub Desktop.
Download ZIP
Avoiding mutations // source http://jsbin.com/fagede
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avoiding object mutations</title>
<script src="http://wzrd.in/standalone/expect@latest"></script>
<script src="http://wzrd.in/standalone/deep-freeze@latest"></script>
</head>
<body>
<script id="jsbin-javascript">
// Mark to-do as completed
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var toggleTodo = function toggleTodo(todo) {
// BAD
//todo.completed = !todo.completed;
//return todo;
// PRETTY BAD (Incase we add property in future)
return {
name: "Cut Grass",
text: "DO IT!",
completed: true
};
// GOOD
return Object.assign({}, todo, {
completed: !todo.completed
});
// ALSO GOOD
return _extends({}, todo, {
completed: !todo.completed
});
};
// Test to-do item
var testToggleTodo = function testToggleTodo() {
var toDoBefore = {
name: "Cut Grass",
text: "DO IT!",
completed: false
};
var toDoAfter = {
name: "Cut Grass",
text: "DO IT!",
completed: true
};
// Do not allow object to be mutated
deepFreeze(toDoBefore);
expect(toggleTodo(toDoBefore)).toEqual(toDoAfter);
};
testToggleTodo();
console.log("TEST PASSED");
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Mark to-do as completed
const toggleTodo = (todo) => {
// BAD
//todo.completed = !todo.completed;
//return todo;
// PRETTY BAD (Incase we add property in future)
return {
name: "Cut Grass",
text: "DO IT!",
completed: true
};
// GOOD
return Object.assign({}, todo, {
completed: !todo.completed
});
// ALSO GOOD
return {
...todo,
completed:!todo.completed
};
};
// Test to-do item
const testToggleTodo = () => {
const toDoBefore = {
name: "Cut Grass",
text: "DO IT!",
completed: false
};
const toDoAfter = {
name: "Cut Grass",
text: "DO IT!",
completed: true
};
// Do not allow object to be mutated
deepFreeze(toDoBefore);
expect(
toggleTodo(toDoBefore)
).toEqual(toDoAfter);
}
testToggleTodo();
console.log("TEST PASSED");</script></body>
</html>
Raw
jsbin.fagede.js
// Mark to-do as completed
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var toggleTodo = function toggleTodo(todo) {
// BAD
//todo.completed = !todo.completed;
//return todo;
// PRETTY BAD (Incase we add property in future)
return {
name: "Cut Grass",
text: "DO IT!",
completed: true
};
// GOOD
return Object.assign({}, todo, {
completed: !todo.completed
});
// ALSO GOOD
return _extends({}, todo, {
completed: !todo.completed
});
};
// Test to-do item
var testToggleTodo = function testToggleTodo() {
var toDoBefore = {
name: "Cut Grass",
text: "DO IT!",
completed: false
};
var toDoAfter = {
name: "Cut Grass",
text: "DO IT!",
completed: true
};
// Do not allow object to be mutated
deepFreeze(toDoBefore);
expect(toggleTodo(toDoBefore)).toEqual(toDoAfter);
};
testToggleTodo();
console.log("TEST PASSED");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment