The easiest way to debug JavaScript code is to use console.log() which is used by many developers. Sometimes, we need to understand the structure of an array and the values stored for debugging purposes. Here's how to view an array of structures.
Various methods of JavaScript allow us to inspect the structure of an array. For example, we can know whether an array contains objects, nested arrays, strings, numbers or booleans.
Use the JSON.stringify() method
The JSON.stringify() method allows us to convert a JSON object to a string. An array is also an object in JavaScript, so we can use the JSON.stringify() method to convert an array to a string. If the array contains objects, "[object object]" is displayed in the result string.
grammar
Users can view the structure of the array using the JSON.stringify() method according to the following syntax.
JSON.stringify(array);
In the above syntax, we are passing the array as a parameter of the JSON.stringify() method.
example
In the example below, we create arrays containing various values such as strings, booleans, and numbers. Afterwards, we use the JSON.stringify() method to see the structure of the array.
<html>
<body>
<h3>Using the <i> JSON.stringify() </i> method to view the array structure</h3>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
function viewArray() {
let test_array = ["Hello", "String 1", true, 30, false, 40];
content.innerHTML = "The array structure is " + JSON.stringify(test_array);
}
viewArray();
</script>
</body>
</html>
In the output, the user can observe the structure of test_array.
Use the array.join() method
The array.join() method converts all elements into strings and concatenates them by the delimiter passed as its argument.
grammar
Users can use the array.join() method to view the structure of the array according to the syntax below.
test_array.join(delimiter)
In the above syntax, we need to pass delimiter to separate array elements with delimiter.
example
In the example below, test_array contains strings, booleans, numbers and objects. We concatenate the array elements using the "," delimiter and display the resulting string on the web page.
<html>
<body>
<h2>Using the <i> array.join() </i> method to view the array structure.</h2>
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function viewArray() {
let test_array = ["value1", false, 3211, true, "value2", { name: "Shubham", age: 22, city: "Rajkot" }];
content.innerHTML = "The array structure is " + test_array.join(', ');
}
viewArray();
</script>
</body>
</html>
Use the array.toString() method
JavaScript's toString() method is used to convert the value of any object or other data type except string to a string. We can use the array's toString() method to convert the array to a string and view the array structure.
grammar
Users can use the toString() method on the array according to the syntax below to view the array structure by converting the array to a string.
test_array.toString()
example
In the example below, we take the test_array containing various values as a reference and execute the toString() method. In the output, the user can observe the string representation of the array. test_array contains nested arrays, which are also converted to strings by the toString() method.
<html>
<body>
<h2>Using the <i> array.toString() </i> method to view the array structure.</h2>
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function arrayStructure() {
let test_array = [50, 60, false, true, "TypeScript", "JavaScript", [10, 20, 30]];
content.innerHTML = "The array structure is " + test_array.toString();
}
arrayStructure();
</script>
</body>
</html>The above describes three different ways to view the structure of an array. In the method, the user needs to write one line of code. Therefore, users can use any one of these three methods according to their understanding and comfort.