# Learning Code

One of the original goals to this project is to help developers learn code. Take this module for example:

```javascript
export {deepFreeze, clone}

function deepFreeze(o) {
  Object.freeze(o)

  Object.getOwnPropertyNames(o).forEach(prop => {
    if (
      o.hasOwnProperty(prop) &&
      o[prop] !== null &&
      (typeof o[prop] === 'object' || typeof o[prop] === 'function') &&
      !Object.isFrozen(o[prop])
    ) {
      deepFreeze(o[prop])
    }
  })

  return o
}

function clone(item) {
  /* eslint complexity:[2, 11] max-depth:[2, 6] */
  if (!item) {
    return item
  }
  const type = typeof item
  const string = Object.prototype.toString.call(item)
  const isPrimitive = type !== 'object' && type !== 'function'
  let result = item

  if (!isPrimitive) {
    if (string === '[object Array]') {
      result = []
      item.forEach((child, index) => {
        result[index] = clone(child)
      })
    } else if (type === 'object') {
      if (item.nodeType && typeof item.cloneNode === 'function') {
        result = item.cloneNode(true)
      } else if (!item.prototype) {
        if (string === '[object Date]') {
          result = new Date(item)
        } else {
          result = {}
          for (const i in item) {
            if (item.hasOwnProperty(i)) {
              result[i] = clone(item[i])
            }
          }
        }
      } else if (item.constructor) {
        result = new item.constructor()
      } else {
        result = item
      }
    }
  }

  return result
}
```

The `clone` function is `39` lines of code, has a nesting depth of `6`, and a
[cyclomatic complexity](https://en.wikipedia.org/wiki/Cyclomatic_complexity) of `11`.
Not exactly the most simple code in the world! All the branches are important and handle edge cases that make the
code work. In addition, there is another function in the file and without inspecting the code you're unsure whether
that function is useful in the `clone` method or not. All of this ends up making learning how `clone` works at least
a 10 minute task. But with slice-js, you can learn it much more quickly! Let's use `slice-js` to learn this code.

`slice-js` takes two inputs: The source code, and a code coverage report ([for example](https://coverage-example.netlify.com/lcov-report/index.html)). Based on this information, it can create a
slice of the program that's relevant for that coverage. Let's just say that we can generate the coverage based on a
given usage module. We'll start with the most basic usage of all. Passing nothing:

```javascript
import {clone} from 'clone'
clone()
```

Based on this usage, a coverage report could be generated and the resulting code slice would look much easier to learn
quickly:

```javascript
export {clone}

function clone(item) {
  return item
}
```

We've gone from `38` lines of code to `1` and the cyclomatic complexity from `1` to `1`. That's considerably more easy
to learn! But that's not everything that's important in this code. The original code is definitely important. So let's
add more use-cases and see how this slice is changed.

```javascript
import {clone} from 'clone'
clone()
clone('hi')
```

With that addition of `clone('hi')`, we'll get this difference:

```diff
export {clone}

function clone(item) {
+ if (!item) {
+   return item
+ }
+
  return item
}
```

That's pretty reasonable to learn in addition to what we've already learned about this code. Let's add more now:

```javascript
import {clone} from 'clone'
clone()
clone('hi')
clone({name: 'Luke'})
```

And here's what the slice looks like now:

```diff
export {clone}

function clone(item) {
  if (!item) {
    return item
  }
+  const type = typeof item
+
+  let result = item
+
+  if (!(type !== 'object' && type !== 'function')) {
+    result = {}
+    for (const i in item) {
+      result[i] = clone(item[i])
+    }
+  }

  return result
}
```

Let's do this one more time:

```javascript
import {clone} from 'clone'
clone('hello')
clone(null)
clone({name: 'Luke'})
clone({friends: [{name: 'Rebecca'}]})
```

And with that, we add yet another edge case.

```diff
export {clone}

function clone(item) {
  if (!item) {
    return item
  }
  const type = typeof item
+  const string = Object.prototype.toString.call(item)

  let result = item

  if (!(type !== 'object' && type !== 'function')) {
+    if (string === '[object Array]') {
+      result = []
+      item.forEach((child, index) => {
+        result[index] = clone(child)
+      })
+    } else {
      result = {}
      for (const i in item) {
        result[i] = clone(item[i])
      }
+    }
  }

  return result
}
```

The benefit of this approach is that we learn the code use-case-by-use-case. It's much easier to learn bit by bit like
this, and slice-js enables this.