Learn JavaScript in Construct, part 8: object methods

25

Index

Tagged

Features on these Courses

Stats

6,734 visits, 14,863 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 5 Nov, 2021. Last updated 16 Dec, 2021

Classes

Classes are a common feature of many object-oriented programming languages, and JavaScript offers them too. Classes have a wide range of sophisticated features. However we will just cover the basics here, demonstrating how to write the previous example with class syntax.

The previous Person object can be declared as a class like this:

class Person {
	constructor(name, age, preferredFood)
	{
		this.name = name;
		this.age = age;
		this.preferredFood = preferredFood;
	}
}

// Create a person
let person = new Person("Joe", 25, "pizza");

// Show the object in the console
console.log("person: ", person);

Notice how it compares to the previous example:

  • Now we use the class keyword, followed by the name, and braces { and }, inside of which is the contents of the class.
  • Inside the class is now a function named constructor, which is a special function name in JavaScript. This performs the same job as the Person function in the previous example: it is called when using new Person, adding properties to a new empty object.
  • Note the functions inside the class use the shorthand style syntax for methods.

Now we can add a logName function to the class, again using the shorthand style syntax:

class Person {
	constructor(name, age, preferredFood)
	{
		this.name = name;
		this.age = age;
		this.preferredFood = preferredFood;
	}
	
	logName()
	{
		console.log(`The person's name is ${this.name}`);
	}
}

// Create a person
let person = new Person("Joe", 25, "pizza");

// Call logName()
person.logName();

This works similarly to the previous example, but classes share their class methods between all created objects. In other words, the same single logName function will be re-used for all created Person objects. This solves the problem with the previous approach where a function was re-created for every object. It also uses a more convenient syntax than the alternative with prototypes (which we didn't cover).

Classes have many more features. However we won't go in to any more detail on them here. If you want to dig deeper in to them, take a look at Classes on MDN. However in order to focus this guide on quickly learning the basics of JavaScript, we'll move on. For now, we've just shown that if you want to create lots of objects with the same properties, the best way to do that is with class syntax. It works similarly to using new with a function, but classes are preferable and are how most modern JavaScript is written.

Conclusion

In this part we've covered;

  • Using functions in object properties, also known as methods
  • The shorthand syntax for methods (also used in classes)
  • How this refers to the object the method was called on
  • How arrow functions handle this differently, in a way that is often useful
  • Adding a "click" event handler that runs a function whenever something happens
  • Using new with a function to create an object with certain properties
  • class syntax as a better alternative for use with new

That's all we need to cover regarding objects and functions for now, which together have been covered by the past four parts of this guide. However it's well worth the time to get familiar with them, as objects, functions and methods are fundamental parts of programming. It's hard to get anything serious done without them! In the next part we'll move on to some other data structures that are useful for programming, such as arrays.

Learn more

If you want to dig deeper, you can learn more about the features mentioned in this guide at the following MDN Web Docs links:

Part 9

When you're ready to continue, head on to the next part at Learn JavaScript in Construct, part 9: Data structures!

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!