What are Complex Data types in JavaScript?

Javascript Web Development Front End Technology

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>