raydot/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Video 9">
  <meta charset="utf-8">
  <title>Redux Tutorial</title>
  <script src="https://wzrd.in/standalone/expect@latest"></script>
  <script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
</head>
<body>

<script id="jsbin-javascript">
'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var addCounter = function addCounter(list) {
  // ANTIPATTERN: Mutation
  //list.push(0)

  // Better, does not mutate:
  // return list.concat[0]

  // Best:
  return [].concat(_toConsumableArray(list), [0]);
};

var removeCounter = function removeCounter(list, index) {
  // ANTIPATTERN: Mutation
  //list.splice(index, 1)

  //return list
  //  .slice(0, index)
  //  .concat(list.slice(index + 1))

  // and let's improve on the method chain pattern:
  return [].concat(_toConsumableArray(list.slice(0, index)), _toConsumableArray(list.slice(index + 1)));
};

var incrementCounter = function incrementCounter(list, index) {
  // ANTIPATTERN: modification
  // list[index]++;
  // return list
  // Similar pattern to the one in removeCounter

  //return list
  //  .slice(0, index)
  //  .concat([list[index] + 1])
  //  .concat(list.slice(index + 1))

  // And now, nice way:
  return [].concat(_toConsumableArray(list.slice(0, index)), [list[index] + 1], _toConsumableArray(list.slice(index + 1)));
};

var testAddCounter = function testAddCounter() {
  var listBefore = [];
  var listAfter = [0];

  // Keep from mutating
  deepFreeze(listBefore);

  expect(addCounter(listBefore)).toEqual(listAfter);
};

var testRemoveCounter = function testRemoveCounter() {
  // takes an array and an integer
  // returns the array without the item indicated by the integer
  var listBefore = [0, 10, 20];
  var listAfter = [0, 20];

  deepFreeze(listBefore);

  expect(removeCounter(listBefore, 1)).toEqual(listAfter);
};

var testIncrementCounter = function testIncrementCounter() {
  var listBefore = [0, 10, 20];
  var listAfter = [0, 11, 20];

  deepFreeze(listBefore);

  expect(incrementCounter(listBefore, 1)).toEqual(listAfter);
};

testAddCounter();
testRemoveCounter();
testIncrementCounter();
console.log('All tests passed!');
</script>


<script id="jsbin-source-javascript" type="text/javascript">const addCounter = (list) => {
  // ANTIPATTERN: Mutation
  //list.push(0)

  // Better, does not mutate:
  // return list.concat[0]

  // Best:
  return [...list, 0];
}

const removeCounter = (list, index) => {
  // ANTIPATTERN: Mutation
  //list.splice(index, 1)

  //return list
  //  .slice(0, index)
  //  .concat(list.slice(index + 1))

  // and let's improve on the method chain pattern:
  return [
    ...list.slice(0, index),
    ...list.slice(index + 1)
  ]
};

const incrementCounter = (list, index) => {
  // ANTIPATTERN: modification
  // list[index]++;
  // return list
  // Similar pattern to the one in removeCounter

  //return list
  //  .slice(0, index)
  //  .concat([list[index] + 1])
  //  .concat(list.slice(index + 1))

  // And now, nice way:
  return [
    ...list.slice(0, index),
    list[index] + 1,
    ...list.slice(index + 1)
  ]

}

const testAddCounter = () => {
  const listBefore = [];
  const listAfter = [0];

  // Keep from mutating
  deepFreeze(listBefore);

  expect(
    addCounter(listBefore)
  ).toEqual(listAfter)
};

const testRemoveCounter = () => {
  // takes an array and an integer
  // returns the array without the item indicated by the integer
  const listBefore = [0, 10, 20]
  const listAfter = [0, 20]

  deepFreeze(listBefore);

  expect(
    removeCounter(listBefore, 1)
  ).toEqual(listAfter);
}

const testIncrementCounter = () => {
  const listBefore = [0, 10, 20]
  const listAfter = [0, 11, 20]

  deepFreeze(listBefore)

  expect(
    incrementCounter(listBefore, 1)
  ).toEqual(listAfter)
}


testAddCounter();
testRemoveCounter();
testIncrementCounter();
console.log('All tests passed!')</script></body>
</html>

## jsbin.cojitey.js
'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var addCounter = function addCounter(list) {
  // ANTIPATTERN: Mutation
  //list.push(0)

  // Better, does not mutate:
  // return list.concat[0]

  // Best:
  return [].concat(_toConsumableArray(list), [0]);
};

var removeCounter = function removeCounter(list, index) {
  // ANTIPATTERN: Mutation
  //list.splice(index, 1)

  //return list
  //  .slice(0, index)
  //  .concat(list.slice(index + 1))

  // and let's improve on the method chain pattern:
  return [].concat(_toConsumableArray(list.slice(0, index)), _toConsumableArray(list.slice(index + 1)));
};

var incrementCounter = function incrementCounter(list, index) {
  // ANTIPATTERN: modification
  // list[index]++;
  // return list
  // Similar pattern to the one in removeCounter

  //return list
  //  .slice(0, index)
  //  .concat([list[index] + 1])
  //  .concat(list.slice(index + 1))

  // And now, nice way:
  return [].concat(_toConsumableArray(list.slice(0, index)), [list[index] + 1], _toConsumableArray(list.slice(index + 1)));
};

var testAddCounter = function testAddCounter() {
  var listBefore = [];
  var listAfter = [0];

  // Keep from mutating
  deepFreeze(listBefore);

  expect(addCounter(listBefore)).toEqual(listAfter);
};

var testRemoveCounter = function testRemoveCounter() {
  // takes an array and an integer
  // returns the array without the item indicated by the integer
  var listBefore = [0, 10, 20];
  var listAfter = [0, 20];

  deepFreeze(listBefore);

  expect(removeCounter(listBefore, 1)).toEqual(listAfter);
};

var testIncrementCounter = function testIncrementCounter() {
  var listBefore = [0, 10, 20];
  var listAfter = [0, 11, 20];

  deepFreeze(listBefore);

  expect(incrementCounter(listBefore, 1)).toEqual(listAfter);
};

testAddCounter();
testRemoveCounter();
testIncrementCounter();
console.log('All tests passed!');
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Video 9">
	<meta charset="utf-8">
	<title>Redux Tutorial</title>
	<script src="https://wzrd.in/standalone/expect@latest"></script>
	<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
	</head>
	<body>

	<script id="jsbin-javascript">
	'use strict';

	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

	var addCounter = function addCounter(list) {
	// ANTIPATTERN: Mutation
	//list.push(0)

	// Better, does not mutate:
	// return list.concat[0]

	// Best:
	return [].concat(_toConsumableArray(list), [0]);
	};

	var removeCounter = function removeCounter(list, index) {
	// ANTIPATTERN: Mutation
	//list.splice(index, 1)

	//return list
	// .slice(0, index)
	// .concat(list.slice(index + 1))

	// and let's improve on the method chain pattern:
	return [].concat(_toConsumableArray(list.slice(0, index)), _toConsumableArray(list.slice(index + 1)));
	};

	var incrementCounter = function incrementCounter(list, index) {
	// ANTIPATTERN: modification
	// list[index]++;
	// return list
	// Similar pattern to the one in removeCounter

	//return list
	// .slice(0, index)
	// .concat([list[index] + 1])
	// .concat(list.slice(index + 1))

	// And now, nice way:
	return [].concat(_toConsumableArray(list.slice(0, index)), [list[index] + 1], _toConsumableArray(list.slice(index + 1)));
	};

	var testAddCounter = function testAddCounter() {
	var listBefore = [];
	var listAfter = [0];

	// Keep from mutating
	deepFreeze(listBefore);

	expect(addCounter(listBefore)).toEqual(listAfter);
	};

	var testRemoveCounter = function testRemoveCounter() {
	// takes an array and an integer
	// returns the array without the item indicated by the integer
	var listBefore = [0, 10, 20];
	var listAfter = [0, 20];

	deepFreeze(listBefore);

	expect(removeCounter(listBefore, 1)).toEqual(listAfter);
	};

	var testIncrementCounter = function testIncrementCounter() {
	var listBefore = [0, 10, 20];
	var listAfter = [0, 11, 20];

	deepFreeze(listBefore);

	expect(incrementCounter(listBefore, 1)).toEqual(listAfter);
	};

	testAddCounter();
	testRemoveCounter();
	testIncrementCounter();
	console.log('All tests passed!');
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const addCounter = (list) => {
	// ANTIPATTERN: Mutation
	//list.push(0)

	// Better, does not mutate:
	// return list.concat[0]

	// Best:
	return [...list, 0];
	}

	const removeCounter = (list, index) => {
	// ANTIPATTERN: Mutation
	//list.splice(index, 1)

	//return list
	// .slice(0, index)
	// .concat(list.slice(index + 1))

	// and let's improve on the method chain pattern:
	return [
	...list.slice(0, index),
	...list.slice(index + 1)
	]
	};

	const incrementCounter = (list, index) => {
	// ANTIPATTERN: modification
	// list[index]++;
	// return list
	// Similar pattern to the one in removeCounter

	//return list
	// .slice(0, index)
	// .concat([list[index] + 1])
	// .concat(list.slice(index + 1))

	// And now, nice way:
	return [
	...list.slice(0, index),
	list[index] + 1,
	...list.slice(index + 1)
	]

	}

	const testAddCounter = () => {
	const listBefore = [];
	const listAfter = [0];

	// Keep from mutating
	deepFreeze(listBefore);

	expect(
	addCounter(listBefore)
	).toEqual(listAfter)
	};

	const testRemoveCounter = () => {
	// takes an array and an integer
	// returns the array without the item indicated by the integer
	const listBefore = [0, 10, 20]
	const listAfter = [0, 20]

	deepFreeze(listBefore);

	expect(
	removeCounter(listBefore, 1)
	).toEqual(listAfter);
	}

	const testIncrementCounter = () => {
	const listBefore = [0, 10, 20]
	const listAfter = [0, 11, 20]

	deepFreeze(listBefore)

	expect(
	incrementCounter(listBefore, 1)
	).toEqual(listAfter)
	}


	testAddCounter();
	testRemoveCounter();
	testIncrementCounter();
	console.log('All tests passed!')</script></body>
	</html>