Non Primitive DataType In JS

JavaScript Objects :

A javaScript object is an entity having state and behavior (properties and method).
For example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language.
Everything is an object in JavaScript.
JavaScript is template based not class based.
Here, we don't create class to get the object. But, we direct create objects.

Creating Objects in JavaScript :

There are 3 ways to create objects.

By object literal
By creating instance of Object directly (using new keyword)
By using an object constructor (using new keyword)

1) JavaScript Object by object literal :

The syntax of creating object using object literal is given below:

object= {property1:value1,property2:value2.....propertyN:valueN}

As you can see, property and value is separated by : (colon).

Let’s see the simple example of creating object in JavaScript.

<html>
<body>
<script>  
emp={id:102,name:"Shyam Kumar",salary:40000}  
document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>
</body>
</html>

Output:

102 Shyam Kumar 40000

2) By creating instance of Object :

The syntax of creating object directly is given below:

var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

<html>
<body>
<script>  
var emp=new Object();  
emp.id=101;  
emp.name="Ravi Malik";  
emp.salary=50000;  
document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script> 
</body>
</html>

Output:

101 Ravi Malik 50000

3) By using an Object constructor :

Here, you need to create function with arguments.
Each argument value can be assigned in the current object by using this keyword.
The this keyword refers to the current object.

The example of creating object by object constructor is given below.

<html>
<body>
<script>  
function emp(id,name,salary){  
this.id=id;  
this.name=name;  
this.salary=salary;  
}  
e=new emp(103,"Vimal Jaiswal",30000);  

document.write(e.id+" "+e.name+" "+e.salary);  
</script>  
</body>
</html>

output:

103 Vimal Jaiswal 30000

JavaScript Array :

An array in JavaScript is a data structure
Array is used to store multiple values in a single variable.
It can hold various data types and allows for dynamic resizing.
Elements are accessed by their index, starting from 0.

Basic Terminologies of JavaScript Array :

Array: A data structure in JavaScript that allows you to store multiple values in a single variable.
Array Element: Each value within an array is called an element. Elements are accessed by their index.
Array Index: A numeric representation that indicates the position of an element in the array. JavaScript arrays are zero-indexed, meaning the first element is at index 0.
Array Length: The number of elements in an array. It can be retrieved using the length property.

There are 3 ways to construct array in JavaScript :

By array literal
By creating instance of Array directly (using new keyword)
By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:

var arrayname=[value1,value2.....valueN];

As you can see, values are contained inside [ ] and separated by , (comma).

Example:

<html>
<body>
<script>  
var emp=["Sonoo","Vimal","Ratan"];  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br/>");  
}  
</script>  
</body>
</html>

Output:

Sonoo
Vimal
Ratan

2) JavaScript Array directly (new keyword) :

The syntax of creating array directly is given below:

var arrayname=new Array();

Here, new keyword is used to create instance of array.

Let's see the example of creating array directly.

<html>
<body>
<script>  
var i;  
var emp = new Array();  
emp[0] = "Arun";  
emp[1] = "Varun";  
emp[2] = "John";  

for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  
</body>
</html>

Output :

Arun
Varun
John

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we don't have to provide value explicitly.

The example of creating object by array constructor is given below.

<html>
<body>
<script>  
var emp=new Array("Jai","Vijay","Smith");  
for (i=0;i<emp.length;i++){  
document.write(emp[i] + "<br>");  
}  
</script>  
</body>
</html>

Output:

Jai
Vijay
Smith

JavaScript Array Methods

Let's see the list of JavaScript array methods with their description.

Methods	Description
concat()	It returns a new array object that contains two or more merged arrays.
copywithin()	It copies the part of the given array with its own elements and returns the modified array.
entries()	It creates an iterator object and a loop that iterates over each key/value pair.
every()	It determines whether all the elements of an array are satisfying the provided function conditions.
flat()	It creates a new array carrying sub-array elements concatenated recursively till the specified depth.
flatMap()	It maps all array elements via mapping function, then flattens the result into a new array.
fill()	It fills elements into an array with static values.
from()	It creates a new array carrying the exact copy of another array element.
filter()	It returns the new array containing the elements that pass the provided function conditions.
find()	It returns the value of the first element in the given array that satisfies the specified condition.
findIndex()	It returns the index value of the first element in the given array that satisfies the specified condition.
forEach()	It invokes the provided function once for each element of an array.
includes()	It checks whether the given array contains the specified element.
indexOf()	It searches the specified element in the given array and returns the index of the first match.
isArray()	It tests if the passed value ia an array.
join()	It joins the elements of an array as a string.
keys()	It creates an iterator object that contains only the keys of the array, then loops through these keys.
lastIndexOf()	It searches the specified element in the given array and returns the index of the last match.
map()	It calls the specified function for every array element and returns the new array
of()	It creates a new array from a variable number of arguments, holding any type of argument.
pop()	It removes and returns the last element of an array.
push()	It adds one or more elements to the end of an array.
reverse()	It reverses the elements of given array.
reduce(function, initial)	It executes a provided function for each value from left to right and reduces the array to a single value.
reduceRight()	It executes a provided function for each value from right to left and reduces the array to a single value.
some()	It determines if any element of the array passes the test of the implemented function.
shift()	It removes and returns the first element of an array.
slice()	It returns a new array containing the copy of the part of the given array.
sort()	It returns the element of the given array in a sorted order.
splice()	It add/remove elements to/from the given array.
toLocaleString()	It returns a string containing all the elements of a specified array.
toString()	It converts the elements of a specified array into string form, without affecting the original array.
unshift()	It adds one or more elements in the beginning of the given array.
values()	It creates a new iterator object carrying values for each index in the array.

JavaScript Functions :

JS functions are used to perform operations. We can call JavaScript function many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

Code reusability: We can call a function several times so it save coding.
Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.

function functionName([arg1, arg2, ...argN]){  
 //code to be executed  
}

JavaScript Functions can have 0 or more arguments

JavaScript Function Example :

<html>
<body>
<script>  
function msg(){  
alert("hello! this is message");  
}  
</script>  
<input type="button" onclick="msg()" value="call function"/>  
</body>
</html>

JavaScript Function Arguments :

<html>
<body>
<script>  
function getcube(number){  
alert(number*number*number);  
}  
</script>  
<form>  
<input type="button" value="click" onclick="getcube(4)"/>  
</form>  
</body>
</html>

Function with Return Value :

<html>
<body>
<script>  
function getInfo(){  
return "hello javatpoint! How r u?";  
}  
</script>  
<script>  
document.write(getInfo());  
</script>  
</body>
</html>

Output:

hello javatpoint! How r u?

JavaScript Function Methods

Let's see function methods with description.

Method	Description
apply()	It is used to call a function contains this value and a single array of arguments.
bind()	It is used to create a new function.
call()	It is used to call a function contains this value and an argument list.
toString()	It returns the result in a form of a string.

Whats Next ?

JavaScript BOM

Browser Objects

Window Object
History Object
Navigator Object
Screen Object

Non Primitive DataType In JS

Advantage of JavaScript function

Whats Next ?

Subscribe to my newsletter

Aditya Gadhave

Aditya Gadhave