Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are Complex Data types in JavaScript?
In this tutorial, we will learn about 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: primitive data types and non-primitive data types. Number, String, Boolean, Undefined and Null are primitive data types, whereas Array and Object are non-primitive data types. The typeof operator is used to identify 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 with square brackets ( [] ). The array has multiple properties and methods that make array operations easy and efficient. Some 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 the JavaScript array data type. We have created an array containing some integers. Two buttons are used with click event handlers. The 'Add' button executes the 'add()' function that adds a new element at the end of the array, while the 'Remove' button executes the 'remove()' function that removes the last element from the array. The new number added to the array will be the last element's value plus one. We use the 'push()' and 'pop()' methods to add and remove elements. The 'length' property shows 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;
"
>
<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 with curly brackets ( {} ). The keys of the object data are called properties, and the values are called property values. The object can have multiple properties, and we can also store methods in it. Some built-in methods make object operations easy and efficient, such as: '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 the JavaScript object data type. First, we created an empty object and used two input fields to add object properties. The first input field is for the property name, and the second is for the property value. The click event of the 'Add Property' button executes the 'addProperty()' function that adds a new property to the object using the input field values. The object is displayed on the webpage using the JSON.stringify() method to convert the object into 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="value">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>
Key Differences Between Arrays and Objects
| Feature | Array | Object |
|---|---|---|
| Storage | Ordered collection of elements | Key-value pairs |
| Access | Index-based (arr[0]) | Property-based (obj.key) |
| Length | Has length property | No built-in length |
| Iteration | for...of, forEach() | for...in, Object.keys() |
Conclusion
Arrays and Objects are JavaScript's complex data types that store collections of data. Arrays are ideal for ordered lists, while Objects are perfect for key-value relationships. Both are reference types and provide powerful methods for data manipulation.
3K+ Views
