Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are Complex Data types in JavaScript?
In this tutorial, we will learn complex data types in JavaScript.
JavaScript has multiple built-in data types to store data in different formats. The data types of JavaScript can be divided into two groups, and those are primitive data types and non-primitive data types. Number, String, Boolean, Undefined and Null are part of the primitive data type, whereas the Array and Object are part of the non-primitive data type. The typeof operator is used to identify the data types.
The primitive data types are simple and easy to use. In contrast, the non-primitive data types (Array and Object) are relatively more complex than primitive data types, so the array and object data types are called complex data types.
In this tutorial, we will see the functionality and uses of these two complex data types −
Complex Data Type: Array
In JavaScript, arrays are used to store a collection of data. It is a reference-type variable. To create an array, we can use the array constructor or array literals, the square brackets ( [] ). The array has multiple properties and methods that make the array operations easy and efficient. Some most useful array properties and methods are: ‘length’, ‘map()’, ‘filter()’, ‘at()’, ‘find()’, ‘findIndex()’, ‘join()’, ‘push()’, ‘pop()’, ‘slice()’, ‘toString()’, etc.
Syntax
const arr = [1, 2, 3, 4, 5] // OR const arr2 = new Array(1, 2, 3, 4, 5)
In the above syntax, we have created two arrays, ‘arr’ and ‘arr2’, using an array literal and array constructor.
Example
In the below example, we have used one of the JavaScript complex data types: array. We have created an array containing some integers. Two buttons are used in association with the click event handler function. The click of the ‘Add’ button executed the ‘add()’ function that added a new element or number at the end of the array, similarly, the ‘Remove’ button executes the ‘remove()’ function that removed the last element from the array. The new number added to the array will be the last element’s value plus one. We have used the ‘push()’ and ‘pop()’ methods to add a new element and remove the last element from the array. The ‘length’ property is used to show the array’s length.
<html> <body> <h2>Using the <i> Array data type </i> of JavaScript</h2> <button onclick="add()">Add</button> <button onclick="remove()">Remove</button> <div style=" margin-top: 5px; padding: 0px 5px; background-color: rgb(215, 251, 249); border: 1px solid #b2b2b2; " class="element item abc xyz" > <h4 id="array-length"></h4> <h4>Array:</h4> <p id="array"></p> </div> <script> const array_length = document.getElementById('array-length') const array = document.getElementById('array') // Array let arr = [1, 2, 3] // Initial output array_length.innerHTML = 'The length of the Array: ' + arr.length array.innerHTML = '[' + arr + ']' function add() { const lastElement = arr[arr.length - 1] // Adding new element arr.push(lastElement + 1) array_length.innerHTML = 'The length of the Array: ' + arr.length array.innerHTML = '[' + arr + ']' } function remove() { // Removing last element arr.pop() array_length.innerHTML = 'The length of the Array: ' + arr.length array.innerHTML = '[' + arr + ']' } </script> </body> </html>
Complex Data Type: Object
In JavaScript, objects are used to store key-value paired data. It is a reference-type variable. To create an object, we can use the object constructor or object literals, the curly brackets ( {} ). The keys of the object data are called the properties, and the values are called the property values. The object can have multiple properties, and we can also store methods in it. Some built-in methods make the object operations easy and efficient, and those are: ‘keys()’, ‘values()’, ‘toString()’, etc.
Syntax
const obj = {
id: 1,
name: 'Tutorialspoint',
}
// OR
const obj2 = new Object({ id: 1, name: 'Tutorialspoint' })
In the above syntax, we have created two objects, ‘obj’ and ‘obj2’, using object literal and object constructor.
Example
In the below example, we have used one of the JavaScript complex data type objects. First, we created an object and used two input fields to add more object properties. The first input field is used for the object property name, and the second is used to take the property value. Then, the click event of the ‘Add Property’ button executed the ‘addProperty()’ function that added a new property to the object using the input fields values. Finally, the object is displayed on the webpage using the JSON.stringyfy() method by making the whole object into a string format.
<html> <body> <h2>Using the <i> Object data type </i> of JavaScript</h2> <div> <label for="key">Key:</label> <input type="text" id="key" /> </div> <div> <label for="key">Value:</label> <input type="text" id="value" /> </div> <button onclick="addProperty()">Add Property</button> <div style=" margin-top: 5px; padding: 5px; background-color: rgb(215, 251, 249); border: 1px solid #b2b2b2; " > <h4>Object:</h4> <p id="root"></p> </div> <script> const root = document.getElementById('root') // input fields const key = document.getElementById('key') const value = document.getElementById('value') // Object let obj = {} root.innerHTML = JSON.stringify(obj, null, ' ') function addProperty() { const propertyName = key.value const propertyValue = value.value // Adding new property in the object obj[propertyName] = propertyValue root.innerHTML = JSON.stringify(obj, null, ' ') } </script> </body> </html>
2K+ Views
