JavaScript Arrays and Objects: A Comprehensive Guide
Table of Contents
JavaScript Arrays and Objects
Learn all about JavaScript arrays and objects in this comprehensive guide. Understand how to work with arrays, access elements, modify data, create objects, and use key-value pairs effectively.
We will study the following conceptes: JavaScript arrays, JavaScript objects, array methods, object properties, access array elements, add elements to array, create objects, key-value pairs in JavaScript, working with arrays and objects.
JavaScript arrays are :
- data structures that allow you to store multiple values in a single variable.
- Arrays can hold elements of any data type, including numbers, strings, objects, and even other arrays.
- They provide a way to group related data together and access them using numeric indices.
How to create JavaScript Arrays ?
step by step in complete code in html
To create JavaScript arrays in a step-by-step manner within an HTML file, follow these steps:
Step 1: Create a new HTML file and set up the basic structure with a script tag where you’ll write your JavaScript code.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Arrays</title>
</head>
<body>
<!-- Your content goes here -->
<script src="script.js"></script>
</body>
</html>
Step 2: Write the JavaScript code in a separate file
Create a new file named script.js in the same directory as your HTML file.
This is where you’ll write your JavaScript code to create arrays.
Step 3: Define an array
In the script.js file, define an array with elements of your choice.
javascript
// script.js let fruits = ['apple', 'banana', 'orange'];
Step 4: Access array elements
You can access array elements using their index.
javascript
// script.js let fruits = ['apple', 'banana', 'orange']; console.log(fruits[0]); // Output: 'apple' console.log(fruits[1]); // Output: 'banana' console.log(fruits[2]); // Output: 'orange'
Step 5: Modify array elements
You can modify array elements by assigning new values to specific indices.
javascript
// script.js let fruits = ['apple', 'banana', 'orange']; fruits[1] = 'grape'; console.log(fruits); // Output: ['apple', 'grape', 'orange']
Step 6: Add elements to the array
You can add elements to the end of the array using the push() method.
javascript
// script.js
let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // Output: ['apple', 'banana', 'orange']
Step 7: Remove elements from the array
You can remove the last element from the array using the pop() method.
javascript
// script.js let fruits = ['apple', 'banana', 'orange']; fruits.pop(); console.log(fruits); // Output: ['apple', 'banana']
Step 8: Display the array elements on the HTML page
To display the array elements on the HTML page, you can create a paragraph element and set its content to the array values.
Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Arrays</title>
</head>
<body>
<p id="output"></p>
<script src="script.js"></script>
</body>
</html>
javascript
// script.js
let fruits = ['apple', 'banana', 'orange'];
let outputParagraph = document.getElementById('output');
outputParagraph.textContent = fruits.join(', ');
Explanation:
In this example, the array elements are displayed as a comma-separated list within the paragraph element with the id “output.”
That’s it! You’ve created a basic HTML file that demonstrates how to create JavaScript arrays step by step.
Open the HTML file in your browser, and you should see the array elements displayed on the page.
Here’s how you can create an array in JavaScript:
Javascript code:
// Empty array
let emptyArray = [];
// Array with elements
let fruits = ['apple', 'banana', 'orange'];
// Mixed data types
let mixedArray = [1, 'hello', { key: 'value' }, true];
Arrays are zero-indexed, which means the first element is accessed using index 0, the second element using index 1, and so on.
Javascript code:
let fruits = ['apple', 'banana', 'orange']; console.log(fruits[0]); // Output: 'apple' console.log(fruits[1]); // Output: 'banana' console.log(fruits[2]); // Output: 'orange'
How to modify array elements ?
-by assigning new values to specific indices:
Javascript code:
let fruits = ['apple', 'banana', 'orange']; fruits[1] = 'grape'; console.log(fruits); // Output: ['apple', 'grape', 'orange']
Example:
<!DOCTYPE html> <html> <head> <body> <script> let fruits = ['apple', 'banana', 'orange']; fruits[1] = 'grape'; document.write(fruits); // Output: ['apple', 'grape', 'orange'] </script> </body> </html>
How to get arry length ?
Arrays have a property called length, which gives the number of elements in the array:
Javascript code:
let fruits = ['apple', 'banana', 'orange']; console.log(fruits.length); // Output: 3
How to add elements to array ?
You can add elements to the end of an array using the push() method:
Javascript code:
let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // Output: ['apple', 'banana', 'orange']
You can remove the last element from an array using the pop() method:
Example:
<html>
<head>
</head>
<body>
<script>
let fruits = ['apple', 'banana'];
fruits.push('orange');
document.write(fruits);
</script>
</body>
</html>
Javascript code
let fruits = ['apple', 'banana', 'orange']; fruits.pop(); console.log(fruits); // Output: ['apple', 'banana']
Complete Example:
<html>
<head>
</head>
<body>
<script>
let fruits = ['apple', 'banana', 'orange'];
fruits.pop();
document.write(fruits); // Output: ['apple', 'banana']
</script>
</body>
</html>
There are many other methods and properties available for arrays in JavaScript, like unshift(), shift(), splice(), slice(), concat(), indexOf(), includes(), etc.
These methods allow you to perform various operations on arrays, such as adding, removing, and finding elements.
Javascript code:
let numbers = [1, 2, 3, 4, 5]; numbers.unshift(0); // Add 0 at the beginning numbers.shift(); // Remove the first element (0) numbers.splice(2, 1); // Remove one element at index 2 (3) let subArray = numbers.slice(1, 3); // Get a new array with elements at index 1 and 2 (2, 4)
Example:
<html>
<head>
</head>
<body>
<script>
let numbers = [1, 2, 3, 4, 5];
numbers.unshift(0); // Add 0 at the beginning
document.write(numbers);
document.write("<br>");
numbers.shift(); // Remove the first element (0)
document.write(numbers);
document.write("<br>");
numbers.splice(2, 1); // Remove one element at index 2 (3)
document.write(numbers);
document.write("<br>");
let subArray = numbers.slice(1, 3);
// Get a new array with elements at index 1 and 2 (2, 4)
document.write(subArray);
</script>
</body>
</html>
JavaScript arrays are versatile and widely used for data manipulation and storage in web development and other programming tasks.
Using the JavaScript Keyword new:complete code in html
Using the JavaScript new keyword, you can create instances of objects, including arrays.
Here’s a complete HTML file demonstrating how to use the new keyword to create an array object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Arrays with 'new'</title>
</head>
<body>
<p id="output"></p>
<script>
// Create a new array using the 'new' keyword
let fruits = new Array('apple', 'banana', 'orange');
// Access and modify array elements
console.log(fruits[0]); // Output: 'apple'
console.log(fruits[1]); // Output: 'banana'
console.log(fruits[2]); // Output: 'orange'
fruits[1] = 'grape';
console.log(fruits); // Output: ['apple', 'grape', 'orange']
// Add elements to the array using push()
fruits.push('mango');
console.log(fruits); // Output: ['apple', 'grape', 'orange', 'mango']
// Remove elements from the array using pop()
fruits.pop();
console.log(fruits); // Output: ['apple', 'grape', 'orange']
// Display the array elements on the HTML page
let outputParagraph = document.getElementById('output');
outputParagraph.textContent = fruits.join(', ');
</script>
</body>
</html>
Explanation:
1In this example, we use the new Array() syntax to create an array with the elements ‘apple’, ‘banana’, and ‘orange’.
2-We then perform various operations on the array, such as accessing and modifying elements, adding elements with push(), and removing elements with pop().
3-Finally, we display the array elements in the paragraph element with the id “output” using the join() method.
When you open this HTML file in your browser, you will see the array elements displayed as a comma-separated list:
apple, grape, orange
Please note that using the new keyword to create arrays is less common in modern JavaScript code. The array literal syntax ([]) is more widely used because it’s shorter and more concise.
For example, you can create the same array using the array literal syntax:
javascript
let fruits = ['apple', 'banana', 'orange'];
Both approaches will create an array with the same elements, and you can perform the same operations on the array regardless of how it was created.
How to Accessing Array Elements:complete code in html
To access array elements in JavaScript within an HTML file, follow these steps:
Step 1: Set up the HTML structure
Create a new HTML file and set up the basic structure with a script tag where you’ll write your JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Array Elements</title>
</head>
<body>
<!-- Your content goes here -->
<script src="script.js"></script>
</body>
</html>
Step 2: Write the JavaScript code in a separate file
Create a new file named script.js in the same directory as your HTML file. This is where you’ll write your JavaScript code to access array elements.
Step 3: Access array elements
In the script.js file, define an array and access its elements using index.
javascript
// script.js let fruits = ['apple', 'banana', 'orange']; let firstFruit = fruits[0]; let secondFruit = fruits[1]; let thirdFruit = fruits[2]; console.log(firstFruit); // Output: 'apple' console.log(secondFruit); // Output: 'banana' console.log(thirdFruit); // Output: 'orange'
Step 4: Display the array elements on the HTML page
To display the array elements on the HTML page, you can create a list element and append list items for each array element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Array Elements</title>
</head>
<body>
<ul id="fruits-list"></ul>
<script src="script.js"></script>
</body>
</html>
javascript
// script.js
let fruits = ['apple', 'banana', 'orange'];
let fruitsList = document.getElementById('fruits-list');
for (let i = 0; i < fruits.length; i++) {
let listItem = document.createElement('li');
listItem.textContent = fruits[i];
fruitsList.appendChild(listItem);
}
Explanation:
1-In this example, we loop through the fruits array and create a new list item for each element.
2-We then append each list item to the unordered list element with the id “fruits-list.”
When you open this HTML file in your browser, you will see the array elements displayed as a list:
apple
banana
orange
That’s it! You’ve learned how to access array elements in JavaScript and display them on an HTML page.
How to Changing an Array Element: complete code in html
To change an array element in JavaScript within an HTML file, follow these steps:
Step 1: Create a new HTML file and set up the basic structure with a script tag where you’ll write your JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing an Array Element</title>
</head>
<body>
<!-- Your content goes here -->
<script src="script.js"></script>
</body>
</html>
Step 2: Write the JavaScript code in a separate file
Create a new file named script.js in the same directory as your HTML file. This is where you’ll write your JavaScript code to change an array element.
Step 3: Change array element
In the script.js file, define an array and change its element using its index.
javascript
// script.js let fruits = ['apple', 'banana', 'orange']; fruits[1] = 'grape'; // Change the element at index 1 console.log(fruits); // Output: ['apple', 'grape', 'orange']
Step 4: Display the modified array on the HTML page
To display the modified array on the HTML page, you can create a list element and append list items for each array element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing an Array Element</title>
</head>
<body>
<ul id="fruits-list"></ul>
<script src="script.js"></script>
</body>
</html>
javascript
// script.js
let fruits = [‘apple’, ‘banana’, ‘orange’];
fruits[1] = ‘grape’; // Change the element at index 1
let fruitsList = document.getElementById(‘fruits-list’);
for (let i = 0; i < fruits.length; i++) {
let listItem = document.createElement(‘li’);
listItem.textContent = fruits[i];
fruitsList.appendChild(listItem);
}
Explanation:
1-In this example, we modify the fruits array by changing the element at index 1 from ‘banana’ to ‘grape’.
2-Then, we loop through the modified fruits array and create a new list item for each element.
3-We append each list item to the unordered list element with the id “fruits-list.”
When you open this HTML file in your browser, you will see the modified array elements displayed as a list:
apple
grape
orange
That’s it! You’ve learned how to change an array element in JavaScript and display the modified array on an HTML page.
How to convert array to a string ?
Converting an Array to a String: complete code in html
To convert an array to a string in JavaScript within an HTML file, you can use the join() method. Follow these steps:
Step 1: Create a new HTML file and set up the basic structure with a script tag where you’ll write your JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Converting an Array to a String</title>
</head>
<body>
<!-- Your content goes here -->
<script src="script.js"></script>
</body>
</html>
Step 2: Write the JavaScript code in a separate file
Create a new file named script.js in the same directory as your HTML file. This is where you’ll write your JavaScript code to convert an array to a string.
Step 3: Convert the array to a string
In the script.js file, define an array and use the join() method to convert it to a string.
javascript
// script.js
let fruits = ['apple', 'banana', 'orange'];
let fruitsString = fruits.join(', '); // Convert the array to a string with comma and space as separator
console.log(fruitsString); // Output: 'apple, banana, orange'
Step 4: Display the converted string on the HTML page
To display the converted string on the HTML page, you can create a paragraph element and set its content to the converted string.
Complete code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Converting an Array to a String</title>
</head>
<body>
<p id="output"></p>
<script src="script.js"></script>
</body>
</html>
javascript
// script.js
let fruits = ['apple', 'banana', 'orange'];
let fruitsString = fruits.join(', ');
let outputParagraph = document.getElementById('output');
outputParagraph.textContent = fruitsString;
Explanation:
1-In this example, we use the join(‘, ‘) method to convert the fruits array to a string with a comma and space as the separator.
2-Then, we set the converted string to the paragraph element with the id “output.”
When you open this HTML file in your browser, you will see the converted string displayed on the page:
apple, banana, orange
That’s it! You’ve learned how to convert an array to a string in JavaScript and display the converted string on an HTML page.
How to Access the Full Array
To access and display the full array in JavaScript within an HTML file, follow these steps:
Step 1: Create a new HTML file and set up the basic structure with a script tag where you’ll write your JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing the Full Array</title>
</head>
<body>
<!-- Your content goes here -->
<script src="script.js"></script>
</body>
</html>
Step 2: Write the JavaScript code in a separate file
Create a new file named script.js in the same directory as your HTML file. This is where you’ll write your JavaScript code to access and display the full array.
Step 3: Access and display the full array
In the script.js file, define an array and display its full content.
javascript
// script.js let fruits = ['apple', 'banana', 'orange']; console.log(fruits); // Output: ['apple', 'banana', 'orange']
Step 4: Display the full array on the HTML page
To display the full array on the HTML page, you can create a list element and append list items for each array element.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing the Full Array</title>
</head>
<body>
<ul id="fruits-list"></ul>
<script src="script.js"></script>
</body>
</html>
javascript
// script.js
let fruits = ['apple', 'banana', 'orange'];
let fruitsList = document.getElementById('fruits-list');
for (let i = 0; i < fruits.length; i++) {
let listItem = document.createElement('li');
listItem.textContent = fruits[i];
fruitsList.appendChild(listItem);
}
Explanation:
1-In this example, we loop through the fruits array and create a new list item for each element.
2-We append each list item to the unordered list element with the id “fruits-list.”
When you open this HTML file in your browser, you will see the full array elements displayed as a list:
apple
banana
orange
Additionally, the full array is logged to the console as [‘apple’, ‘banana’, ‘orange’].
That’s it! You’ve learned how to access and display the full array in JavaScript and display it on an HTML page.
References
Mozilla Developer Network (MDN) – Working with objects:
w3schools – JavaScript Arrays:
w3schools – JavaScript Objects:
JavaScript.info – Object basics: