{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiebujthgvql3smnub77cxedxmiwthdte7cpv3ugcg66iy324322e4",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3mp623zqo33q2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreicxfvzlnufkaw7ixotgehlzgjvdn55lhhobgk7pkdmqohnkabkth4"
    },
    "mimeType": "image/webp",
    "size": 587602
  },
  "path": "/annapoo/javascript-arrays-methods-part-1-kb7",
  "publishedAt": "2026-06-26T03:33:39.000Z",
  "site": "https://dev.to",
  "tags": [
    "webdev",
    "programming",
    "productivity",
    "javascript",
    "https://www.w3schools.com/js/js_array_methods.asp"
  ],
  "textContent": "##  What is an Array?\n\nAn **Array** is a special object in JavaScript used to store multiple values in a single variable.\n\nInstead of creating separate variables,\n\n\n\n    let student1 = \"John\";\n    let student2 = \"David\";\n    let student3 = \"Alex\";\n\n\nwe can use an array:\n\n\n\n    let students = [\"John\", \"David\", \"Alex\"];\n\n\nEach value inside the array is called an **element** , and every element has an **index** starting from **0**.\n\n\n\n    Index :   0        1        2\n            -------------------------\n    Array : | John | David | Alex |\n            -------------------------\n\n\n#  1. Array length\n\n##  Definition\n\nThe `length` property returns the total number of elements present in an array.\n\nIt is **not a function**. It is a property of an array object.\n\nIt is also writable, meaning you can change the length to increase or decrease the array size.\n\n##  Syntax\n\n\n    array.length\n\n\nTo modify the array length:\n\n\n\n    array.length = newLength;\n\n\n##  Parameters\n\nNone.\n\n##  Returns\n\nReturns a **number** representing the total number of elements in the array.\n\n##  Internal Working\n\nConsider this array:\n\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Mango\"];\n\n\nMemory representation:\n\n\n\n    Index\n\n    0 → Apple\n    1 → Orange\n    2 → Mango\n\n    length = 3\n\n\nWhen JavaScript creates the array, it internally stores a special property:\n\n\n\n    {\n      0: \"Apple\",\n      1: \"Orange\",\n      2: \"Mango\",\n      length: 3\n    }\n\n\nWhenever you access:\n\n\n\n    fruits.length\n\n\nJavaScript simply returns the value stored in the `length` property.\n\nIt does **not** count the elements every time.\n\nThis makes `length` very fast.\n\n##  Example 1\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\n    console.log(fruits.length);\n\n\n###  Output\n\n\n    3\n\n\n##  Example 2 - Updating Length\n\n\n    let numbers = [10,20,30,40];\n\n    numbers.length = 2;\n\n    console.log(numbers);\n\n\nOutput\n\n\n\n    [10,20]\n\n\nJavaScript removes the remaining elements.\n\n##  Example 3 - Increasing Length\n\n\n    let colors = [\"Red\",\"Blue\"];\n\n    colors.length = 5;\n\n    console.log(colors);\n\n\nOutput\n\n\n\n    [\"Red\",\"Blue\", empty × 3]\n\n\nThe new positions become **empty slots**.\n\n##  Real-Time Example\n\nImagine an **E-commerce Shopping Cart**.\n\n\n\n    let cart = [\"Laptop\", \"Mouse\", \"Keyboard\"];\n\n    console.log(\"Total Items:\", cart.length);\n\n\nOutput\n\n\n\n    Total Items: 3\n\n\nAmazon and Flipkart use similar logic to display:\n\n\n\n    Cart (3 Items)\n\n\n##  Common Mistake\n\n\n    let arr = [1,2,3];\n\n    console.log(arr.length());\n\n\nOutput\n\n\n\n    TypeError\n\n\nWhy?\n\nBecause `length` is a property, **not** a method.\n\nCorrect:\n\n\n\n    arr.length\n\n\n##  Best Practices\n\n✔ Use `length` inside loops.\n\n\n\n    for(let i=0;i<arr.length;i++){\n        console.log(arr[i]);\n    }\n\n\n#  2. Array toString()\n\n##  Definition\n\nThe `toString()` method converts an array into a **comma-separated string**.\n\nThe original array is **not modified**.\n\n##  Syntax\n\n\n    array.toString()\n\n\n##  Parameters\n\nNone.\n\n##  Returns\n\nReturns a string.\n\n##  Internal Working\n\nSuppose\n\n\n\n    let fruits = [\"Apple\",\"Orange\",\"Banana\"];\n\n\nInternally JavaScript joins every element using commas.\n\n\n\n    Apple + \",\" +\n    Orange + \",\" +\n    Banana\n\n\nResult\n\n\n\n    Apple,Orange,Banana\n\n\n##  Example\n\n\n    let fruits = [\"Apple\",\"Orange\",\"Banana\"];\n\n    let result = fruits.toString();\n\n    console.log(result);\n\n\nOutput\n\n\n\n    Apple,Orange,Banana\n\n\n##  Example with Numbers\n\n\n    let numbers = [10,20,30];\n\n    console.log(numbers.toString());\n\n\nOutput\n\n\n\n    10,20,30\n\n\n##  Real-Time Example\n\nSending array data through an API.\n\n\n\n    let selectedItems = [\"Laptop\",\"Mouse\",\"Keyboard\"];\n\n    let apiData = selectedItems.toString();\n\n    console.log(apiData);\n\n\nOutput\n\n\n\n    Laptop,Mouse,Keyboard\n\n\n##  Common Mistake\n\nMany developers think it returns an array.\n\nWrong.\n\n\n\n    let result = [1,2,3].toString();\n\n    console.log(typeof result);\n\n\nOutput\n\n\n\n    string\n\n\n##  Best Practice\n\nUse `join()` when you need a custom separator.\n\n#  3. Array at()\n\n##  Definition\n\nThe `at()` method returns the element at a specified index.\n\nUnlike bracket notation (`[]`), it also supports **negative indexing**.\n\n##  Syntax\n\n\n    array.at(index)\n\n\n##  Parameters\n\nParameter | Description\n---|---\nindex | Position of element\n\n##  Returns\n\nReturns the element.\n\nReturns `undefined` if the index is invalid.\n\n##  Internal Working\n\nExample\n\n\n\n    let arr = [\"A\",\"B\",\"C\",\"D\"];\n\n\n\n    0 → A\n    1 → B\n    2 → C\n    3 → D\n\n\nWhen\n\n\n\n    arr.at(2)\n\n\nJavaScript returns\n\n\n\n    C\n\n\nWhen\n\n\n\n    arr.at(-1)\n\n\nJavaScript converts\n\n\n\n    length + (-1)\n\n    4 + (-1)\n\n    =3\n\n\nReturns\n\n\n\n    D\n\n\n##  Example\n\n\n    let fruits = [\"Apple\",\"Orange\",\"Banana\"];\n\n    console.log(fruits.at(1));\n\n\nOutput\n\n\n\n    Orange\n\n\n##  Negative Index\n\n\n    let fruits = [\"Apple\",\"Orange\",\"Banana\"];\n\n    console.log(fruits.at(-1));\n\n\nOutput\n\n\n\n    Banana\n\n\n##  Real-Time Example\n\nLatest Notification\n\n\n\n    let notifications = [\n        \"Order Placed\",\n        \"Order Shipped\",\n        \"Delivered\"\n    ];\n\n    console.log(notifications.at(-1));\n\n\nOutput\n\n\n\n    Delivered\n\n\n##  Common Mistake\n\n\n    arr[-1]\n\n\nOutput\n\n\n\n    undefined\n\n\nCorrect\n\n\n\n    arr.at(-1)\n\n\n#  4. Array join()\n\n##  Definition\n\nThe `join()` method combines all array elements into a single string using a specified separator.\n\nUnlike `toString()`, you can choose the separator.\n\nThe original array is not modified.\n\n##  Syntax\n\n\n    array.join(separator)\n\n\n##  Parameters\n\nParameter | Description\n---|---\nseparator _(optional)_ | String inserted between elements. Default is `\",\"`.\n\n##  Returns\n\nA string containing all array elements joined together.\n\n##  Internal Working\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\n\nIf you call:\n\n\n\n    fruits.join(\" - \");\n\n\nJavaScript internally performs:\n\n\n\n    \"Apple\" + \" - \" +\n    \"Orange\" + \" - \" +\n    \"Banana\"\n\n\nResult:\n\n\n\n    Apple - Orange - Banana\n\n\n##  Example 1\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\n    console.log(fruits.join());\n\n\n###  Output\n\n\n    Apple,Orange,Banana\n\n\n##  Example 2\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\n    console.log(fruits.join(\" | \"));\n\n\n###  Output\n\n\n    Apple | Orange | Banana\n\n\n##  Real-Time Example\n\nSuppose a user selects multiple skills in a job portal.\n\n\n\n    let skills = [\"JavaScript\", \"React\", \"Node.js\"];\n\n    let profile = skills.join(\", \");\n\n    console.log(profile);\n\n\n###  Output\n\n\n    JavaScript, React, Node.js\n\n\nThis is commonly used to display selected skills on a profile page.\n\n##  Common Mistake\n\nDevelopers sometimes expect `join()` to return an array.\n\n\n\n    let result = [\"A\", \"B\"].join(\"-\");\n\n    console.log(typeof result);\n\n\n###  Output\n\n\n    string\n\n\n**What is the difference between`join()` and `toString()`?**\n\n`join()` | `toString()`\n---|---\nAllows a custom separator | Always uses a comma\nReturns a string | Returns a string\nDoes not modify the array | Does not modify the array\n\n##  Best Practices\n\n✔ Use `join()` whenever you need a specific separator, such as spaces, hyphens, or pipes.\n\n#  5. Array pop()\n\n##  Definition\n\nThe `pop()` method removes the **last element** from an array and returns that removed element.\n\nThe original array **is modified**.\n\n##  Syntax\n\n\n    array.pop()\n\n\n##  Parameters\n\nNone.\n\n##  Returns\n\nReturns the removed element.\n\nIf the array is empty, it returns `undefined`.\n\n##  Internal Working\n\nConsider:\n\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\n\nMemory before `pop()`:\n\n\n\n    Index\n\n    0 → Apple\n    1 → Orange\n    2 → Banana\n    length = 3\n\n\nWhen you call:\n\n\n\n    fruits.pop();\n\n\nJavaScript:\n\n  1. Retrieves the last element (`Banana`).\n  2. Removes it from the array.\n  3. Decreases the `length` property by 1.\n  4. Returns the removed element.\n\n\n\nMemory after:\n\n\n\n    Index\n\n    0 → Apple\n    1 → Orange\n    length = 2\n\n\n##  Example\n\n\n    let fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\n    let removed = fruits.pop();\n\n    console.log(removed);\n    console.log(fruits);\n\n\n###  Output\n\n\n    Banana\n    [\"Apple\", \"Orange\"]\n\n\n##  Real-Time Example\n\nImagine a browser's **recent tabs** list.\n\n\n\n    let recentTabs = [\"Home\", \"Products\", \"Cart\"];\n\n    let closedTab = recentTabs.pop();\n\n    console.log(\"Closed:\", closedTab);\n    console.log(recentTabs);\n\n\n###  Output\n\n\n    Closed: Cart\n    [\"Home\", \"Products\"]\n\n\n##  Common Mistake\n\n\n    let arr = [];\n\n    console.log(arr.pop());\n\n\n###  Output\n\n\n    undefined\n\n\nAlways check if the array has elements before calling `pop()` if your logic depends on a removed value.\n\n#  1. Array.isArray()\n\n> **Note:** `isArray()` is **not** an array method. It is a **static method** of the `Array` object.\n\n##  Definition\n\nThe `Array.isArray()` method checks whether a given value is an array.\n\nIt returns:\n\n  * `true` → if the value is an array\n  * `false` → otherwise\n\n\n\n##  Why do we need it?\n\nIn JavaScript:\n\n\n\n    typeof []\n\n\nreturns\n\n\n\n    \"object\"\n\n\nSo we cannot use `typeof` to determine whether a variable is an array.\n\nInstead, JavaScript provides:\n\n\n\n    Array.isArray()\n\n\n##  Syntax\n\n\n    Array.isArray(value)\n\n\n##  Parameter\n\nParameter | Description\n---|---\nvalue | The value to check\n\n##  Returns\n\nBoolean\n\n\n\n    true\n    false\n\n\n##  Internal Working\n\nSuppose\n\n\n\n    let numbers = [10,20,30];\n\n\nInternally JavaScript checks the object's internal type.\n\n\n\n    numbers\n\n    ↓\n\n    Object\n\n    ↓\n\n    Internal Array Type?\n\n    ↓\n\n    Yes\n\n    ↓\n\n    Return true\n\n\nIf\n\n\n\n    let person = {\n        name: \"John\"\n    };\n\n\nthen\n\n\n\n    person\n\n    ↓\n\n    Object\n\n    ↓\n\n    Internal Array Type?\n\n    ↓\n\n    No\n\n    ↓\n\n    Return false\n\n\n##  Example 1\n\n\n    let numbers = [10,20,30];\n\n    console.log(Array.isArray(numbers));\n\n\nOutput\n\n\n\n    true\n\n\n##  Example 2\n\n\n    let student = {\n        name: \"David\"\n    };\n\n    console.log(Array.isArray(student));\n\n\nOutput\n\n\n\n    false\n\n\n##  Example 3\n\n\n    console.log(Array.isArray(\"JavaScript\"));\n\n    console.log(Array.isArray(100));\n\n    console.log(Array.isArray(true));\n\n\nOutput\n\n\n\n    false\n    false\n    false\n\n\n##  Real-Time Example\n\nSuppose an API returns data.\n\n\n\n    function displayProducts(products){\n\n        if(Array.isArray(products)){\n            console.log(\"Displaying products...\");\n        }else{\n            console.log(\"Invalid Data\");\n        }\n\n    }\n\n    displayProducts([\"Laptop\",\"Mouse\"]);\n\n\nOutput\n\n\n\n    Displaying products...\n\n\nWithout checking, your application could crash when trying to iterate over non-array data.\n\n##  Common Mistake\n\nWrong\n\n\n\n    typeof []\n\n\nOutput\n\n\n\n    object\n\n\nCorrect\n\n\n\n    Array.isArray([])\n\n\nOutput\n\n\n\n    true\n\n\n##  Best Practice\n\nAlways validate API responses before looping.\n\n\n\n    if(Array.isArray(data)){\n        data.forEach(item=>console.log(item));\n    }\n\n\n#  2. delete Operator (Array delete)\n\n> **Important:** `delete` is **not** an array method. It is a JavaScript operator.\n\n##  Definition\n\nThe `delete` operator removes an element from an array **without changing the array length**.\n\nInstead of removing the index, it creates an **empty slot (hole)**.\n\n##  Syntax\n\n\n    delete array[index]\n\n\n##  Parameter\n\nParameter | Description\n---|---\nindex | Position of element\n\n##  Returns\n\nReturns\n\n\n\n    true\n\n\nif deletion succeeds.\n\n##  Internal Working\n\nArray\n\n\n\n    let fruits = [\n    \"Apple\",\n    \"Orange\",\n    \"Banana\"\n    ];\n\n\nMemory\n\n\n\n    0 → Apple\n\n    1 → Orange\n\n    2 → Banana\n\n    length = 3\n\n\nAfter\n\n\n\n    delete fruits[1];\n\n\nMemory\n\n\n\n    0 → Apple\n\n    1 → Empty\n\n    2 → Banana\n\n    length = 3\n\n\nNotice\n\nLength remains\n\n\n\n    3\n\n\n##  Example\n\n\n    let fruits = [\"Apple\",\"Orange\",\"Banana\"];\n\n    delete fruits[1];\n\n    console.log(fruits);\n\n    console.log(fruits.length);\n\n\nOutput\n\n\n\n    [\n    'Apple',\n    empty,\n    'Banana'\n    ]\n\n    3\n\n\n##  Access Deleted Value\n\n\n    console.log(fruits[1]);\n\n\nOutput\n\n\n\n    undefined\n\n\n##  Real-Time Example\n\nSuppose an employee leaves.\n\n\n\n    let employees = [\n    \"John\",\n    \"David\",\n    \"Alex\"\n    ];\n\n    delete employees[1];\n\n    console.log(employees);\n\n\nInstead of shifting everyone,\n\nJavaScript leaves an empty position.\n\nUsually, this is **not** what we want.\n\n#  3. Array.concat()\n\n##  Definition\n\nThe `concat()` method merges two or more arrays into a new array.\n\nThe original arrays remain unchanged.\n\n##  Syntax\n\n\n    array1.concat(array2)\n\n    array1.concat(array2,array3,...)\n\n\n##  Parameters\n\nOne or more arrays or values.\n\n##  Returns\n\nReturns a new merged array.\n\n##  Internal Working\n\n\n    let a=[1,2];\n\n    let b=[3,4];\n\n\nJavaScript creates\n\n\n\n    New Array\n\n    ↓\n\n    Copy a\n\n    ↓\n\n    Append b\n\n    ↓\n\n    Return New Array\n\n\nOriginal arrays stay unchanged.\n\n##  Example\n\n\n    let frontend=[\"HTML\",\"CSS\"];\n\n    let backend=[\"Node\",\"Express\"];\n\n    let fullstack=frontend.concat(backend);\n\n    console.log(fullstack);\n\n\nOutput\n\n\n\n    [\"HTML\",\"CSS\",\"Node\",\"Express\"]\n\n\n##  Multiple Arrays\n\n\n    let a=[1];\n\n    let b=[2];\n\n    let c=[3];\n\n    console.log(a.concat(b,c));\n\n\nOutput\n\n\n\n    [1,2,3]\n\n\n##  Real-Time Example\n\nSuppose a school stores students section-wise.\n\n\n\n    let sectionA=[\"John\",\"David\"];\n\n    let sectionB=[\"Alex\",\"Sam\"];\n\n    let students=sectionA.concat(sectionB);\n\n    console.log(students);\n\n\nOutput\n\n\n\n    [\"John\",\"David\",\"Alex\",\"Sam\"]\n\n\n##  Common Mistake\n\nDevelopers think\n\n\n\n    a.concat(b);\n\n\nchanges `a`.\n\nWrong.\n\nIt returns a new array.\n\nCorrect\n\n\n\n    let newArray = a.concat(b);\n\n\n#  4. Array.copyWithin()\n\n##  Definition\n\nThe `copyWithin()` method copies part of an array to another position **within the same array**.\n\nIt overwrites existing elements and **modifies the original array**.\n\n##  Syntax\n\n\n    array.copyWithin(target)\n    array.copyWithin(target, start)\n    array.copyWithin(target, start, end)\n\n\n##  Parameters\n\nParameter | Description\n---|---\ntarget | Index where copied values will be placed\nstart | Start copying from this index\nend _(optional)_ | Stop copying before this index\n\n##  Returns\n\nThe modified original array.\n\n##  Internal Working\n\n\n    let arr = [10,20,30,40,50];\n\n\nCalling\n\n\n\n    arr.copyWithin(0,3);\n\n\ncopies elements from index `3` onward (`40,50`) to index `0`.\n\nResult\n\n\n\n    [40,50,30,40,50]\n\n\n##  Example\n\n\n    let numbers=[10,20,30,40,50];\n\n    numbers.copyWithin(0,3);\n\n    console.log(numbers);\n\n\nOutput\n\n\n\n    [40,50,30,40,50]\n\n\n##  Real-Time Example\n\nSuppose you maintain a fixed-size buffer for sensor readings and want to overwrite old values with recent ones.\n\n\n\n    let readings=[10,20,30,40,50];\n\n    readings.copyWithin(0,2);\n\n    console.log(readings);\n\n\nOutput\n\n\n\n    [30,40,50,40,50]\n\n\n##  Best Practice\n\nUse `copyWithin()` only when you intentionally want to overwrite elements in the same array.\n\nReferences:\nhttps://www.w3schools.com/js/js_array_methods.asp",
  "title": "JavaScript Arrays Methods - Part 1"
}