AppDividend
Latest Code Tutorials

Javascript Objects Tutorial Example | Working With Objects in JS

0

Javascript Objects Tutorial Example | Working With Objects in JS is today’s topic. JavaScript is designed on the simple object-based paradigm. An object is the collection of properties, and property is an association between a key and a value. In JavaScript, the object is a standalone entity, with properties and type. Objects in JavaScript, just as in many other programming languages, can be compared to objects in the real life. A JavaScript object has properties associated with it. A property of the object can be explained as a variable that is attached to the object. Object properties are the same as ordinary JavaScript variables, except for the attachment to objects.

Javascript Objects Tutorial Example

Objects are composed of attributes. If the attribute contains the function, it is considered to be the method of the object. Otherwise, the attribute is regarded as a property.

The properties of an object are define the characteristics of the object. You access the properties of an object with the simple dot-notation like the following.

objectName.propertyName

Like all JavaScript variables, both the object name (which could be the regular variable) and property name are case sensitive. You can define the property by assigning it a value.

Let’s take an example of Javascript Object.

// app.js

let GoT = new Object()
GoT.character = 'Tyrion Lannister'
GoT.producer = 'Dan weiss'
GoT.broadcaster = 'HBO'

console.log(GoT)

In the first line, we have created the object called GoT then we have assigned the properties to the object.

Now, in the above code, character, producer, and broadcaster are the properties of the GoT object. The output of the code is following.

 

Javascript Objects Tutorial Example

You can also get the property value one by one using the dot notation like following.

// app.js

let GoT = new Object()
GoT.character = 'Tyrion Lannister'
GoT.producer = 'Dan weiss'
GoT.broadcaster = 'HBO'

console.log(GoT.character)
console.log(GoT.producer)
console.log(GoT.broadcaster)

The output is following.

 

Working With Objects in JS

If we try to get the property which is not there in the first place, then we get undefined in return. See the below example.

// app.js

let GoT = new Object()
GoT.character = 'Tyrion Lannister'
GoT.producer = 'Dan weiss'
GoT.broadcaster = 'HBO'

console.log(GoT.littlefinger)

Here, littlefinger is not attached to the GoT object; that is why the output is undefined.

 

Javascript Objects Tutorial

Properties of the JavaScript objects can also be accessed or set using bracket notation. See the following example.

// app.js

let GoT = new Object()
GoT.character = 'Tyrion Lannister'
GoT.producer = 'Dan weiss'
GoT.broadcaster = 'HBO'

console.log(GoT['character'])
console.log(GoT['producer'])
console.log(GoT['broadcaster'])

In the code, we have accessed the properties using bracket notation. The output is following.

 

Objects in JS

Objects are sometimes called an associative array since each property is associated with the string value that can be used to access it.

Object Methods in Javascript

We can also define a method as property and access the method name as a property key.

Let’s see the following example.

let Student = {
  firstName: 'Krunal',
  lastName: 'Lathiya',
  fullName: function () {
    return this.firstName +' '+ this.lastName
  }
}

console.log(Student.fullName())

 

Object Methods in Javascript

We can also use a for…in loop to iterate over all the enumerable properties of an object.

Creating new objects

JavaScript has some predefined objects. Also, you can create your objects. You can create an object using an object initializer. Using the object initializers is sometimes referred to as creating objects with literal notation. Let’s see the following example.

// app.js

let Student = {
  firstName: 'Krunal',
  lastName: 'Lathiya'
}

console.log(Student.firstName,'',Student.lastName)

The output of the above code is the following.

 

Creating new objects

Create an object using a constructor function

You can create the object with these two steps.

  1. Define the object type by writing the constructor function. There is a strong convention, with a good reason, to use an initial capital letter.
  2. Create an instance of the object with a new keyword.

If we can define an object type, create the function for the object type that specifies its name, properties, and methods. Let’s see the following example.

// app.js

function Student(name, branch, enrollmentno) {
  this.name = name
  this.branch = branch
  this.enrollmentno = enrollmentno
}

let s1 = new Student('Krunal', 'IT', 110470116021)

console.log(s1.name, s1.branch, s1.enrollmentno)

The output is following.

 

Create an object using a constructor function

Defining methods

A method is the function associated with an object, or, simply put, a method is the property of an object that is a function. Methods are defined as a way normal functions are defined, except that they have to be assigned as the property of an object. See the following example.

// app.js

let apps = {
  name: 'Facebook',
  getApp: function () {
    return this.name
  }
}

console.log(apps.getApp())

See the following example.

 

Defining methods

Finally, Javascript Objects Tutorial Example | Working With Objects in JS is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.