Object Oriented Programming

Classes

Believe it or not, JavaScript has a class system (sort of). This is actually just syntactic sugar that makes the prototype system a little easier to work with. Let's take a look at that syntax.

class Square extends Shape {
  constructor(length, width) {
    super()

    this.length = length
    this.width = width
  }

  getArea() {
    return this.length * this.width
  }
}

Functions

We want to keep our code organized inside the class we're using by keeping all of our functionality in functions and methods. You should avoid having lines of JS that perform some functionality in your code outside of a function declaration. This keeps things organized, informs you what the code is supposed to be doing, and maintains testability. Your future self and other developers will thank you for using functions to execute behavior in JS.

Unorganized code

So we can take something that looks like this...

const myHeading = document.querySelector("h1")
myHeading.style.backgroundColor = "blue"
myHeading.style.color = "white"
myHeading.style.padding = "1em"

And organize it more using the tactics we've been exploring

const Dom = new Dom();

class Dom{
    updateBackgroundColor(element, color){
          element.style.backgroundColor = color
      return element
    }
    updateColor(element, color) {
      element.style.color = color
      return element
    }
    updatePadding(element, space) {
      element.style.padding = space
      return element
    }
}

const myHeading = document.querySelector("h1");
Dom.updateBackgroundColor(myHeading, "blue");
Dom.updateColor(myHeading, "white");
Dom.updatePadding(myHeading, "1em");

Testing

What's nice about having your code organized like this is that it makes TDD in JS a lot easier since it helps you to think about your functionality in in terms of methods instead of just random lines of code.

Functional Programming

Simplifying JS

We now come to the second pillar of JS, Functional Programming (FP). FP in JS allows us to write fewer lines of more expressive code. So OOP and FP don't compete with each other, they in fact compliment each other. We want to create objects to organize our code in ways that make our libraries extensible. We want to keep the JS code we write as concise as possible both to save on memory and to keep it readable for other devs (including our future selves).

Let's look into elements of FP

High Level Functions

Higher level functions (HLFs) are a great example of functional programming inside of JS. Since functions are first class citizens, we can pass them to other functions

function reverse(array, fn) {
  const newArray = array
  return fn(newArray.reverse())
}

function log(message) {
  console.log(message)
}

reverse([1, 2, 3, 4, 5], log) // prints [5, 4, 3, 2, 1]

Currying

Currying allows us to break up functionality into multiple functions that have less behavior

// Without Currying
function makeElement(elementType, elementContent) {
  const element = document.createElement(elementType)
  element.innerHTML = elementContent
}

// With Currying
const makeCurriedElement = elementType => elementContent => {
  const element = document.createElement(elementType)
  element.innerHTML = elementContent
}

const makeArticle = makeCurriedElement("article")

console.log(makeElement("article", "<h2>Here's my article</h2>"))
console.log(makeArticle("<h2>Here's my more easily read article</h2>"))

forEach

We've seen forEach in action. This is a really great way to iterate over a collection of objects.

const ninjaTurtles = [
  { name: "Leonardo", color: "blue" },
  { name: "Michelangelo", color: "Orange" },
  { name: "Raphael", color: "Red" },
  { name: "Donatello", color: "Purple" },
]

ninjaTurtles.forEach(turtle =>
  console.log(`${turtle.name}'s color is ${turtle.color}`)
)

There are plenty of other Array methods to use.

Conclusion

OOP and FP are HUGE programming practices that are essential to writing good JS. Using these practices while writing JS is truly what separates good devs from the truly great. Make sure to adopt these two pillars into your JS.

Resources

• 🔥🔥🔥🔥🔥Functional Light JS
• Object-oriented JavaScript for Beginners
• JavaScript: Prototype vs. Class