This practical course explores JavaScript Object Methods. A method is a function that is attached to an object property.
Learning Objectives
- Learn how to create an object method
- Learn about the concept of this, and how does this relate to objects.
- Learn what happens when an arrow function is used as an object method
Intended Audience
This course is intended for anyone who wants to learn about JavaScript Object Methods.
Prerequisites
Anyone with an interest in creating object methods in JavaScript or who wants to improve their knowledge of JavaScript in general.
Introduction to JavaScript object methods. An object method is a function bound to a specific object property to perform a task. On the screen, I have a user object with a userName and email property. I'm going to create an object method that displays this information to the console. I will begin with a property name, userInfo. The value of userInfo will be an anonymous function. Inside of the function, I will console.log this.userName, this.email.
Before going further, what is this? This has different meanings depending on execution context. For example, the Windows object when working with a browser. In this case, this references the object where the function resides. This.userName refers to the current userName value inside of this object.
Now, below the object, I will type user.userInfo, and because this is a function that I wish to execute, I need to add parentheses. I will execute this and on the right, there is the userName and email. Now, one caveat about creating object methods. You should not use an arrow function to create one. I will demonstrate why. I'm gonna convert this function to an arrow function. I will execute the method again and in the console, there are two undefined values.
Arrow functions are lexically scoped. When the object method is executed, the arrow function queries the window object for the this keyword. userName and email are not window object properties, returning undefined. In a JavaScript runtime environment, like Node.js, this refers to the global context because the browser window doesn't exist. As a general rule, do not use arrow functions for object methods. And that's it. Thanks for watching at Cloud Academy.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.