Facebook Twitter Instagram
    TecAdmin
    • Home
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    You are at:Home»General Articles»JavaScript Arrays: A Beginner’s Guide

    JavaScript Arrays: A Beginner’s Guide

    By RahulFebruary 24, 20234 Mins Read

    JavaScript arrays are a fundamental data structure used in web development. They allow developers to store and manipulate lists of data in a single variable. In this article, we will explore what arrays are, how to create them, and how to manipulate them in JavaScript.

    Advertisement

    What is an Array?

    In JavaScript, an array is a variable that can hold multiple values. It is a list-like object that allows developers to store and access data in an ordered fashion. Arrays can hold any data type, including strings, numbers, and objects.

    JavaScript Array Tutorial
    JavaScript Arrays

    Creating an Array

    In JavaScript, arrays are created using square brackets [] and can hold any data type, including numbers, strings, objects, and even other arrays. To create an array, you simply declare a new variable and assign it to an array using the square brackets.

    To create an array in JavaScript, we can use the following syntax:

    1
    2
    //Syntax
    let arrayName = [value1, value2, value3];

    Here, arrayName is the name of the array, and value1, value2, and value3 are the values that we want to store in the array. For example:

    1
    2
    //Define an array
    let fruits = ['apple', 'banana', 'orange'];

    This creates an array called fruits that holds three strings: ‘apple’, ‘banana’, and ‘orange’.

    We can also create an empty array and add values to it later:

    1
    2
    3
    4
    5
    6
    7
    //Define emtpy array
    let numbers = [];
     
    //Insert values to array
    numbers.push(1);
    numbers.push(2);
    numbers.push(3);

    This creates an empty array called numbers and adds the numbers 1, 2, and 3 to it using the push() method.

    Accessing Array Elements

    We can access individual elements in an array using their index. In JavaScript, array indexes start at 0. For example, to access the first element in the fruits array, we can use the following syntax:

    1
    2
    //Print array element at index 0
    console.log(fruits[0]);

    This would output ‘apple’ to the console. We can access the second and third elements in the same way:

    1
    2
    3
    //Print array element at index 1,2
    console.log(fruits[1]); // 'banana'
    console.log(fruits[2]); // 'orange'

    Modifying Array Elements

    We can modify the values in an array by accessing them using their index and assigning a new value to them. For example, to change the second element in the fruits array to ‘pear’, we can use the following code:

    1
    2
    3
    //Replace array element at index 1
    fruits[1] = 'pear';
    console.log(fruits); // ['apple', 'pear', 'orange']

    This would change the second element in the fruits array to ‘pear’.

    JavaScript Array Built-in Methods

    JavaScript arrays have several built-in methods that allow us to manipulate their contents. Once you have created an array, you can access and manipulate its elements using various array methods, such as push(), pop(), shift(), unshift(), splice(), slice(), and many more.

    1. push()
    2. The push() method adds one or more elements to the end of an array and returns the new length of the array.

      1
      2
      3
      //Append new array element
      fruits.push('grape');
      console.log(fruits); // ['apple', 'pear', 'orange', 'grape']

    3. pop()
    4. The pop() method removes the last element from an array and returns that element.

      1
      2
      3
      //Remove last array element
      fruits.pop();
      console.log(fruits); // ['apple', 'pear', 'orange']

    5. shift()
    6. The shift() method shifts the all elements from right to left. Which removes the first element from an array:

      1
      2
      3
      //Shift array element right to left
      fruits.shift();
      console.log(fruits); // ['pear', 'orange']

    7. unshift()
    8. The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

      1
      2
      3
      4
      //Shift array elements from left to right and
      //add a new array element at index 0
      fruits.unshift('banana');
      console.log(fruits); // ['banana', 'pear', 'orange']

    9. splice()
    10. The splice() method can add, remove, and/or replace elements in an array. It takes in at least two arguments: the index at which to start making changes, and the number of elements to remove. Additional arguments can be provided to add elements at the same index. The method returns an array of the removed elements, or an empty array if no elements were removed.

      1
      2
      3
      //Pushing new array at specific index
      fruits.splice(1, 0, 'grape');
      console.log(fruits); // ['banana', 'grape', 'pear', 'orange']

      Here, the splice() method inserts the string ‘grape’ into the fruits array at index 1, pushing the original element at index 1 and subsequent elements back by one index.

    11. slice()
    12. The slice() method returns a new array containing a portion of an existing array. The portion is specified by the starting and ending indexes, which are passed as arguments to the method. The starting index is inclusive, and the ending index is exclusive. If no arguments are passed, the method returns a copy of the entire array. The original array is not modified.

      1
      2
      3
      //Copy a range of elements to a new array
      let newArray = fruits.slice(1, 3);
      console.log(newArray); // ['grape', 'pear']

      Here, the slice() method creates a new array called `newArray` that contains the elements of the fruits array from index 1 up to, but not including, index 3.

    13. indexOf()
    14. The indexOf() method returns the index of the first occurrence of a specified element in an array:

      1
      2
      3
      //Get the index number by value in Array
      let index = fruits.indexOf('pear');
      console.log(index); // 1

      Here, the indexOf() method returns the index of the string ‘pear’ in the fruits array, which is 1.

    Conclusion

    JavaScript arrays are a powerful data structure that allows developers to store and manipulate lists of data in a single variable. They are used extensively in web development and are a fundamental concept to understand. In this article, we explored how to create and manipulate arrays in JavaScript, as well as some of the most commonly used array methods. With this knowledge, you should be well-equipped to work with arrays in your own JavaScript projects.

    Arrays javascript js
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp

    Related Posts

    Configure Postfix to Use Gmail SMTP on Ubuntu & Debian

    PHP Arrays: A Beginner’s Guide

    Deploying Flask Application on Ubuntu (Apache+WSGI)

    Add A Comment

    Leave A Reply Cancel Reply

    Advertisement
    Recent Posts
    • Configure Postfix to Use Gmail SMTP on Ubuntu & Debian
    • PHP Arrays: A Beginner’s Guide
    • Deploying Flask Application on Ubuntu (Apache+WSGI)
    • OpenSSL: Working with SSL Certificates, Private Keys and CSRs
    • How to Create and Read List in Python
    Facebook Twitter Instagram Pinterest
    © 2023 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.