const array = [2, 1, 4, -1, 5];

const sorted = array.sort();

console.log(sorted === array) // yep

const str = 'hello world';
const newStr = str.replace('he', 'a');

console.log(str === newStr); // Nope!

const array = [2, 1, 4, -1, 5];

function sort (arr) {
  return [...arr].sort();
}

const sorted = sort(array);

console.log(sorted === array); // Nope!

// Predicability.
const arr = [1, 2, 3];

arr.sort(); // unintended side-effect.

// Performance
function pushItem(arr, item) {
  let newArr = [...arr].push(item);
  
  return newArr;
}

// assume we do this 1000 times
const arr = [];
pushItem(arr, 1);

const [state, setState] = useState({});

setState({ a: 1 }); // Immutable.

this.state = { a: 1 };
this.state.a = 3; // Mutable

this.state.b = 4; // ??

<template>
  <div>
    <span>{{ displayName }}</span>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    }
  },
  data: () => ({
    firstName: '',
    lastName: ''
  }),
  computed: {
    // How does Vue know that any of these properties changed?
    displayName () {
      return `${this.title}. ${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

// You can pass a function to the vm.$watch
// How does Vue know that it uses firstName and lastName?
this.$watch(() => {
  return `${this.firstName} ${this.lastName}`;
}, (val, oldVal) => {
  console.log(val, oldVal);
});

// Takes an object and returns an observable one.
function observe (obj) {
  const observable = {};

  Object.keys(obj).forEach(key => {
    // Set the initial value under a private key.
    observable[`_${key}`] = { value: obj[key] };

    // Expose getters/setters to proxy the underlying value.
    Object.defineProperty(observable, key, {
      get () {
        return this[`_${key}`].value;
      },
      set (val) {
        this[`_${key}`].value = val;
      }
    });
  });

  return observable;
}

function watch (expression, callback) {
  // Do something with the expression.

  // Run the callback once the expression dependencies change.
}

// Simple function to wrap values in.
function wrap (value) {
  return {
    value,
    deps: [],
    notify () {
      // runs the observers
      this.deps.forEach(dep => dep());
    }
  };
}

// ...
Object.keys(obj).forEach(key => {
  // Set the initial value under a private key.
  observable[`_${key}`] = wrap(obj[key]);

  // Expose getters/setters to proxy the underlying value.
  Object.defineProperty(observable, key, {
    get () {
      const subject = this[`_${key}`];
      // collecting dependents
      subject.deps.push(
        // 😕 ???
      );

      return subject.value;
    },
    set (val) {
      const subject = this[`_${key}`];
      subject.value = val;
      // notify observers.
      subject.notify();
    }
  });
});
// ...

let activeFn;

// watches an expression and runs the callback.
function watch (expression, callback) {
  activeFn = expression;
 
  expression();
 
  activeFn = undefined;
}

// watches an expression and runs the callback.
function watch (expression, callback) {
  activeFn = expression;
  // not a very good way to do it, but 🤷‍
  expression.fn = callback;
  // by running the expression, we ran our `get` handlers.
  expression();
  activeFn = undefined; // must be done!
}

function wrap (value) {
  return {
    // ...
    notify () {
      // in our set handler
      obs.deps.forEach(dep => {
        const newVal = dep();

        if (dep.fn) {
          // pass the new value to the attached handler.
          dep.fn(newVal);
        }
      });
    }
  }
}

// state object
const state = observe({
  count: 0
});

// render-fn
const render = () => {
  return `
	<h1>
	  Count is: ${state.count}
	</h1>
  `;  
};

// start watching.
watch(render, (value) => {
  document.body.innerHTML = value;
});

// run the first render
document.body.innerHTML = render();

setInterval(() => {
  state.count++;
}, 500);

// Produce!
function doSomething () {
  // ...
}

// Consume!
doSomething();

const el = document.querySelector('#el');

// Produce? Consume?
el.addEventListener(function () {
  // ...
});

function addEventListener(eventName, callback) {
     // call the real addEventListener
     callRealAddEventListener(eventName, function() {
        // first call the original callback
        callback(...);     
        // and then run Angular-specific functionality
        var changed = angular.runChangeDetection();
         if (changed) {
             angular.reRenderUIPart();
         }
     });
}