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.

1. By object literal
2. By creating instance of Object directly (using new keyword)
3. 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:

1. 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.

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

Output of the above example

102 Shyam Kumar 40000

---

2) By creating instance of Object

The syntax of creating object directly is given below:

1. var objectname=new Object();  

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

1. <script>  
2. var emp=new Object();  
3. emp.id=101;  
4. emp.name="Ravi Malik";  
5. emp.salary=50000;  
6. document.write(emp.id+" "+emp.name+" "+emp.salary);  
7. </script>  

Output of the above example

101 Ravi 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.

1. <script>  
2. function emp(id,name,salary){  
3. this.id=id;  
4. this.name=name;  
5. this.salary=salary;  
6. }  
7. e=new emp(103,"Vimal Jaiswal",30000);  
8.   
9. document.write(e.id+" "+e.name+" "+e.salary);  
10. </script>  

Output of the above example

103 Vimal Jaiswal 30000

---

Defining method in JavaScript Object

We can define method in JavaScript object. But before defining method, we need to add property in the function with same name as method.

The example of defining method in object is given below.

1. <script>  
2. function emp(id,name,salary){  
3. this.id=id;  
4. this.name=name;  
5. this.salary=salary;  
6.   
7. this.changeSalary=changeSalary;  
8. function changeSalary(otherSalary){  
9. this.salary=otherSalary;  
10. }  
11. }  
12. e=new emp(103,"Sonoo Jaiswal",30000);  
13. document.write(e.id+" "+e.name+" "+e.salary);  
14. e.changeSalary(45000);  
15. document.write("<br>"+e.id+" "+e.name+" "+e.salary);  
16. </script>  

Output of the above example

103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000

JavaScript Array

JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

---

1) JavaScript array literal

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

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

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

Let’s see the simple example of creating and using array in JavaScript.

1. <script>  
2. var emp=["Sonoo","Vimal","Ratan"];  
3. for (i=0;i<emp.length;i++){  
4. document.write(emp[i] + "<br/>");  
5. }  
6. </script>  

The .length property returns the length of an array.

Output of the above example

Sonoo
Vimal
Ratan

---

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

1. var arrayname=new Array();  

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

Let’s see the example of creating array directly.

1. <script>  
2. var i;  
3. var emp = new Array();  
4. emp[0] = "Arun";  
5. emp[1] = "Varun";  
6. emp[2] = "John";  
7.   
8. for (i=0;i<emp.length;i++){  
9. document.write(emp[i] + "<br>");  
10. }  
11. </script>  

Output of the above example

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 explicitely.

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

1. <script>  
2. var emp=new Array("Jai","Vijay","Smith");  
3. for (i=0;i<emp.length;i++){  
4. document.write(emp[i] + "<br>");  
5. }  
6. </script>  

Output of the above example

Jai
Vijay
Smith

JavaScript String

The JavaScript string is an object that represents a sequence of characters.

There are 2 ways to create string in JavaScript

1. By string literal
2. By string object (using new keyword)

---

1) By string literal

The string literal is created using double quotes. The syntax of creating string using string literal is given below:

1. var stringname="string value";  

Let’s see the simple example of creating string literal.

1. <script>  
2. var str="This is string literal";  
3. document.write(str);  
4. </script>  

Output:

This is string literal

---

2) By string object (using new keyword)

The syntax of creating string object using new keyword is given below:

1. var stringname=new String("string literal");  

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

Let’s see the example of creating string in JavaScript by new keyword.

1. <script>  
2. var stringname=new String("hello javascript string");  
3. document.write(stringname);  
4. </script>  

Output:

hello javascript string

---

JavaScript String Methods

Let's see the list of JavaScript string methods with examples.

• charAt(index)
• concat(str)
• indexOf(str)
• lastIndexOf(str)
• toLowerCase()
• toUpperCase()
• slice(beginIndex, endIndex)
• trim()

1) JavaScript String charAt(index) Method

The JavaScript String charAt() method returns the character at the given index.

1. <script>  
2. var str="javascript";  
3. document.write(str.charAt(2));  
4. </script>  

Output:

v

2) JavaScript String concat(str) Method

The JavaScript String concat(str) method concatenates or joins two strings.

1. <script>  
2. var s1="javascript ";  
3. var s2="concat example";  
4. var s3=s1.concat(s2);  
5. document.write(s3);  
6. </script>  

Output:

javascript concat example

3) JavaScript String indexOf(str) Method

The JavaScript String indexOf(str) method returns the index position of the given string.

1. <script>  
2. var s1="javascript from javatpoint indexof";  
3. var n=s1.indexOf("from");  
4. document.write(n);  
5. </script>  

Output:

11

4) JavaScript String lastIndexOf(str) Method

The JavaScript String lastIndexOf(str) method returns the last index position of the given string.

1. <script>  
2. var s1="javascript from javatpoint indexof";  
3. var n=s1.lastIndexOf("java");  
4. document.write(n);  
5. </script>  

Output:

16

5) JavaScript String toLowerCase() Method

The JavaScript String toLowerCase() method returns the given string in lowercase letters.

1. <script>  
2. var s1="JavaScript toLowerCase Example";  
3. var s2=s1.toLowerCase();  
4. document.write(s2);  
5. </script>  

Output:

javascript tolowercase example

6) JavaScript String toUpperCase() Method

The JavaScript String toUpperCase() method returns the given string in uppercase letters.

1. <script>  
2. var s1="JavaScript toUpperCase Example";  
3. var s2=s1.toUpperCase();  
4. document.write(s2);  
5. </script>  

Output:

JAVASCRIPT TOUPPERCASE EXAMPLE

7) JavaScript String slice(beginIndex, endIndex) Method

The JavaScript String slice(beginIndex, endIndex) method returns the parts of string from given beginIndex to endIndex. In slice() method, beginIndex is inclusive and endIndex is exclusive.

1. <script>  
2. var s1="abcdefgh";  
3. var s2=s1.slice(2,5);  
4. document.write(s2);  
5. </script>  

Output:

cde

8) JavaScript String trim() Method

The JavaScript String trim() method removes leading and trailing whitespaces from the string.

1. <script>  
2. var s1="     javascript trim    ";  
3. var s2=s1.trim();  
4. document.write(s2);  
5. </script>  

Output:

javascript trim

JavaScript Date Object

The JavaScript date object can be used to get year, month and day. You can display a timer on the webpage by the help of JavaScript date object.

You can use different Date constructors to create date object. It provides methods to get and set day, month, year, hour, minute and seconds.

---

Constructor

You can use 4 variant of Date constructor to create date object.

1. Date()  
2. Date(milliseconds)  
3. Date(dateString)  
4. Date(year, month, day, hours, minutes, seconds, milliseconds)  

---

JavaScript Date Methods

The important methods of date object are as follows:

JavaScript Date Example

---

Let's see the simple example to print date object. It prints date and time both.

1. Current Date and Time: <span id="txt"></span>  
2. <script>  
3. var today=new Date();  
4. document.getElementById('txt').innerHTML=today;  
5. </script>  

Output:

Current Date and Time: Tue Sep 21 2021 02:44:30 GMT+0530 (India Standard Time)

---

JavaScript Current Time Example

Let's see the simple example to print current time of system.

1. Current Time: <span id="txt"></span>  
2. <script>  
3. var today=new Date();  
4. var h=today.getHours();  
5. var m=today.getMinutes();  
6. var s=today.getSeconds();  
7. document.getElementById('txt').innerHTML=h+":"+m+":"+s;  
8. </script>  

Output:

Current Time: 2:44:30

---

JavaScript Digital Clock Example

Let's see the simple example to display digital clock using JavaScript date object.

There are two ways to set interval in JavaScript: by setTimeout() or setInterval() method.

1. Current Time: <span id="txt"></span>  
2. <script>  
3. window.onload=function(){getTime();}  
4. function getTime(){  
5. var today=new Date();  
6. var h=today.getHours();  
7. var m=today.getMinutes();  
8. var s=today.getSeconds();  
9. // add a zero in front of numbers<10  
10. m=checkTime(m);  
11. s=checkTime(s);  
12. document.getElementById('txt').innerHTML=h+":"+m+":"+s;  
13. setTimeout(function(){getTime()},1000);  
14. }  
15. //setInterval("getTime()",1000);//another way  
16. function checkTime(i){  
17. if (i<10){  
18.   i="0" + i;  
19.  }  
20. return i;  
21. }  
22. </script>  

Output:

Current Time:

JavaScript Math Object

The JavaScript math object provides several constants and methods to perform mathematical operation. Unlike date object, it doesn't have constructors.

Math.sqrt(n)

The JavaScript math.sqrt(n) method returns the square root of the given number.

1. Square Root of 17 is: <span id="p1"></span>    
2. <script>    
3. document.getElementById('p1').innerHTML=Math.sqrt(17);    
4. </script>    

Output:

Square Root of 17 is: 4.123105625617661

Math.random()

The JavaScript math.random() method returns the random number between 0 to 1.

1. Random Number is: <span id="p2"></span>    
2. <script>    
3. document.getElementById('p2').innerHTML=Math.random();    
4. </script>   

Output:

Random Number is: 0.8532444867314739

Math.pow(m,n)

The JavaScript math.pow(m,n) method returns the m to the power of n that is mⁿ.

1. 3 to the power of 4 is: <span id="p3"></span>    
2. <script>    
3. document.getElementById('p3').innerHTML=Math.pow(3,4);    
4. </script>    

Output:

3 to the power of 4 is: 81

Math.floor(n)

The JavaScript math.floor(n) method returns the lowest integer for the given number. For example 3 for 3.7, 5 for 5.9 etc.

1. Floor of 4.6 is: <span id="p4"></span>    
2. <script>    
3. document.getElementById('p4').innerHTML=Math.floor(4.6);    
4. </script>    

Output:

Floor of 4.6 is: 4

Math.ceil(n)

The JavaScript math.ceil(n) method returns the largest integer for the given number. For example 4 for 3.7, 6 for 5.9 etc.

1. Ceil of 4.6 is: <span id="p5"></span>    
2. <script>    
3. document.getElementById('p5').innerHTML=Math.ceil(4.6);    
4. </script>    

Output:

Ceil of 4.6 is: 5

Math.round(n)

The JavaScript math.round(n) method returns the rounded integer nearest for the given number. If fractional part is equal or greater than 0.5, it goes to upper value 1 otherwise lower value 0. For example 4 for 3.7, 3 for 3.3, 6 for 5.9 etc.

1. Round of 4.3 is: <span id="p6"></span><br>    
2. Round of 4.7 is: <span id="p7"></span>    
3. <script>    
4. document.getElementById('p6').innerHTML=Math.round(4.3);   
5. document.getElementById('p7').innerHTML=Math.round(4.7);    
6. </script>    

Output:

Round of 4.3 is: 4
Round of 4.7 is: 5

Math.abs(n)

The JavaScript math.abs(n) method returns the absolute value for the given number. For example 4 for -4, 6.6 for -6.6 etc.

1. Absolute value of -4 is: <span id="p8"></span>      
2. <script>      
3. document.getElementById('p8').innerHTML=Math.abs(-4);      
4. </script>   

Output:

Absolute value of -4 is: 4

JavaScript Number Object

The JavaScript number object enables you to represent a numeric value. It may be integer or floating-point. JavaScript number object follows IEEE standard to represent the floating-point numbers.

By the help of Number() constructor, you can create number object in JavaScript. For example:

1. var n=new Number(value);  

If value can't be converted to number, it returns NaN(Not a Number) that can be checked by isNaN() method.

You can direct assign a number to a variable also. For example:

1. var x=102;//integer value  
2. var y=102.7;//floating point value  
3. var z=13e4;//exponent value, output: 130000  
4. var n=new Number(16);//integer value by number object  

Output:

102 102.7 130000 16

JavaScript Number Constants

Let's see the list of JavaScript number constants with description.

JavaScript Number Methods

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

JavaScript Boolean

JavaScript Boolean is an object that represents value in two states: true or false. You can create the JavaScript Boolean object by Boolean() constructor as given below.

1. Boolean b=new Boolean(value);  

The default value of JavaScript Boolean object is false.

JavaScript Boolean object provides properties and methods also.

JavaScript Boolean Properties

JavaScript Boolean Methods

1
0

❮ JavaScript BasicsJavaScript BOM ❯

1

0