├── .gitignore ├── Files ├── SlideModifiers.png └── SlideModifiers.pptx └── Readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /Files/SlideModifiers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eltoroit/JSArrayfns/HEAD/Files/SlideModifiers.png -------------------------------------------------------------------------------- /Files/SlideModifiers.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eltoroit/JSArrayfns/HEAD/Files/SlideModifiers.pptx -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Understand JavaScript Array Functions Using Emojis 2 | 3 | As you may be aware, JavaScript has a large number of functions to work with arrays. But this makes it hard to keep track of those functions, specially when trying to decide which one to use when writing code. 4 | 5 | I have put this blog together to help explain those functions, the examples use Emojis to help explain the concepts in a visual way. I have personally found out they do help understand the functionality better. 6 | 7 | Before we go to the emoji samples, let's summarize the functions by their main intention. IF you want to go to the Emojis, just click on the links. 8 | 9 | ## Use Search Functions 10 | 11 | Use a function to search for elements within an array 12 | 13 | | Safe? | Name | Purpose | 14 | | :---: | ------------------------------- | ------------------------------------ | 15 | | ✅ | **[every(fn)](#every)** | Does every element passes a test? | 16 | | ✅ | **[filter(fn)](#filter)** | Array with matching elements | 17 | | ✅ | **[find(fn)](#find)** | Get first matching element | 18 | | ✅ | **[findIndex(fn)](#findIndex)** | Get index for first matching element | 19 | | ✅ | **[some(fn)](#some)** | Does any element passes a test? | 20 | 21 | ## Find Elements 22 | 23 | Look for the actual elements 24 | 25 | | Safe? | Name | Purpose | 26 | | :---: | ---------------------------------------- | ------------------------------------ | 27 | | ✅ | **[includes(element)](#includes)** | Does the array contain this element? | 28 | | ✅ | **[indexOf(element)](#indexOf)** | Get first index for this element | 29 | | ✅ | **[lastIndexOf(element)](#lastIndexOf)** | Get last index for this element | 30 | 31 | ## Process Elements 32 | 33 | Use a function process the elements of the array 34 | 35 | | Safe? | Name | Purpose | 36 | | :---: | --------------------------- | ---------------------------------- | 37 | | ✅ | **[forEach(fn)](#forEach)** | Executes function for each element | 38 | | ✅ | **[map(fn)](#map)** | Transform each element of an array | 39 | 40 | ## Change Elements Order 41 | 42 | These functions change the order of your elements, becareful because they are not safe. 43 | 44 | | Safe? | Name | Purpose | 45 | | :---: | ------------------------- | ------------------------------ | 46 | | ❌ | **[reverse()](#reverse)** | Reverses an array | 47 | | ❌ | **[sort(fn)](#sort)** | Sorts the elements of an array | 48 | 49 | ## Aggregate 50 | 51 | Get a single value from all the elements 52 | 53 | | Safe? | Name | Purpose | 54 | | :---: | ---------------------------- | --------------------------------------------------------------------- | 55 | | ✅ | **[join(separator)](#join)** | Returns a new string by concatenating all of the elements in an array | 56 | | ✅ | **[reduce(fn)](#reduce)** | Executes a reducer function on each element of the array | 57 | 58 | ### Add, Change and Remove Elements: 59 | 60 | These functions help you get an array with different elements. Warning: Most of these functions alter the original array! 61 | 62 |

63 | 64 |

65 | 66 | | Safe? | Name | Purpose | 67 | | :---: | --------------------------------------------------- | ------------------------------------------------------ | 68 | | ✅ | **[concat(elements)](#concat)** | Append arrays or elements | 69 | | ❌ | **[pop()](#pop)** | Removes the last element from an array | 70 | | ❌ | **[push(elements)](#push)** | Adds one or more elements to the end of an array | 71 | | ❌ | **[shift()](#shift)** | Removes the first element from an array | 72 | | ❌ | **[unshift(elements)](#unshift)** | Adds one or more elements to the beginning of an array | 73 | | ✅ | **[slice(start, end)](#slice)** | Returns a shallow copy of a portion of an array | 74 | | ❌ | **[splice(start, deleteCount, elements)](#splice)** | Change the contents of an array | 75 | 76 | Functions that **add** values 77 | 78 | | Safe? | Function | At Start | At End | 79 | | :---: | ------------------------------- | :------: | :----: | 80 | | ✅ | **[concat(values)](#concat)** | | ✅ | 81 | | ❌ | **[push(values)](#push)** | | ✅ | 82 | | ❌ | **[unshift(values)](#unshift)** | ✅ | | 83 | 84 | Functions that **remove** values 85 | 86 | | Safe? | Function | At Start | At End | 87 | | :---: | --------------------- | :------: | :----: | 88 | | ❌ | **[pop()](#pop)** | | ✅ | 89 | | ❌ | **[shift()](#shift)** | ✅ | | 90 | 91 | Other functions 92 | 93 | - The **[splice(start, deleteCount, values)](#splice)** function adds and removes elements, but be very careful because it's not safe (❌), it will make changes to your arrays! 94 | - The **[slice(start, end)](#slice)** function gives you a new arraywith a subset (start to end-1) of the elements but it's safe (✅) because does not make changes to your array. 95 | 96 | # Syntax and samples 97 | 98 | ## Helper functions 99 | 100 | ```JavaScript 101 | function isAnimal(emoji) { 102 | return '🐄🐔'.includes(emoji.trim()); 103 | } 104 | function cook(emoji) { 105 | let cooked = ""; 106 | switch (emoji.trim()) { 107 | case '🐄': { cooked = '🍔'; break; } 108 | case '🌽': { cooked = '🍿'; break; } 109 | case '🥔': { cooked = '🍟'; break; } 110 | case '🐔': { cooked = '🍗'; break; } 111 | default: { 112 | alert(`I do not know how to cook ${emoji.trim()}`); 113 | break; 114 | } 115 | } 116 | return ` ${cooked} `; 117 | } 118 | ``` 119 | 120 | ## Concat 121 | 122 | | | | 123 | | ------- | ------------------------------------------------------------------- | 124 | | Syntax | `array.concat([value1[, value2[, ...[, valueN]]]])` | 125 | | Purpose | Returns a new array having concatenated arrays or values at the end | 126 | | Safe? | ✅ | 127 | 128 | ```JavaScript 129 | let array1 = ['a', 'b', 'c']; 130 | let array2 = ['d', 'e', 'f']; 131 | let output = array1.concat(array2); 132 | console.log(output); // [ 'a', 'b', 'c', 'd', 'e', 'f' ] 133 | ``` 134 | 135 | ```JavaScript 136 | let array1 = [' 🐄 ', ' 🥔 ', ' 🐔 ']; 137 | let array2 = [' 🌽 ', ' 🍔 ', ' 🍟 ']; 138 | let output = array1.concat(array2); 139 | console.log(output); // [ ' 🐄 ', ' 🥔 ', ' 🐔 ', ' 🌽 ', ' 🍔 ', ' 🍟 '] 140 | ``` 141 | 142 | ## Every 143 | 144 | | | | 145 | | ------- | ------------------------------------------------------------------------------------------------------ | 146 | | Syntax | `array.every(callback(element[, index[, array]])[, thisArg])` | 147 | | Purpose | Returns a boolean value indicating if every element passes a test implemented by the provided function | 148 | | Safe? | ✅ | 149 | 150 | ```JavaScript 151 | let array1 = [1, 30, 39, 29, 10, 13]; 152 | let output = array1.every(currentValue => currentValue < 25); 153 | console.log(output); // false 154 | ``` 155 | 156 | ```JavaScript 157 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 158 | let output = array1.every(currentValue => isAnimal(currentValue)); 159 | console.log(output); // false 160 | ``` 161 | 162 | ## Filter 163 | 164 | | | | 165 | | ------- | --------------------------------------------------------------------------------------------- | 166 | | Syntax | `array.filter(callback(element[, index, [array]])[, thisArg])` | 167 | | Purpose | Creates a new array with all elements that pass the test implemented by the provided function | 168 | | Safe? | ✅ | 169 | 170 | ```JavaScript 171 | let array1 = [1, 30, 39, 29, 10, 13]; 172 | let output = array1.filter(currentValue => currentValue > 25); 173 | console.log(output); // [ 30, 39, 29 ] 174 | ``` 175 | 176 | ```JavaScript 177 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 178 | let output = array1.filter(currentValue => isAnimal(currentValue)); 179 | console.log(output); // [ ' 🐄 ', ' 🐔 ' ] 180 | ``` 181 | 182 | ## Find 183 | 184 | | | | 185 | | ------- | ---------------------------------------------------------------------- | 186 | | Syntax | `array.find(callback(element[, index[, array]])[, thisArg])` | 187 | | Purpose | Returns the first element that satisfies the provided testing function | 188 | | Safe? | ✅ | 189 | 190 | ```JavaScript 191 | let array1 = [5, 'Banana', 8, 130, 44]; 192 | let output = array1.find(element => typeof element === 'string'); 193 | console.log(output); // 'Banana' 194 | ``` 195 | 196 | ```JavaScript 197 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 198 | let output = array1.find(currentValue => isAnimal(currentValue)); 199 | console.log(output); // ' 🐄 ' 200 | ``` 201 | 202 | ## FindIndex 203 | 204 | | | | 205 | | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 206 | | Syntax | `array.findIndex(callback( element[, index[, array]] )[, thisArg])` | 207 | | Purpose | Returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test | 208 | | Safe? | ✅ | 209 | 210 | ```JavaScript 211 | let array1 = [5, 12, 8, 130, 44]; 212 | let output = array1.findIndex(element => element > 15); 213 | console.log(output); // 3 214 | ``` 215 | 216 | ```JavaScript 217 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 218 | let output = array1.findIndex(currentValue => isAnimal(currentValue)); 219 | console.log(output); // 0 220 | ``` 221 | 222 | ## ForEach 223 | 224 | | | | 225 | | ------- | ---------------------------------------------------------------------- | 226 | | Syntax | `array.forEach(callback(currentValue [, index [, array]])[, thisArg])` | 227 | | Purpose | Executes a provided function once for each array element | 228 | | Safe? | ✅ | 229 | 230 | ```JavaScript 231 | let array1 = ['a', 'b', 'c']; 232 | let output = array1.forEach(element => console.log(element)); 233 | console.log(output); // undefined 234 | ``` 235 | 236 | ```JavaScript 237 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 238 | array1.forEach(currentValue => { 239 | console.log(currentValue); // 🐄, 🌽, 🐔 240 | }); 241 | ``` 242 | 243 | ## Includes 244 | 245 | | | | 246 | | ------- | -------------------------------------------------------------------------------------------------------------- | 247 | | Syntax | `array.includes(valueToFind[, fromIndex])` | 248 | | Purpose | Determines whether an array includes a certain value among its entries, returning true or false as appropriate | 249 | | Safe? | ✅ | 250 | 251 | ```JavaScript 252 | let array1 = ['a', 'b', 'c']; 253 | let output = array1.includes('a'); 254 | console.log(output); // true 255 | ``` 256 | 257 | ```JavaScript 258 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 259 | let output = array1.includes(' 🐔 '); 260 | console.log(output); // true 261 | ``` 262 | 263 | ## IndexOf 264 | 265 | | | | 266 | | ------- | ------------------------------------------------------------------------------------------------------ | 267 | | Syntax | `array.indexOf(searchElement[, fromIndex])` | 268 | | Purpose | Returns the first index at which a given element can be found in the array, or -1 if it is not present | 269 | | Safe? | ✅ | 270 | 271 | ```JavaScript 272 | let array1 = ['a', 'b', 'c']; 273 | let output = array1.indexOf('b'); 274 | console.log(output); // 1 275 | ``` 276 | 277 | ```JavaScript 278 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 279 | let output = array1.indexOf(' 🐔 '); 280 | console.log(output); // 2 281 | ``` 282 | 283 | ## Join 284 | 285 | | | | 286 | | ------- | --------------------------------------------------------------------- | 287 | | Syntax | `array.join([separator])` | 288 | | Purpose | Returns a new string by concatenating all of the elements in an array | 289 | | Safe? | ✅ | 290 | 291 | ```JavaScript 292 | let array1 = ['a', 'b', 'c']; 293 | let output = array1.join('-'); 294 | console.log(output); // 'a-b-c' 295 | ``` 296 | 297 | ```JavaScript 298 | let array1 = [' 🐄 ', ' 🍔 ', ' 💩 ']; 299 | let output = array1.join(' => '); 300 | console.log(output); // ' 🐄 => 🍔 => 💩 ' 301 | ``` 302 | 303 | ## LastIndexOf 304 | 305 | | | | 306 | | ------- | ----------------------------------------------------------------------------------------------------- | 307 | | Syntax | `array.lastIndexOf(searchElement[, fromIndex])` | 308 | | Purpose | Returns the last index at which a given element can be found in the array, or -1 if it is not present | 309 | | Safe? | ✅ | 310 | 311 | ```JavaScript 312 | let array1 = ['a', 'b', 'c']; 313 | let output = array1.lastIndexOf('c'); 314 | console.log(output); // 2 315 | ``` 316 | 317 | ```JavaScript 318 | let array1 = [' 🐔 ', ' 🐄 ', ' 🌽 ', ' 🐔 ']; 319 | let output = array1.lastIndexOf(' 🐔 '); 320 | console.log(output); // 3 321 | ``` 322 | 323 | ## Map 324 | 325 | | | | 326 | | ------- | ------------------------------------------------------------------------------------------------------------------- | 327 | | Syntax | `let new_array = arr.map(function callback( currentValue[, index[, array]]) {` | 328 | | | `// return element for new_array` | 329 | | | `}[, thisArg])` | 330 | | Purpose | Creates a new array populated with the results of calling a provided function on every element in the calling array | 331 | | Safe? | ✅ | 332 | 333 | ```JavaScript 334 | let array1 = [1, 4, 9, 16]; 335 | let output = array1.map(x => Math.sqrt(x)); 336 | console.log(output); // [ 1, 2, 3, 4 ] 337 | ``` 338 | 339 | ```JavaScript 340 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 341 | let output = array1.map(currentValue => cook(currentValue)); 342 | console.log(output); // [ ' 🍔 ', ' 🍿 ', ' 🍗 ' ] 343 | ``` 344 | 345 | ## Pop 346 | 347 | | | | 348 | | ------- | -------------------------------------------------------------- | 349 | | Syntax | `array.pop()` | 350 | | Purpose | Removes the last element from an array, returning that element | 351 | | Safe? | ❌ | 352 | 353 | ```JavaScript 354 | let array1 = ['a', 'b', 'c']; 355 | let output = array1.pop(); 356 | console.log(output); // 'c' 357 | ``` 358 | 359 | ```JavaScript 360 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 361 | let output = array1.pop(); 362 | console.log(output); // ' 🐔 ' 363 | ``` 364 | 365 | ## Push 366 | 367 | | | | 368 | | ------- | ------------------------------------------------------------------------------------- | 369 | | Syntax | `array.push(element1[, ...[, elementN]])` | 370 | | Purpose | Adds one or more elements to the end of an array, returns the new length of the array | 371 | | Safe? | ❌ | 372 | 373 | ```JavaScript 374 | let array1 = ['a', 'b', 'c']; 375 | let output = array1.push('d'); 376 | console.log(output); // 4 377 | ``` 378 | 379 | ```JavaScript 380 | let array1 = [' 🐄 ', ' 🌽 ', ]; 381 | let output = array1.push(' 🐔 '); 382 | console.log(output); // 3 383 | console.log(array1); // [ ' 🐄 ', ' 🌽 ', ' 🐔 ' ] 384 | ``` 385 | 386 | ## Reduce 387 | 388 | | | | 389 | | ------- | ------------------------------------------------------------------------------------------ | 390 | | Syntax | `array.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])` | 391 | | Purpose | Executes a reducer function on each element of the array, resulting in single output value | 392 | | Safe? | ✅ | 393 | 394 | ```JavaScript 395 | let array1 = [1, 2, 3, 4]; 396 | let output = array1.reduce((accumulator, currentValue) => { 397 | return accumulator + currentValue; 398 | }, 10); 399 | console.log(output); // 20 400 | ``` 401 | 402 | ```JavaScript 403 | let array1 = [' 💵 ', ' 💶 ', ' 💴 ', ' 💷 '] 404 | let output = array1.reduce((accumulator, currentValue) => ' 💰 '); 405 | console.log(output); // ' 💰 ' 406 | ``` 407 | 408 | ## Reverse 409 | 410 | | | | 411 | | ------- | ----------------- | 412 | | Syntax | `array.reverse()` | 413 | | Purpose | Reverses an array | 414 | | Safe? | ❌ | 415 | 416 | ```JavaScript 417 | let array1 = ['a', 'b', 'c']; 418 | let output = array1.reverse(); 419 | console.log('original:', array1); // 'original:' [ 'c', 'b', 'a' ] 420 | console.log('reversed:', output); // 'reversed:' [ 'c', 'b', 'a' ] 421 | ``` 422 | 423 | ```JavaScript 424 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 425 | let array2 = array1.reverse(); 426 | console.log('original:', array1); // 'original:' [ ' 🐔 ', ' 🌽 ', ' 🐄 ' ] 427 | console.log('reversed:', array2); // 'reversed:' [ ' 🐔 ', ' 🌽 ', ' 🐄 ' ] 428 | ``` 429 | 430 | ## Shift 431 | 432 | | | | 433 | | ------- | ------------------------------------------------------------------------ | 434 | | Syntax | `array.shift()` | 435 | | Purpose | Removes the first element from an array and returns that removed element | 436 | | Safe? | ❌ | 437 | 438 | ```JavaScript 439 | let array1 = ['a', 'b', 'c']; 440 | let output = array1.shift(); 441 | console.log(array1); // [ 'b', 'c' ] 442 | console.log(output); // 'a' 443 | ``` 444 | 445 | ```JavaScript 446 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 447 | let output = array1.shift(); 448 | console.log(array1); // [ ' 🌽 ', ' 🐔 ' ] 449 | console.log(output); // ' 🐄 ' 450 | ``` 451 | 452 | ## Slice 453 | 454 | | | | 455 | | ------- | ------------------------------------------------------------------------------------------------ | 456 | | Syntax | `array.slice([start[, end]])` | 457 | | Purpose | Returns a shallow copy of a portion of an array selected from start (included) to end (excluded) | 458 | | Safe? | ✅ | 459 | 460 | ```JavaScript 461 | let array1 = ['a', 'b', 'c', 'd', 'e']; 462 | let output = array1.slice(2, 4); 463 | console.log(output); // [ 'c', 'd' ] 464 | ``` 465 | 466 | ```JavaScript 467 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 468 | let output = array1.slice(1,2); 469 | console.log(output); // [ ' 🌽 ' ] 470 | ``` 471 | 472 | ## Some 473 | 474 | | | | 475 | | ------- | ---------------------------------------------------------------------------------------------------- | 476 | | Syntax | `array.some(callback(element[, index[, array]])[, thisArg])` | 477 | | Purpose | Tests whether at least one element in the array passes the test implemented by the provided function | 478 | | Safe? | ✅ | 479 | 480 | ```JavaScript 481 | let array1 = ['a', 'b', 'c', '4', 'e']; 482 | let output = array1.some(element => element % 2 === 0); 483 | console.log(output); // true 484 | ``` 485 | 486 | ```JavaScript 487 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 488 | let output = array1.some(currentValue => isAnimal(currentValue)); 489 | console.log(output); // true 490 | ``` 491 | 492 | ## Sort 493 | 494 | | | | 495 | | ------- | ------------------------------------------- | 496 | | Syntax | `array.sort([callback(firstEl, secondEl)])` | 497 | | Purpose | Sorts the elements of an array | 498 | | Safe? | ❌ | 499 | 500 | ```JavaScript 501 | let array1 = ['a', 'd', 'c', 'b']; 502 | let output = array1.sort(); 503 | console.log(array1); // [ 'a', 'b', 'c', 'd' ] 504 | console.log(output); // [ 'a', 'b', 'c', 'd' ] 505 | ``` 506 | 507 | ```JavaScript 508 | let array1 = [4, 2, 5, 1, 3]; 509 | let output = array1.sort((a, b) => (a < b ? -1 : 1)); 510 | console.log(array1); // [1, 2, 3, 4, 5] 511 | console.log(output); // [1, 2, 3, 4, 5] 512 | ``` 513 | 514 | ```JavaScript 515 | // This settles down the debate! 516 | let array1 = [' 🥚 ', ' 🐔 ']; 517 | let whatWasFirst = array1.sort(); 518 | console.log(whatWasFirst); // [ ' 🐔 ', ' 🥚 ' ] 519 | ``` 520 | 521 | ## Splice 522 | 523 | | | | 524 | | ------- | ------------------------------------------------------------------------------ | 525 | | Syntax | `let arrDeleted = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])` | 526 | | Purpose | Changes the contents of an array | 527 | | Safe? | ❌ | 528 | 529 | **Notes:** 530 | 531 | The changes to the array include: 532 | 533 | - Removing elements 534 | - Replacing existing elements 535 | - Adding new elements in place. 536 | 537 | The parameters for this function are: 538 | 539 | - Start 540 | - The index at which to start changing the array 541 | - `start > array.length`: No elements will be deleted but elements could be appended to the array 542 | - `start < 0`: Begins at the end (array.length - n) 543 | - `array.length + start < 0`: begin from index 0 544 | - deleteCount 545 | - An integer indicating the number of elements in the array to remove from start 546 | - If _deleteCount_ is omitted or id `deleteCount > array.length - start` then all the elements from start to the end of the array will be deleted 547 | - `deleteCount = 0` (or negative): no elements are removed 548 | - item1, item2, … 549 | - Elements to add to the array, beginning from the `start` position 550 | 551 | This function returs an array containing the deleted elements 552 | 553 | ```JavaScript 554 | let output; 555 | let array1 = ['A0', 'B1', 'B2', 'B3', 'C4', 'F5']; 556 | output = array1.splice(2, 2); // Remove Elements ('B2', 'B3') 557 | console.log('1 => ' + JSON.stringify(output)); // 1 => ['B2','B3'] 558 | console.log(array1); // [ 'A0', 'B1', 'C4', 'E5', 'F6' ] 559 | output = array1.splice(2, 1, 'C2'); // Replace Elements ('C4' => 'C2') 560 | console.log('2 => ' + JSON.stringify(output)); // 2 => ['C4'] 561 | console.log(array1); // [ 'A0', 'B1', 'C2', 'E5', 'F6' ] 562 | output = array1.splice(3, 0, 'D3', 'E4'); // Adding new elements ('D3', ''E4') 563 | console.log('3 => ' + JSON.stringify(output)); // 3 => [] 564 | console.log(array1); // [ 'A0', 'B1', 'C2', 'D3', 'E4', 'F5' ] 565 | ``` 566 | 567 | ```JavaScript 568 | let array1 = [' 🐄 ', ' 🌽 ', ' 🐔 ']; 569 | let output = array1.splice(1, 1, ' 🐶 '); 570 | console.log(array1); // [ ' 🐄 ', ' 🐶 ', ' 🐔 ' ] 571 | console.log(output); // [ ' 🌽 ' ] 572 | ``` 573 | 574 | ## Unshift 575 | 576 | | | | 577 | | ------- | ---------------------------------------------------------------------------------------------- | 578 | | Syntax | `array.unshift(element1[, ...[, elementN]])` | 579 | | Purpose | Adds one or more elements to the beginning of an array and returns the new length of the array | 580 | | Safe? | ❌ | 581 | 582 | ```JavaScript 583 | let array1 = [4, 5, 6]; 584 | let output = array1.unshift(1, 2, 3); 585 | console.log(output); // 6 586 | console.log(array1); // [ 1, 2, 3, 4, 5, 6 ] 587 | ``` 588 | 589 | ```JavaScript 590 | let array1 = [' 🌽 ', ' 🍔 ', ' 🍟 ']; 591 | let output = array1.unshift(' 🐄 ', ' 🥔 ', ' 🐔 '); 592 | console.log(array1); // [ ' 🐄 ', ' 🥔 ', ' 🐔 ', ' 🌽 ', ' 🍔 ', ' 🍟 '] 593 | console.log(output); // 6 594 | ``` 595 | --------------------------------------------------------------------------------