6. Object and Array in Javascript

 Object in Javascript

- An object in JavaScript is an entity or any real-world thing that has a state and behavior.

- Here, the state represents properties (characteristics) of an object and behavior represents actions or functionality of an object.

- For example, a person is an object. He has properties like black hair, black eyes, fair skin, weight, etc., and actions like eat, sleep, walk, play, study, etc.

Object Creation in JavaScript

- JavaScript is template based, not class based. Here, we don’t create class to get the object. But, we direct create objects.

1. By object literal

2. By creating an instance of Object directly (using new keyword)

3. Using an object constructor (using new keyword)

1. By object literal

- The simplest and the most popular way to create an object in JavaScript is to use object literal.

- we create objects with curly braces and  separate properties and values  by using colon (:).

Ex :

 var objectName = {

    propertyName1:value1,

    propertyName2:value2,

    .

    .

    functionName1: function() {

        // code for function

    },

 };

2. By creating an instance of Object directly (using new keyword)

- We can create an object directly by using a combination of a new keyword and Object() constructor function.

- The new keyword and object constructor create a blank object in which we can then add properties and methods to the object using dot notation.

- Each statement that adds property and method to any object must end with a semicolon. 

- The general syntax to create an object in JavaScript using a new keyword and Object() constructor is as follows:

var objectName = new Object();

objectName.propertyName1 = "Value1";

objectName.propertyName2 = "Value2";

. . . . . .

objectName.functionName1 = function()

{ 

  // function code; 

};

3. Using an object constructor (using new keyword)

- Sometimes, we need to create several objects to represent similar things. In this situation, we can use the constructor function to create several objects in JavaScript.

- For this, we need to create a function as a template with parameters. The argument values passed we can assign to parameters inside the current object by using this keyword.

- In other words, we can set the properties inside the object with this keyword. The keyword this refers to the current object. We commonly used this keyword inside functions and objects.

For example, let us consider an employee object with properties like name, age, salary as given:

function employee(name, age, salary)

{

// Setting properties inside the object using this keyword.

   this.name = name;

   this.age = age;

   this.salary = salary;

}

Note: We can use object constructor method for creating objects in JavaScript. But, we consider it as an inferior way to create objects because of the following reasons.

1. In this method, we require more typing than object literal method.

2. Object constructor method does not perform as well in web browsers.

3. It is more difficult to read and understand than object literal method.

Types of Objects in JavaScript

1. User-defined Objects in JavaScript

  - By object literal

  - By creating an instance of Object directly (using new keyword)

  - Using object constructor 

2. Built-in Objects in JavaScript

These built-in objects are available for both client side JavaScript and server-side applications. Some important built-in objects include:

- String object

- Array object

- Date object

- Math object  

3. Browser Objects in JavaScript

Browser objects are those objects that interact with the browser window. These objects are not part of JavaScript language but most browser commonly support them. 

- Window object

- History object

- Location object

- Navigator object

- Screen object

4. Document Objects in JavaScript

- Document objects are part of Document Object Model (DOM) defined by W3C. Every window is connected with document object. It is a container for all HTML objects associated with the HTML tags of an HTML document.

- The document object provides various properties such as anchor, alinkColor, cookie, forms, history, etc. and methods such as clear, close, open, etc.

- We can access document objects using document property of the window object provided by the browser. For example, we can change document’s background color by setting the document’s bgcolor property. 

The syntax is as follows:

window.document.bgcolor = "red";

Array in JavaScript 

Array : array is basically a user-defined object that represents a collection of different data type of elements.

Array uses a single variable name to store more than one value. 

There are three ways to create an array in JavaScript.  :

1. By array literal

2. By creating instance of Array directly (using new keyword)

3. Using an Array constructor (using new keyword)

1. JavaScript Array literal

- Array literal is the most common and easiest way to create an array in JavaScript.

- The ability to store value of different types within an array is not of other programming language like Java. In Java language, all the values within an array must be of the same type.

Syntax : let dataValues = [10, "Hello", null, true];

2. Creating Array directly using new keyword

- Arrays in JavaScript are simple objects, so another way to create an array in JavaScript is by directly creating an instance of an object. 

- Syntax :

let arrayname = new Array();

3. Creating Array using Object Constructor

- arrays are objects, so we can declare and initialize an array using the new Array() object constructor.

Syntax :

let arrayname = new Array(elements);

Types of Arrays in JavaScript

We must keep in mind that JavaScript is a loosely typed language. It means that elements of an array can be of different types. We can store different data types of elements in an array, even objects.

Basically, there are five types of arrays in JavaScript. They are:

• String arrays
• Number arrays
• Boolean arrays
• Object arrays (including null arrays because null is an object)
• Mixed arrays

Built in Methods of Array Object in JavaScript

The built-in methods inside array object are classified into three categories for ease of understanding. They are:

1. Accessor methods

2. Mutator methods

3. Iterator methods

1. Accessor Methods

- Accessor methods in JavaScript are those methods that do not modify the original arrays. They work on a copy of the calling array.

- In other words, a copy of array is constructed and the Accessor methods perform its operations on that copy of the array.

- All the accessor methods in the array object are defined inside Array.prototype property. JavaScript provides the following accessor methods to work with arrays.

2.Mutator Methods

- Unlike accessor methods, mutator methods work on the original array, not on the copy of it. They overwrite the original array. These methods can add, modify, delete, or truncate elements of an array.

- Once modified, we cannot undo these operations. Every operation is performed on the original array, not on the copy of it. Therefore, developers must exercise caution while using mutator methods. 

3. Iterator methods

- These built-in methods help us iterate through arrays and are called iteration methods or iterators. Iterators are methods that are called on arrays to manipulate elements and return some values.