TomYeoman/objectMutation.js

## objectMutation.js
<!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>
	<!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>