|
| 1 | +--- |
| 2 | +id: array-methods |
| 3 | +title: Array methods in JavaScript |
| 4 | +sidebar_label: Array-methods |
| 5 | +sidebar_position: 18 |
| 6 | +tags: [JavaScript, Arrays, Array Methods,Array length, Array Slice ] |
| 7 | +description: "This tutorial demonstrates how to use Array methods in JavaScript with Example" |
| 8 | +--- |
| 9 | + |
| 10 | +# JavaScript Array Methods |
| 11 | + |
| 12 | +JavaScript provides a variety of methods to manipulate and work with arrays efficiently. Here is a comprehensive overview of some basic and essential array methods. |
| 13 | + |
| 14 | +## Basic Array Methods |
| 15 | + |
| 16 | +### Array `length` |
| 17 | + |
| 18 | +The `length` property returns the length (size) of an array. |
| 19 | + |
| 20 | +**Example:** |
| 21 | +```javascript |
| 22 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 23 | +let size = fruits.length; |
| 24 | +console.log(size); // Output: 4 |
| 25 | +``` |
| 26 | + |
| 27 | +### Array `toString()` |
| 28 | + |
| 29 | +The `toString()` method converts an array to a string of comma-separated array values. |
| 30 | + |
| 31 | +**Example:** |
| 32 | +```javascript |
| 33 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 34 | +console.log(fruits.toString()); // Output: "Banana,Orange,Apple,Mango" |
| 35 | +``` |
| 36 | + |
| 37 | +### Array `at()` |
| 38 | + |
| 39 | +The `at()` method returns the element at the specified index. It also supports negative indexing. |
| 40 | + |
| 41 | +**Example:** |
| 42 | +```javascript |
| 43 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 44 | +let fruit = fruits.at(2); |
| 45 | +console.log(fruit); // Output: "Apple" |
| 46 | +``` |
| 47 | + |
| 48 | +**Note:** |
| 49 | +Many languages allow negative bracket indexing like `[-1]` to access elements from the end of an array. This is not possible in JavaScript using `[]` because `[]` is used for accessing both arrays and objects. The `at()` method, introduced in ES2022, solves this problem. |
| 50 | + |
| 51 | +### Array `join()` |
| 52 | + |
| 53 | +The `join()` method joins all array elements into a string. You can specify a separator. |
| 54 | + |
| 55 | +**Example:** |
| 56 | +```javascript |
| 57 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 58 | +console.log(fruits.join(" * ")); // Output: "Banana * Orange * Apple * Mango" |
| 59 | +``` |
| 60 | + |
| 61 | +## Popping and Pushing |
| 62 | + |
| 63 | +When you work with arrays, it is easy to remove elements and add new elements. |
| 64 | + |
| 65 | +### JavaScript Array `pop()` |
| 66 | + |
| 67 | +The `pop()` method removes the last element from an array and returns it. |
| 68 | + |
| 69 | +**Example:** |
| 70 | +```javascript |
| 71 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 72 | +let fruit = fruits.pop(); |
| 73 | +console.log(fruit); // Output: "Mango" |
| 74 | +console.log(fruits); // Output: ["Banana", "Orange", "Apple"] |
| 75 | +``` |
| 76 | + |
| 77 | +### JavaScript Array `push()` |
| 78 | + |
| 79 | +The `push()` method adds a new element to an array (at the end). |
| 80 | + |
| 81 | +**Example:** |
| 82 | +```javascript |
| 83 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 84 | +fruits.push("Kiwi"); |
| 85 | +console.log(fruits); // Output: ["Banana", "Orange", "Apple", "Mango", "Kiwi"] |
| 86 | +``` |
| 87 | + |
| 88 | +## Shifting Elements |
| 89 | + |
| 90 | +Shifting is equivalent to popping, but working on the first element instead of the last. |
| 91 | + |
| 92 | +### JavaScript Array `shift()` |
| 93 | + |
| 94 | +The `shift()` method removes the first array element and "shifts" all other elements to a lower index. |
| 95 | + |
| 96 | +**Example:** |
| 97 | +```javascript |
| 98 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 99 | +fruits.shift(); |
| 100 | +console.log(fruits); // Output: ["Orange", "Apple", "Mango"] |
| 101 | +``` |
| 102 | + |
| 103 | +### JavaScript Array `unshift()` |
| 104 | + |
| 105 | +The `unshift()` method adds a new element to an array (at the beginning), and "unshifts" older elements. |
| 106 | + |
| 107 | +**Example:** |
| 108 | +```javascript |
| 109 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 110 | +fruits.unshift("Lemon"); |
| 111 | +console.log(fruits); // Output: ["Lemon", "Banana", "Orange", "Apple", "Mango"] |
| 112 | +``` |
| 113 | + |
| 114 | +## JavaScript Array `delete` |
| 115 | + |
| 116 | +**Warning!** Using `delete` leaves `undefined` holes in the array. Use `pop()` or `shift()` instead. |
| 117 | + |
| 118 | +## Merging Arrays (Concatenating) |
| 119 | + |
| 120 | +In programming languages, concatenation means joining strings end-to-end. Concatenating arrays means joining arrays end-to-end. |
| 121 | + |
| 122 | +### JavaScript Array `concat()` |
| 123 | + |
| 124 | +The `concat()` method creates a new array by merging (concatenating) existing arrays. |
| 125 | + |
| 126 | +**Example (Merging Two Arrays):** |
| 127 | +```javascript |
| 128 | +const myGirls = ["Cecilie", "Lone"]; |
| 129 | +const myBoys = ["Emil", "Tobias", "Linus"]; |
| 130 | +const myChildren = myGirls.concat(myBoys); |
| 131 | +console.log(myChildren); // Output: ["Cecilie", "Lone", "Emil", "Tobias", "Linus"] |
| 132 | +``` |
| 133 | +:::info Note |
| 134 | + |
| 135 | +The `concat()` method does not change the existing arrays. It always returns a new array and can take any number of array arguments. |
| 136 | + |
| 137 | +::: |
| 138 | + |
| 139 | +**Example (Merging Three Arrays):** |
| 140 | +```javascript |
| 141 | +const arr1 = ["Cecilie", "Lone"]; |
| 142 | +const arr2 = ["Emil", "Tobias", "Linus"]; |
| 143 | +const arr3 = ["Robin", "Morgan"]; |
| 144 | +const myChildren = arr1.concat(arr2, arr3); |
| 145 | +console.log(myChildren); // Output: ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin", "Morgan"] |
| 146 | +``` |
| 147 | + |
| 148 | +### Array `copyWithin()` |
| 149 | + |
| 150 | +The `copyWithin()` method copies array elements to another position in an array. |
| 151 | + |
| 152 | +**Example: Copy to index 2, all elements from index 0:** |
| 153 | +```javascript |
| 154 | +const fruits = ["Banana", "Orange", "Apple", "Mango"]; |
| 155 | +fruits.copyWithin(2, 0); |
| 156 | +console.log(fruits); // Output: ["Banana", "Orange", "Banana", "Orange"] |
| 157 | +``` |
| 158 | + |
| 159 | + |
| 160 | +Additional methods and their usage: |
| 161 | + |
| 162 | +- Array `slice()` |
| 163 | +- Array `splice()` |
| 164 | +- Array `toSpliced()` |
| 165 | +- Array `flat()` |
| 166 | + |
| 167 | +These methods provide additional flexibility and functionality when working with arrays in JavaScript. |
0 commit comments