Manav Goyal

Array - Javascript

Basics

  • Type of array is a Object
  • Create Array
    • let variable = [n, "value", value] => Declare an array and can Initialize it with any type of value
    • let variable = new Array(value1, value2)
    • let variable = new Array(n) => Creates an array of n undefined elements
  • variable[N] => Access value in array
  • Methods
    • variable.length => Returns length of array
    • variable.toString() => Returns a string made by elements of array separated by comma
    • variable.isArray() => Returns boolean value if it is array or not
    • variable.join("value") => Returns a string made by joining all elements using given separator
    • variable.concat(variable1, variable2) => Concatenate the array passed to concat to the end of the array
      • variable.concat(variable1)
    • variable.indexOf(value) => Returns index of the value
    • variable.includes(value) Returns boolean value if element is present or not
    • variable.sort() => By default converts values into string and then sort according to dictionary
      • variable.sort(compare) => Compare should be a function
    • variable.slice(N1, N2) => Returns an array starting from index N1 to index of N2, but not including the last index
    • delete variable[N] => Deletes the element of the given index, Value becomes undefined, Length does not change
  • Array Manipulation => Modifies original array
    • variable.push(val) => Adds element at the end of the array, Returns length of array
      • variable.push(val1, val2) => Add more than 1 element
    • variable.pop() => Removes and Returns the last value from the array
    • variable.shift() => Removes and Returns first element from the array
    • variable.unshift(value) => Appends in the front and Returns length of array
    • variable.reverse() => Reverse the order of the elements in an array
    • variable.splice(N1, N2, value1, value2) => N1 is position to add, N2 is number of elements to remove, Then elements to be added, Returns array of deleted values

Loop Methods

  • for each
        variable.forEach((value, index, array) => {
        // Statements
    })
  • From => Make an array from HTML Collection/Object/String, Used to loop in DOM
        variable.from(var).forEach((element) => {
        // Statements
    })
  • find => Returns the elements which satisfies the condition
        variable.find((value, index) => {
        return condition;
    })
  • find index => Returns index number of that element
        variable.findIndex((value) => {
        return condition;
    })
  • Map => Loops through an Array and returns that modifies array
        variable.map((value, index, array) => (
        <div></div>
    ))
    variable.map((value, index, array) => {
        // Statements
        return (
            <div></div>
        )
    })
  • Filter => Returns elements of the array which satisfy the condition
        variable.filter((value) => {
        return condition;
    })
  • Reduce => Returns value by starting with the 2 values passed and updating with the return value of each iteration
        variable.reduce((value1, value2) => {
        return condition;
    })
  • in => Returns object keys and array index
        for(variable1 in variable) {
        // Statements
    }
  • of => Returns value of array/object
        for(variable1 of variable) {
        // Statements
    }
  • some => Checks if any array elements pass a test (provided as a callback function), At least one of the elements of the array satisfies the given condition or not
        variable.some(checkAdult);
    function checkAdult(age) {
        return age > 18;
    }
  • every => Check whether all the elements of the array satisfy the given condition or not
        variable.every(checkAdult);
    function checkAdult(age) {
        return age > 18;
    }

Destructuring

--

  • [variable1, variable2] = [value1, value2] => value1 & value2 will be assigned to variable1 & variable2 respectively
  • [variable1, variable2] = [value1, value2, value3, value4] => value1 & value2 will be assigned to variable1 & variable2 respectively
  • [variable1, , , variable4] = [value1, value2, value3, value4] => value1 & value4 will be assigned to variable1 & variable4
  • [variable1, variable2, variable3, ...variable4] = [value1, value2, value3, value4, value5, value6] => value1 & value2 & value3 will be assigned to variable1 & variable2 & variable3 respectively, Rest all to variable4 as array
  • value1 & value 2 & value3 will be assigned to variable1 & variable2 & variable3 respectively, Rest all to variable4 as an object
        {variable1, variable2, variable3, …variable4} = [
                                variable1: value1,
                                variable2: value2,
                                variable3: value3,
                                variable4: value4,
                                variable5: value5
                                ]
  • Spread Operator
    • variable = { ...[value1, value2, value3] } => Creates key-value pair and stores in variable
    • console.log({ ...variable, key: "value" }) => Only the given pair changes
Share: