JavaScript Objects
A car has properties like weight and color, and methods like start and stop:
All cars have the same properties, but the property values differ from car to car.
All cars have the same methods, but the methods are performed at different times.
JavaScript Objects
You have already learned that JavaScript variables are containers for data values.
This code assigns a simple value (Fiat) to a variable named car:
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
The values are written as name:value pairs (name and value separated by a colon).
It is a common practice to declare objects with the const keyword.
Learn more about using const with objects in the chapter: JS Const.
Object Definition
You define (and create) a JavaScript object with an object literal:
Example
Spaces and line breaks are not important. An object definition can span multiple lines:
Example
Object Properties
The name:values pairs in JavaScript objects are called properties:
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Accessing Object Properties
You can access object properties in two ways:
Example1
Example2
JavaScript objects are containers for named values called properties.
Object Methods
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() |
A method is a function stored as a property.
Example
const person = <
firstName: «John»,
lastName : «Doe»,
id : 5566,
fullName : function() <
return this.firstName + » » + this.lastName;
>
>;
In the example above, this refers to the person object.
I.E. this.firstName means the firstName property of this.
I.E. this.firstName means the firstName property of person.
What is this?
In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used:
| In an object method, this refers to the object. |
| Alone, this refers to the global object. |
| In a function, this refers to the global object. |
| In a function, in strict mode, this is undefined . |
| In an event, this refers to the element that received the event. |
| Methods like call() , apply() , and bind() can refer this to any object. |
Note
See Also:
The this Keyword
In a function definition, this refers to the «owner» of the function.
In the example above, this is the person object that «owns» the fullName function.
In other words, this.firstName means the firstName property of this object.
Accessing Object Methods
You access an object method with the following syntax:
Example
If you access a method without the () parentheses, it will return the function definition:
Example
Do Not Declare Strings, Numbers, and Booleans as Objects!
When a JavaScript variable is declared with the keyword » new «, the variable is created as an object:
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Avoid String , Number , and Boolean objects. They complicate your code and slow down execution speed.
You will learn more about objects later in this tutorial.
Difference Between Methods and Functions in JavaScript
In JavaScript, functions and methods can easily be mixed and mistakenly considered the same. However, the reality is far from it. To summarize, a function is a block of code written to serve a particular purpose. Functions are not bound to any specific object.
On the other hand, methods are functions bound to an object. Let’s go over each one by one.
Functions in JavaScript
As mentioned above, a function is nothing but a block of code enclosed inside curly brackets and used to fulfill a specific role or perform a particular task. Working with a function generally consists of two parts, the first is the function definition, and the second is the function call.
In the function definition, a function is created with the function keyword, given a name and a block of code to perform a task like:
This above code snippet is to create a function which is named as greetUser(). The second part of working with function is the function call. The function call is essentially the line where we call the function using its name to perform the task written inside it:
This function call does not require any special keyword. An example of the function would be:
function greetUser ( ) {
console. log ( «Hello and Welcome to LinuxHint!» ) ;
}
Upon execution of this code snippet, you’ll get the following output onto the terminal:
The greeting was printed onto the terminal
Methods in JavaScript
Methods are functions, they are written to uptake a specific purpose, and they also have two parts which include the function definition and the function call (called method definition and method call). However, methods are defined inside an Object, which differentiates them from normal functions. Take the following lines to showcase the method definition:
var siteBot = {
greetUser : function ( ) {
console. log ( «Hello and Welcome to LinuxHint!» ) ;
} ,
} ;
In this code snippet, there is an object named as siteBot which contains an attribute greetUser which is set to a function() with some tasks inside it. Now, this greetUser is called a method of the siteBot object.
To call a method, the call must use a dot operator with their object’s name, and then at the end, you place the parenthesis like
The complete code snippet is as:
var siteBot = {
greetUser : function ( ) {
console. log ( «Hello and Welcome to LinuxHint!» ) ;
} ,
} ;
Upon executing the code snippet mentioned above, the following output is displayed on the terminal:
As you can see, siteBot object printed the greetings on the terminal. Now, try to call this greetUser() method like you would call a normal function using the dot operator or the object’s name:
You will get the following output in the terminal:
From this output, it is clear that you cannot call methods like you would call a normal function.
Conclusion
Functions and methods are quite different in their working because functions are not bound by any object, whereas methods are bound by the object in which they are defined. Methods are essentially functions bounded to a specific object. Function calls require no special keyword or operator, whereas method calls require the object’s name and the dot operator. Both of them are written to perform a particular purpose.
About the author
Abdul Mannan
I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor’s degree in computer science.
👯♂️ Difference between functions and methods in JavaScript
When you start learning functions and methods in JavaScript you might use these words as if it’s the same because they might sound and look similar sometimes however functions and methods are different things. I will try to explain in a very simple way the difference between functions and methods in JavaScript.
Definition
A function is a block of code that is written to perform specific tasks. A method is a property of an object and contains a function definition. In other words, a method is also a function but stored as an object property.
Syntax
A function is defined by using a keyword function followed by a name we come up with. The body is enclosed in curly braces. 
A method is located inside objects and we access it by accessing the object first and then the method. There are types of methods that already exist in JavaScript, for example, strings or arrays already have built-in methods. Though you can create them yourself as well. 
Existence
A function can exist on its own and does not have to be attached to anyone. However, at the same time, it actually is attached to something and that is a global object. In any case, it’s still considered a function. A method needs to be attached to objects and needs to be someone’s property with a function value. It cannot exist on its own.
Calling
To call a function you can use various ways and one of them can be calling the function with its name or it can even call itself(self-invoking function). 
To call a method you need to use the object name first and separate it from a method name with a dot. 
To summarize, in JavaScript, a function is a block of code that can be defined and then invoked, while a method is a function that is associated with an object. The key difference between the two is that a method has access to the properties and methods of the object it is associated with, while a function does not. Understanding the difference between functions and methods is important because it allows developers to use the appropriate tool for the job, and can help improve code organization and readability. Additionally, understanding the difference can also help prevent common programming errors, such as attempting to use a method as a function or vice versa. 📌 Enjoyed the post? Please let me know in the comment down below!