JavaScript Fundamentals: Objects
JavaScript is an object-oriented programming language. An object is a collection of variables and functions that are related to one another.
An object is a data type that stores a collection of data in a structured way. For example, you could create an object to store information about a person, like their name, age, address, etc. A function can be a property of an object, which can be used to perform actions on the data.
There are many different uses for objects in JavaScript. Some examples include:
- storing data (e.g. user information, settings, etc.)
- organizing code (e.g. grouping related functions together)
- creating new types (e.g. custom data types)
- implementing functionality from other languages (e.g. inheritance)
Key features of an object in JavaScript
- An object is a collection of properties
- A property is an association between a name (or key) and a value.
- A property's value can be a function, in which case the property is known as a method.
- In addition to objects that are predefined in the browser, you can define your own objects.
How to use an object in JavaScript
In order to use an object, you must first create it. This can be done using the Object()
constructor or the object literal syntax.
Once the object is created, you can add properties and methods to it. To add a property, you simply assign a value to it. To add a method, you assign a function to it.
Here is an example of creating an object and adding properties and methods to it:
var obj = {};
// create an empty
object obj.prop1 = "value1";
// add a property
obj.prop2 = "value2";
// add another property
obj.method1 = function() {
// add a method
// code goes here
};
obj.method2 = function() {
// add another method
// code goes here
};
What is an object literal?
Object literals are a way of representing data within JavaScript. They are denoted by curly braces and contain keys and values. The keys are used to identify the values, which can be of any data type including arrays and objects.
For example:
var myObject = {
key1: "value1",
key2: "value2",
key3: "value3"
};
You can also create an object by using an object literal:
var myObject = {
property1: "Hello",
property2: "Goodbye",
myFunction: function() {
alert("I am a function");
}
}
Using new
keyword to create an object
You can also create an object by using the keyword new
:
var myObject = new Object();
myObject.property1 = "Hello";
myObject.property2 = "Goodbye";
function myObject.myFunction() {
alert("I am a function");
}
Is creating an object literal the same as using new
keyword in JavaScript?
The quick answer is no. Creating an object literal is not the same as using the new
keyword in JavaScript.
The new keyword in JavaScript creates a new object.
The new object inherits from the constructor's prototype. The constructor function is called with the new
keyword.
If you create an object without using the new
keyword, the object will not have a constructor property. The constructor property is a reference to the function that created the object.
An object with a constructor is an object that has been created using a specific process or blueprint. This process is known as initialization. An object without a constructor is an object that has not been created using a specific process or blueprint.
The new
keyword creates an instance of a constructor function, which initializes the new object.
For example, to create an object with the new
keyword, you could do this:
var obj = new Object();
To create an object without using the new keyword, you would have to do this:
var obj = {};
How to access an object's properties and methods
You can access the properties and methods of an object using the dot notation or the square bracket notation. The dot notation is simpler and more commonly used. The square bracket notation is more powerful but can be harder to read.
Object dot notation syntax
You can access an object's properties and methods by using the dot notation:
myObject.property1; // "Hello"
myObject.property2; // "Goodbye"
myObject.myFunction(); // alerts "I am a function"
Object square bracket syntax
You can also access an object's properties and methods by using the square bracket notation:
myObject["property1"]; // "Hello"
myObject["property2"]; // "Goodbye"
myObject["myFunction"](); // alerts "I am a function"
The square bracket notation is useful when you want to access an object's properties or methods using a variable:
var propertyName = "property1";
myObject[propertyName]; // "Hello"
var methodName = "myFunction";
myObject[methodName](); // alerts "I am a function"
Creating an object using Object.create()
Inheritance is one of the key features of object-oriented programming. It is a mechanism by which one object can acquire the properties of another object.
The JavaScript object model is based on prototypes. Objects can inherit properties from other objects. The Object.create()
method is used to create a new object with the specified prototype object and properties.
Here is an example of using Object.create()
:
var myObject = Object.create({
property1: "Hello",
property2: "Goodbye",
myFunction: function() {
alert("I am a function");
}
});
The Object.create()
method is useful for creating an object that inherits from another object:
var myParentObject = {
property1: "Hello",
property2: "Goodbye"
}
var myObject = Object.create(myParentObject, {
myFunction: {
value: function() {
alert("I am a function");
}
}
});
myObject.property1; // "Hello"
myObject.property2; // "Goodbye"
myObject.myFunction(); // alerts "I am a function"
The difference between creating an object and using the new
keyword is that the new
keyword will create a new object and set the prototype of that object to the constructor function. The Object.create()
method will create a new object with the prototype set to the object that is passed in as the first argument.