JAVASCRIPT CLASSES CONFUSED ME

Zainab Jalloh
4 min readSep 7, 2021

--

IT STARTS WITH JAVA CLASSES AND OBJECTS

When I started to study programming, the first language I learned was Java. Java is a programming language distributed by the Linux based distro, Oracle Corporation. Java is a high-level, class-based, object-oriented programming language. All of that simply means, java is a programming language that;

  1. is independent of the operating system running the java program;
  2. uses classes as “templates” or “blueprints” to create objects, and inheritance happens on classes of objects instead of the objects directly; and
  3. treats everything like an object, and those objects generally contains data and functions that act on the data.
java classes vs java objects

To summarize the tables above, in java, a class is a grouping of similar things or a “blueprint” or “template” from which an object or many objects can be created. A java class often describes the “properties” or “behaviors” or “state” of a thing. An object, is an instance of a class and it has defined properties, state and behavior.

NOW JAVASCRIPT ‘CLASSES’ AND OBJECTS

If you know, Javascript is a high-level, object-oriented programming language that is, lightweight and prototype-based. This means,

  1. javascript has little memory footprint because it uses limited amounts of hardware and software resources; and
  2. everything except for primitive types and undefined is an object in javascript, and inheritance happens on the object level. Objects inherit their properties from other objects.

CLASSES ARE OBJECTS IN JAVASCRIPT

That’s right. Javascript does not have ‘class’. Instead, javascript has ’special’ functions that behave the way classes in statically typed languages like java do. These special functions are used to create objects. The ‘class’ keyword in javascript is used to help identify the purpose of the function.

SO, WHAT IS AN OBJECT IN JAVASCRIPT?

An object is a data type in javascript. Other data types like the primitives — number, string, boolean, null, undefined and symbol — store one value each depending on their types. The object data type is used to store various key-value pairs, including functions. A value stored by an object is called a property, when the property (or value) is a function, it is called a method. These properties define the characteristic of the object.

javascript objects, properties, methods and object literals

Now we know in javascript, classes are special functions used to create objects and objects are data types. An object’s properties cannot be changed outside of the object, they live within the scope of the object. However, the values of those properties can be changed outside of the object because they are simply referenced by the property. For example, we cannot change the property, firstName, of the person object above outside of the object. We can change the value, Jeorge, to Amanda outside of the person object. Let’s explore this below.

changing javascript properties and property values

THIS IS CONFUSING

The this keyword points/refers to an object depending on the content of the executed code. In the constructor function above, this is pointing to the parameters passed in the function. So, this.firstName is pointing to the firstName property passed as a parameter in the constructor.

When we use the new keyword to create a new object, this points to the new object and the parameters/values passed in the new object. So, The new keyword is used to construct two new person objects, Jeorge and Amanda, and this points to the values/parameters passed therein. This is one way we can change the value of objects outside of their objects.

LET’S QUICKLY EXAMINE FUNCTIONS IN JAVASCRIPT?

Before we explore, how to define classes and objects in javascript, it is important to note, javascript functions provide a mechanism for encapsulating (grouping together) blocks of code for reuse. A javascript function usually takes in an input and returns an output. Every function in javascript is a Function object. Like any other object, they can have properties and methods, be stored in variables, arrays or passed as arguments to other functions. However, unlike other objects, functions can be called.

A function is defined using the (1) function keyword, (2) followed by the name of the function, (3) then parentheses ( ) that may pass parameters or may be empty, and finally (4) curly brackets { }, that include the logic for the function.

javascript function syntax

CREATING ‘CLASSES’ AND OBJECTS IN JAVASCRIPT WITH FUNCTIONS?

In javascript, there are many ways to declare or express a function, some of these ways, includes the use of the “class” keyword.

Creating javascript functions with function declaration, function expression and the constructor function
Special functions, function shorthand and the new function

Recall, in javascript, classes are special functions used for creating objects. The class keyword has two syntactical formats, class expression and class declaration. However, unlike function expressions and declarations, classes do not get hoisted. A class needs to be declared before it is accessed.

class is a special function in javascript

--

--