{"id":103,"date":"2024-11-08T04:47:02","date_gmt":"2024-11-08T04:47:02","guid":{"rendered":"https:\/\/techkubo.com\/javascript\/?p=103"},"modified":"2025-05-13T11:57:59","modified_gmt":"2025-05-13T11:57:59","slug":"javascript-arrays","status":"publish","type":"post","link":"https:\/\/techkubo.com\/javascript\/javascript-arrays\/","title":{"rendered":"JavaScript Arrays"},"content":{"rendered":"\n

What is an Array?<\/strong><\/h2>\n\n\n\n

An array is a special variable that can hold multiple values at once. Arrays are useful for storing lists of data, such as numbers, strings, or objects.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Creating Arrays <\/strong><\/h2>\n\n\n\n

You can create arrays using the array literal syntax or the Array<\/code> constructor.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Array Literal Syntax<\/strong><\/h2>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nconsole.log(fruits);  \/\/ Output: ["Apple", "Banana", "Cherry"]<\/pre><\/div>\n\n\n\n
Array Constructor<\/strong><\/h2>\n\n\n\n
let fruits = new Array("Apple", "Banana", "Cherry");\nconsole.log(fruits);  \/\/ Output: ["Apple", "Banana", "Cherry"]<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Accessing Array Elements<\/strong><\/h2>\n\n\n\n
You can access array elements using their index. Array indices start at 0.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nconsole.log(fruits[0]);  \/\/ Output: Apple\nconsole.log(fruits[1]);  \/\/ Output: Banana\nconsole.log(fruits[2]);  \/\/ Output: Cherry<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Modifying Array Elements<\/strong><\/h2>\n\n\n\n
You can modify elements in an array by accessing them using their index.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nfruits[1] = "Blueberry";\nconsole.log(fruits);  \/\/ Output: ["Apple", "Blueberry", "Cherry"]<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Array Properties<\/strong><\/h2>\n\n\n\n
Length<\/strong><\/h3>\n\n\n\n
The length<\/code> property returns the number of elements in an array.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nconsole.log(fruits.length);  \/\/ Output: 3<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Array Methods<\/strong><\/h2>\n\n\n\n
JavaScript provides various methods to manipulate arrays.<\/p>\n\n\n\n
1. push()<\/strong><\/p>\n\n\n\n
The push()<\/code> method adds one or more elements to the end of an array.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana"];\nfruits.push("Cherry");\nconsole.log(fruits);  \/\/ Output: ["Apple", "Banana", "Cherry"]<\/pre><\/div>\n\n\n\n
2. pop()<\/strong><\/p>\n\n\n\n
The pop()<\/code> method removes the last element from an array.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nfruits.pop();\nconsole.log(fruits);  \/\/ Output: ["Apple", "Banana"]<\/pre><\/div>\n\n\n\n
3. shift()<\/strong><\/p>\n\n\n\n
The shift()<\/code> method removes the first element from an array.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nfruits.shift();\nconsole.log(fruits);  \/\/ Output: ["Banana", "Cherry"]<\/pre><\/div>\n\n\n\n
4. unshift()<\/strong><\/p>\n\n\n\n
The unshift()<\/code> method adds one or more elements to the beginning of an array.<\/p>\n\n\n\n
let fruits = ["Banana", "Cherry"];\nfruits.unshift("Apple");\nconsole.log(fruits);  \/\/ Output: ["Apple", "Banana", "Cherry"]<\/pre><\/div>\n\n\n\n
5. splice()<\/strong><\/p>\n\n\n\n
The splice()<\/code> method adds or removes elements from an array.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nfruits.splice(1, 1, "Blueberry", "Mango");\nconsole.log(fruits);  \/\/ Output: ["Apple", "Blueberry", "Mango", "Cherry"]<\/pre><\/div>\n\n\n\n
6. slice()<\/strong><\/p>\n\n\n\n
The slice()<\/code> method returns a new array containing a portion of an existing array.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nlet citrus = fruits.slice(1, 3);\nconsole.log(citrus);  \/\/ Output: ["Banana", "Cherry"]<\/pre><\/div>\n\n\n\n
7. concat()<\/strong><\/p>\n\n\n\n
The concat()<\/code> method merges two or more arrays.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana"];\nlet moreFruits = ["Cherry", "Date"];\nlet allFruits = fruits.concat(moreFruits);\nconsole.log(allFruits);  \/\/ Output: ["Apple", "Banana", "Cherry", "Date"]<\/pre><\/div>\n\n\n\n
8. join()<\/strong><\/p>\n\n\n\n
The join()<\/code> method joins all elements of an array into a string.<\/p>\n\n\n\n
let fruits = ["Apple", "Banana", "Cherry"];\nlet fruitString = fruits.join(", ");\nconsole.log(fruitString);  \/\/ Output: "Apple, Banana, Cherry"<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
JavaScript Arrays Example Code<\/strong><\/h2>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
    \n
  • Creating Arrays<\/strong>: Demonstrates creating arrays using the array literal syntax.<\/li>\n\n\n\n
  • Accessing Elements<\/strong>: Accesses elements using their index.<\/li>\n\n\n\n
  • Modifying Elements<\/strong>: Modifies elements using their index.<\/li>\n\n\n\n
  • Array Properties<\/strong>: Uses the length<\/code> property to get the number of elements.<\/li>\n\n\n\n
  • Array Methods<\/strong>: Demonstrates various array methods such as push<\/code>, pop<\/code>, shift<\/code>, unshift<\/code>, splice<\/code>, slice<\/code>, concat<\/code>, and join<\/code>.<\/li>\n<\/ul>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript Arrays Example<\/title>\n<\/head>\n<body>\n    <script>\n        let fruits = ["Apple", "Banana", "Cherry"];\n\n        \/\/ Accessing elements\n        console.log("First fruit: " + fruits[0]);  \/\/ Output: First fruit: Apple\n\n        \/\/ Modifying elements\n        fruits[1] = "Blueberry";\n        console.log("Modified fruits: " + fruits);  \/\/ Output: Modified fruits: Apple,Blueberry,Cherry\n\n        \/\/ Array properties\n        console.log("Number of fruits: " + fruits.length);  \/\/ Output: Number of fruits: 3\n\n        \/\/ Array methods\n        fruits.push("Mango");\n        console.log("After push: " + fruits);  \/\/ Output: After push: Apple,Blueberry,Cherry,Mango\n\n        fruits.pop();\n        console.log("After pop: " + fruits);  \/\/ Output: After pop: Apple,Blueberry,Cherry\n\n        fruits.shift();\n        console.log("After shift: " + fruits);  \/\/ Output: After shift: Blueberry,Cherry\n\n        fruits.unshift("Apple");\n        console.log("After unshift: " + fruits);  \/\/ Output: After unshift: Apple,Blueberry,Cherry\n\n        fruits.splice(1, 1, "Pineapple", "Grapes");\n        console.log("After splice: " + fruits);  \/\/ Output: After splice: Apple,Pineapple,Grapes,Cherry\n\n        let citrus = fruits.slice(1, 3);\n        console.log("After slice: " + citrus);  \/\/ Output: After slice: Pineapple,Grapes\n\n        let moreFruits = ["Orange", "Peach"];\n        let allFruits = fruits.concat(moreFruits);\n        console.log("After concat: " + allFruits);  \/\/ Output: After concat: Apple,Pineapple,Grapes,Cherry,Orange,Peach\n\n        let fruitString = fruits.join(", ");\n        console.log("After join: " + fruitString);  \/\/ Output: After join: Apple, Pineapple, Grapes, Cherry\n    <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    JavaScript Labs<\/strong><\/h2>\n\n\n\n