Javascript Objects

JavaScript objects is a free and open programming language. It is intended for the development of web-based applications. Because it is lightweight and interpreted, it is significantly quicker than other programming Languages. Because JavaScript is interwoven with HTML, it is simpler to implement in online applications.

In this article, we will become acquainted with Objects implementation in a JavaScript web app. You’ll grasp what JavaScript objects are, how to access them, and how to manipulate them.

JavaScript is a very necessary Programming language to be learned by web developers. So, if you’ve ever considered that job route, you’ve almost certainly come across this terminology. That’s presumably why you’re here. So, without further ado, let’s get started right now!

Almost “everything” in Js is an object, excluding Primitives.

1. Regular expressions are always objects.
2. Maths are always objects.
3. Strings can be objects.
4. Objects are always objects.
5. Dates are always objects.
6. Arrays are always objects.
7. Booleans can be objects.
8. Functions are always objects.
9. Numbers can be objects.

Examples

How To Create Javascript Objects

A Js object can be created in one of three methods. Let’s go over each method:

1. To build and define a JavaScript object, we may utilize the object literal. An object can be constructed through this function, similarly to constructing a dictionary containing keys and corresponding values.

For example, age can be one of the keys, and its value will be 18.

<script>

      var student = {

        fullname: "Charlie Xavier",

        age: 18,

        branch: "Data Science",

      };

      document.getElementById("demo").innerHTML = student.fullname + " of the age " + student.age + " studies " + student.branch + ".";

    </script>

2. The new keyword can be used to construct and define Js objects. This approach is comparable to how objects in Java are formed. We may also easily add attributes to Js objects, as shown below.

<script>

      var student = new Object();

      student.name = "Charlie Xavier";

      student.age = 18;

      student.branch = "Data Science";

      document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.branch + ".";

    </script>

3. To initialize a Js object, we can utilize an object constructor. This technique is also known as object prototyping. The constructor accepts a few parameters, which we use to determine the values for each property of an object.

<script>

      function stud(name, age, branch) {

        this.name = name;

        this.age = age;

        this.branch = branch;

      }

      var student = stud("Charlie Xavier", 18, "Data Science");

      document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.branch + ".";

    </script>

Javascript Objects: Defining Method

In Js objects, we can define methods. However, before we define a method, we must add a property in the function using the same name as a method.

The following is an example of defining a method in an object.

<script>  
function emp(name,salary,id){  
this.name=name;  
this.salary=salary;  
this.id=id;  
  
this.changeSalary=changeSalary;  
function changeSalary(otherSalary){  
this.salary=otherSalary;  
}  
}  
e=new emp(203,"Charlie Xavier",60000);  
document.write(e.name+" "+e.salary+" "+e.id);  
e.changeSalary(75000);  
document.write("<br>"+e.name+" "+e.salary+" "+e.id);  
</script>  

Object Declaration in Javascript

Syntax

const object_name = {
   key1: value1,
   key2: value2
}

object name will be defined here. Every single object member is a key:value pair split by commas and surrounded by { }.

As an example,

// object creation
const person = { 
    name: 'Charles',
    age: 32
};
console.log(typeof person); // object

You may also declare an object in a single line.

const person = { name: 'Charles', age: 32 };

Accessing Object Properties

1. Dot Notation

Syntax

objectName.key

Example

const person = { 
    name: 'Charles', 
    age: 32, 
};

// accessing property
console.log(person.name); // Charles

2. Bracket Notation

Syntax

objectName["propertyName"]

Example

const person = { 
    name: 'Charles', 
    age: 32, 
};

// accessing property
console.log(person["name"]); // Charles

Javascript Nested Objects

An object can contain another. For example;

// nested object
const student = { 
    name: 'Charles', 
    age: 32,
    marks: {
        English: 65,
        computer: 80
    }
}

// accessing property of student object
console.log(student.marks); // {English: 65, computer: 80}

// accessing property of marks object
console.log(student.marks.english); // 65

Javascript Object Methods

• Object.assign()
• Object.create()
• Object.defineProperty()
• Object.defineProperties()
• Object.entries()
• Object.freeze()
• Object.getOwnPropertyDescriptor()
• Object.getOwnPropertyDescriptors()
• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.getPrototypeOf()
• Object.is()
• Object.isExtensible()
• Object.isFrozen()
• Object.isSealed()
• Object.keys()
• Object.preventExtensions()
• Object.seal()
• Object.setPrototypeOf()
• Object.values()