Learning Web Development at 60: Object-Oriented Programming and ES6
By: Jeffrey Amen
Tags: Beginning Code, Baby Boomers, JavaScript, Object Oriented, ES6

I was feeling pretty good about my progress learning JavaScript as I completed the last few coding projects in the Web Development 101 course with the Odin Project. I could navigate through basic JavaScript; loops, arrays, functions, and even had a basic understanding of what an object is. I could work with the Document Object Model (DOM) to manipulate HTML and CSS elements reasonably well. While I am far from an expert, I am beginning to see some results of my efforts, and I felt I was ready to move onto learning advanced JavaScript.

Advanced JavaScript — Trials and Tribulations

I proceeded to start the Advanced JavaScript section of the Complete JavaScript Course by Jonas Schmedtmann. The curriculum includes Object-Oriented Programming (OOP) and ES6 or ES2015 JavaScript. I had learned what an object is earlier in the course, but I didn’t know how to use objects in programming. ES6 is a newer version of JavaScript which introduced new syntax.

Advanced JavaScript Curriculum

Object Inheritance and Prototype Chain

Function Constructors

Object.create

Primitives vs. Objects

First Class functions

Passing functions as an argument

Functions returning functions

Immediately Invoked function Expressions (IIFE)

Closures

Bind, call, and apply

After the first time through object-oriented JavaScript, my progress came to a complete halt. I still had no idea how to use objects. The coding challenge at the end of this section looked impossible. Even after going through the lessons a second time, I didn’t have a good grasp of the concepts. I had enjoyed Jonas’ course up to now, however, I needed to look at other resources to learn this.

Object-Oriented Programming

Object-oriented Programming seemed so different than the basic JavaScript I had just learned. Objects are a collection of various items; variables, arrays, Booleans, functions. It is cliche to say, “Everything is an object”. Yet it appears to be true. How to use objects in programming; creating and using objects to accomplish a task? I first looked at the tutorials on the W3 Schools website. I found these very well suited for a beginner as they explained things in plain English. I started by learning how to make an object.

Declaring an Object

Using an object literal is the simplest way of declaring an object. So far, so good.

var person = { name : “name”, yearOfBirth: “year” };

I found JavaScript: Understanding the Weird Parts by Tony Alicia on Udemy. Several learning JavaScript websites highly recommended this course. Browsing through it, I found it covered exactly the elements I was struggling with.

Tony Alicia’s course is an older course, last updated in 2016, and no longer supported by the instructor, which was too bad. I found Tony to be possibly the best programming instructor I have ever known. His deliberate manner of teaching had a calmness and clarity to it. He focused on explaining how JavaScript worked “under the hood.” Inheritance, the scope chain, and prototyping were explained in detail. I spent a month going through this course and gained a much better understanding of these concepts.

I followed it up with a short YouTube video by Brad Traversy, Crash Course in Object-Oriented Programming. Traversy has a no-nonsense, pragmatic teaching style. He presented more up-to-date information on object-oriented JavaScript including ES6. To be fair, Jonas Schmedtmann also has a very complete presentation of ES6 in his course. Now to move on to the concepts of constructor functions and inheritance.

The Function Constructor and Inheritance

A function constructor is a function that makes new objects. These new objects inherit the properties of the constructor.

A minor hang-up is the capitalization of the first letter in the function name. After learning from the beginning to use lower case letters when declaring variables, it becomes counter-intuitive to suddenly have to remember to do this.

Here’s a basic function constructor:

var Person = function(name, yearOfBirth){ this.name = name; this.yearOfBirth = yearOfBirth; }

Object Inheritance: creating a new object with properties inherited from the constructor object.

Var joe = new Person (‘joe’, 1990);

The new object named “joe” inherits the name and year of birth properties from the Person method.

This is redundant nomenclature; methods are essentially the same thing as functions and both are considered objects.

Okay, I get it. But then I discover there is more than one way to do this. Turns out, several ways to make an object exist in JavaScript.

Create.object Method: What the…? This does the same thing.

var joe = object.create(personProto),{ Name: {value: ‘joe’}, yearOfBirth: {value: 1990} };

Back to the function constructor, methods can also be added to the object.

var Person = function(name, yearOfBirth){ this.name = name; this.yearOfBirth = yearOfBirth; this.calculateAge() = function() { Var age = Date.getFullYear() - this.yearOfBirth; }}

But there is another way of adding a method. The prototype method is used to produce a function (method) with inherited properties. This keeps the function out of the constructor function but allows it to inherit its properties.

The Prototype Method

Person.prototype.calculateAge = function(){ var age = Date.getFullYear() - this.yearOfBirth; }

When I got to learning ES6, I found yet another way to make objects, using classes.

ES6 Classes

class Person { constructor( name, yearOfBirth) { this.name= name; this.yearOfBirth= yearOfBirth; }} let joe = new Person(“joe”, 1990);

Wow, counting the object literal that makes four ways of doing essentially the same thing. My first thought was, “Why do I have to learn all these different syntaxes?” They only differ slightly but to a beginner learning coding, this is aggravating. As it turns out, it doesn’t matter. What really matters is understanding inheritance and prototyping.

Syntactic Sugar and Object-Oriented JavaScript

Both Traversy and Alicia mentioned the term, syntactic sugar, defining it as a different syntax that does the same thing. Both implied there is no programming advantage gained by using one or the other. Both instructors emphasized learning the concept of prototyping and inheritance and recommended doing this before using JavaScript ES6 classes.

This certainly was the case for me. Once I had a better understanding of prototyping and inheritance, I could see that all the ways of making an object were just different ways of doing the same thing and much less confusing. Conceptual understanding made the difference.

So how can object-oriented programming be used in applications?

I’m just beginning to understand how applications can use objects. I’ve only done two programs using object-oriented JavaScript, but observe that it mainly avoids duplication of effort, allowing you to group properties, and store and retrieve data efficiently. This should make it easier to work with a larger number of objects or data. Constructors make it easy to make many objects with similar properties. The multiple ways to make objects can confuse a beginner. I think as I get more experience in programming and work on larger projects, I will become more comfortable using them.

If you have any suggestions or insights on learning object-oriented JavaScript, please add a comment below.

View my study notes as I work through JavaScript 30 by Wes Bos, 30 projects in 30 days.