Mastering Hard Parts of JavaScript: Prototype & Class I

How come JavaScript is not Object Oriented but everything in JavaScript is an Object?

You've probably heard that in JavaScript, "everything is an object". This is actually incorrect (primitive types such as String or undefined are not objects), but a lot of things, i.e., everything other than primitive types is an object, for example functions, arrays or data structures such as Set or Map. JavaScript is a strongly Object Oriented language, yet many people coming to it from other languages such as Python or Java find JavaScript's OO design baffling. Why is that? It's because JavaScript was traditionally a prototypal, classless Object Oriented language.

Prototypal and class-based object oriented languages both implement OOP principles but in strikingly different ways. Each have their own pros and cons and neither is inherently superior to the other. However if you come from a background in Java or Python or C#, spending some time to coming to grips with JavaScript's prototypal structure will pay huge dividends.

In recent times (ES6), a class keyword was added to JavaScript that closely mimics the class-based OOP of other languages. But class is simply syntactic sugar in JS, and under the hood it still implements OOP using prototypal concepts. Even if you prefer using the class structure, understanding JS's prototypes is required to be able to properly debug your code or understand how it works.

In the first part of this section, we'll solve our exercises using object literals, which is the original/old-fashioned way of implementing OOP in JS. Next we'll use the Object.create() method that was added to ES5. In the third section we'll see how the use of the new keyword simplifies object creation (but doesn't fundamentally change anything). Finally we'll see the class structure that was introduced in ES6.

Just to clarify, the heading of this section was written in jest. JavaScript is an Object Oriented language, and not everything in JavaScript is an object.

Using Object Literals

Exercise 1

Create a function that accepts two inputs (name and age) and returns an object. Let's call this function makePerson. This function will:

• create an empty object
• add a name property to the newly created object with its value being the 'name' argument passed into the function
• add an age property to the newly created object with its value being the 'age' argument passed into the function return the object.

function makePerson(name, age) {
  //add code here
}

const vicky = makePerson("Vicky", 24);
console.log(vicky.name);
// -> Logs 'Vicky'
console.log(vicky.age);
// -> Logs 24

Solution 1

function makePerson(name, age) {
  const person = {};
  person.name = name;
  person.age = age;
  return person;
}

Creating an object the "old fashioned" way using a function. No one uses this pattern anymore, but everything that comes later (such as Object.create() or new) is still doing this in the background, so it's important to spend some time to study how this function works.