JavaScript Fundamentals: Objects

What is an object? how do you create an object? and what's the difference between the different object creation methods

JavaScript Fundamentals: Objects
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.

💡
Want to check out my other stuff? See my link wall at Zipply.io.