Array

 

• An array is a collection of items or different data types which are ordered and changeable(modifiable). 

How to create an empty array

•  we can create an array in different ways. 

   let arr1 = new Array();

   let arr2 = [];

How to create an array with values

    const numbers = [0, 3.14, 9.81, 37, 98.6, 100]

    // array of numbers

    const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node',

    'MongoDB'] // array of web technologies

    // Print the array and its length

    console.log('Numbers:', numbers)

    console.log('Number of numbers:', numbers.length)

    console.log('Web technologies:', webTechs)

    console.log('Number of web technologies:', webTechs.length)

    //output

    Numbers: [0, 3.14, 9.81, 37, 98.6, 100]

    Number of numbers: 6

    Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux',

    'Node', 'MongoDB']

• The array can have items of different data types

const arr = [

    'Naveen',

    250,

    true,

    { country: 'India', city: 'Mumbai' },

    { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] }

] // arr containing different data types

console.log(arr)

Accessing array items using index

• We access each element in an array using their index. An array index starts from 0

    const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node',

    'MongoDB']

    let access_array = webTechs[0]

    //We are accessing the first item using its index.

    console.log(access_array ) // HTML

    let access_array = webTechs[1] // CSS

    console.log(access_array)

    let LastIndex = webTechs.length-1;

    LastIndex = webTechs[LastIndex]

    console.log(LastIndex)

    const numbers = [0, 3.14, 9.81, 37, 98.6, 100]  

    // set of numbers

    console.log(numbers.length)  // => to know the size of the array, which is 6

    console.log(numbers)         // -> [0, 3.14, 9.81, 37, 98.6, 100]

    console.log(numbers[0])      //  -> 0

    console.log(numbers[5])      //  -> 100

    

    let lastIndex = numbers.length - 1;

    console.log(numbers[lastIndex]) // -> 100

    console.log(numbers.at(-1)); // New way to find the lenght

    of the array.

Modifying array element

• An array is mutable(modifiable). Once an array is created, we can modify the contents of the array elements.

    const numbers = [1, 2, 3, 4, 5]

    numbers[0] = 10      // changing 1 at index 0 to 10

    numbers[1] = 20      // changing  2 at index 1 to 20

    console.log(numbers) // [10, 20, 3, 4, 5]

Looping Over an Array:

    

    let cities = ["Mumbai", "Delhi", "hyd", "Kolkata", "Orisa"];

    for (let i = 0; i < cities.length; i++) {

        console.log(` index value ${i} and ${cities[i]}`)

    }

Methods to Manipulate Array

fill: Fill all the array elements with a static

    const arr = Array() // creates an an empty array

    console.log(arr)

    const eight0values = Array(8).fill(0)

    //It creates eight element values filled with '0'

    console.log(eight0values) // [0, 0, 0, 0, 0, 0, 0, 0]

    const four4values = Array(4).fill(4)

    //It creates 4 element values filled with '4'

    console.log(four4values) // [4, 4, 4, 4]

concat: To concatenate two array

    

    const first_list = [1, 2, 3]

    const second_list = [4, 5, 6]

    const third_list = first_list.concat(second_list)

    console.log(third_list) // [1, 2, 3, 4, 5, 6]

Length: To know the size of the array

    const numbers = [1, 2, 3, 4, 5]

    console.log(numbers.length) // -> 5 is the size of the array

indexOf: To check if an item exists in an array. If it exists it returns the index else it returns -1.

    const numbers = [1, 2, 3, 4, 5]

    console.log(numbers.indexOf(5)) // -> 4

    console.log(numbers.indexOf(0)) // -> -1

    console.log(numbers.indexOf(1)) // -> 0

    console.log(numbers.indexOf(6)) // -> -1

lastIndexOf: It gives the position of the last item in the array. If it exists, it returns the index else it returns -1.

    const numbers = [1, 2, 3, 4, 5, 3, 1, 2]

    console.log(numbers.lastIndexOf(2)) // 7

    console.log(numbers.lastIndexOf(0)) // -1

    console.log(numbers.lastIndexOf(1)) //  6

    console.log(numbers.lastIndexOf(4)) //  3

    console.log(numbers.lastIndexOf(6)) // -1

includes: To check if an item exists in an array. If it exists it returns the true else it returns false.

    const numbers = [1, 2, 3, 4, 5]

    console.log(numbers.includes(5)) // true

    console.log(numbers.includes(0)) // false

    console.log(numbers.includes(1)) // true

    console.log(numbers.includes(6)) // false

Array.isArray: To check if the data type is an array

    const numbers = [1, 2, 3, 4, 5]

    console.log(Array.isArray(numbers)) // true

    const number = 100

    console.log(Array.isArray(number)) // false

toString: Converts array to string

    const numbers = [1, 2, 3, 4, 5]

    console.log(numbers.toString()) // 1,2,3,4,5

join: It is used to join the elements of the array, the argument we passed in the join method will be joined in the array and returned as a string. 

    

    const numbers = [1, 2, 3, 4, 5]

    console.log(numbers.join()) // 1,2,3,4,5

Slice: To cut out multiple items in the range. It takes two parameters: starting and ending position. It doesn't include the ending position.

    const numbers = [1,2,3,4,5]

    console.log(numbers.slice()) // -> it copies all  item

    console.log(numbers.slice(0)) // -> it copies all  item

    console.log(numbers.slice(0, numbers.length)) // it copies all  item

    console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position

Splice: It takes three parameters: Starting position, number of times to be removed, and number of items to be added.

    const numbers = [1, 2, 3, 4, 5]

    numbers.splice()

    console.log(numbers)                // -> remove all items

    const numbers = [1, 2, 3, 4, 5]

    numbers.splice(0,1)

    console.log(numbers)            // remove the first item

    const numbers = [1, 2, 3, 4, 5, 6]

    numbers.splice(3, 3, 7, 8, 9)

    console.log(numbers.splice(3, 3, 7, 8, 9))  

    // -> [1, 2, 3, 7, 8, 9]

    //it removes three items and replaces three items

Push: adding item in the end. we use the push method.

    const arr  = ['item1', 'item2','item3']

    arr.push('new item')

    console.log(arr)

    // ['item1', 'item2','item3','new item']

pop: Removing item in the end.

    const numbers = [1, 2, 3, 4, 5]

    numbers.pop() // -> remove one item from the end

    console.log(numbers) // -> [1,2,3,4]

shift: Removing one array element at the beginning of the array.

    const numbers = [1, 2, 3, 4, 5]

    numbers.shift() // -> remove one item from the beginning

    console.log(numbers) // -> [2,3,4,5]

unshift: Adding array element at the beginning of the array.

    const numbers = [1, 2, 3, 4, 5]

    numbers.unshift(0) // -> add one item from the beginning

    console.log(numbers) // -> [0,1,2,3,4,5]

reverse: reverse the order of an array.

    const numbers = [1, 2, 3, 4, 5]

    numbers.reverse() // -> reverse array order

    console.log(numbers) // [5, 4, 3, 2, 1]

sort: arrange array elements in ascending order.

    const webTechs = [

      'HTML',

      'CSS',

      'JavaScript',

      'React',

      'Redux',

      'Node',

      'MongoDB'

    ]

    webTechs.sort()

    console.log(webTechs)

    // ["CSS", "HTML", "JavaScript", "MongoDB", "Node",

    "React", "Redux"]