JavaScript - Lesson 4

This lesson will go over objects, classes, and arrow functions.

Objects

Objects are structures that hold various properties which can be accessed and used. There are many ways to use objects. These are the basics.

You can instantiate, or create, objects using the new keyword or by using an object initializer.

new keyword syntax:

        let myObject = new Object();
        myObject.key1 = 1;
        myObject.key2 = "2";
        myObject.key3 = false;

Object initializer:

        let myObject = {
        	key1: 1,
        	key2: "2",
        	key3: false
        };

Both these techniques have the same effect. As you can see, each property of an object has a key associated with a value. The key is basically just a variable, and you can access it using dot notation like this objectName.propertyName. You can also declare new properties like in the first example by just saying objectName.newPropertyName = [value], and you can reassign existing property names in the same way as well. Properties can store any data type, even arrays and functions.

A good way to get a more intuitive understanding of Objects is to compare them to real-life objects.. Real world physical objects also have names and properties, and those traits can be expressed in an object. For example: 

        let cat = {
            name: "Mittens",
            furColorRBG: [148, 112, 91],
            sound: () => { alert("meow"); },
        };

This object is a cat. The cat has a name, a fur color, and a sound associated with it. The sound property is just a regular arrow function (discussed later) with no parameters, indicated by the empty parentheses. We can run the sound function by calling it with regular function call notation: cat.sound(). The alert function creates a pop-up alert in the browser.

Something you should know is that you can do some basic coding in the console itself. You can do anything you can do in regular JS, like creating variables and running functions. Try entering cat.sound(); into the console. You should see an alert.

Note: I used the Live Server extension to open the html file, but you can open it in the browser any way you want.

This is only a light overview of objects. I recommend further reading on them.

Classes

Sometimes you want to make multiple of the same type of object. You can do this by defining a class, which you can think of as a blueprint for creating objects. You can define a class using the class keyword. Classes require a constructor function which set the values of its properties when an object is instantiated, or created. The creation of an object is called instantiatiation because an object is known as an instance of a class. Let's say we want to make a Cat class to create multiple cats easily. Here is how you could do that: 

        class Cat {
            constructor(name, furColor, sound) {
                this.name = name;
                this.furColorRBG = furColor;
                this.sound = sound;
            }
        }

The constructor function can take input parameters and set them as the properties of a new object using the this keyword. What the this keyword references changes based on where it is used, but here you can think of this as referring to the new object that will be created from the class. Here is how we instantiate a new cat with the new keyword: 

        let myCat = new Cat("Mittens", [148, 112, 91], () => { alert("meow"); });

This creates the same cat as in the object example. We could also create a different cat: 

        let myCat2 = new Cat("John", [0, 0, 0], () => { alert("meow"); });

This cat is named John and has black fur.

You can also make a default values for parameters just like in function definitions. Here is an example where the third parameter is set to the sound function if no third parameter is used during instantiatiation: 

        class Cat {
            constructor(name, furColor, sound = () => { alert("meow"); }) {
                this.name = name;
                this.furColorRBG = furColor;
                this.sound = sound;
            }
        }

Now let myCat = new Cat("Mittens", [148, 112, 91]); is the same as the first example.

Arrow Functions

Perhaps one of the most convenient additions to JavaScript are arrow functions. Arrow functions basically provide a less wordy syntax for expressing functions. Here is the basic syntax: 

        ([parameters]) => {[code]}
                            
OR

        ([parameters]) => [expression of code] // returns the expression

Basically, you can remove the function keyword, shortening the function. The second example does not need a return statement, but a multi-line function between curly braces would. If there is only one parameter, you can neglect the parentheses as well:

parameter => statement

There are other differences between regular functions and arrow functions, which you may want to research. Generally, arrow functions are not used in class definitions and are not used when declaring a function that you want to reuse with the variable.functionName() syntax.

This concludes our basic overview of JavaScript. There are many more important and useful aspects of JS that we have not explored yet, of course. Some to look into would be the rest syntax, destructuring, the many uses of arrow functions, and the many common methods used in actual JS development.

< Previous Next >