slice – copying arrays
With shallow copying, it is enough to assign the value of another variable to the variable that stores the array.
const users = ["Alexander", "Timote", "Sergey"];
const users2 = users; // shallow copy
user2[1] = "Mike"; // change the second element
console.log(users); // ["Alexander", "Mike", "Sergey"] - the first array also changes
However, after a deep copy, both variables will still point to the same array.
If we want a new array to come out after copying, then we can use deep copying with slice() method:
const users = ["Alexander", "Timote", "Sergey"];
console.log(users); // ["Alexander", "Timote", "Sergey"]
const users2 = users.slice(); //deep copy
users2[1] = "Mike"; // change the second element
console.log(users); // ["Alexander", "Timote", "Sergey"]
console.log(users2); // ["Alexander", "Mike", "Sergey"]
In this case, after copying, the variables will point to different arrays, and we can change them separately from each other.
Arrays can also be copied using the ...spread:
Also, the slice method allows you to copy part of an array. To do this, it takes two parameters:
const users = ["Alexander", "Timote", "Sergey", "William", "John"];
const users2 = users.slice(1, 4);//specify the starting and ending index for copying
console.log(people); // ["Timote", "Sergey", "William"]
push – adds an element to the end of the array
const users = [];
users.push("Alexander");
users.push("Timote", "Sergey");
console.log(users); // ["Alexander", "Timote", "Sergey"]
pop() – fetch removes the last element from the array
const people = ["Tom", "Sam", "Bob", "Mike"];
const lastPerson = people.pop(); // remove the last element from the array
console.log(lastPerson); // Mike
console.log(people); // ["Tom", "Sam", "Bob"]
shift – retrieves and removes the first element from an array
const users = ["Alexander", "Timote", "Sergey"];
const user = users.shift(); // extract the first element from the array
console.log(user); //Alexander
console.log(users); // ["Timote", "Sergey"]
unshift – adds a new element to the beginning of the array
const user = ["Alexander", "Timote", "Sergey"];
user.unshift("Max");
console.log(user);// ["Max", "Alexander", "Timote", "Sergey"]
splice – removing an element by index
The splice() method removes elements from a specific index. For example, removing elements from the third index:
const users = ["Alexander", "Timote", "Bill", "Alice", "Kate"];
const usersdeleted = users.splice(3);
console.log(usersdeleted);// [ "Alice", "Kate" ]
console.log(users);// [ "Alexander", "Timote", "Bill" ]
If you pass a negative index, then the removal will be performed from the end of the array. For example, let’s remove the last element:
const users = ["Alexander", "Timote", "Bill", "Alice", "Kate"];
const usersdeleted = users.splice(-1);
console.log(usersdeleted); // [ "Kate" ]
console.log(users);// ["Alexander", "Timote", "Bill", "Alice"]
We can set the number of elements to remove. For example, let’s remove three elements from the first index:
const users = ["Alexander", "Timote", "Bill", "Alice", "Kate"];
const usersdeleted = users.splice(1, 3);
console.log(usersdeleted); // ["Timote", "Bill", "Alice"]
console.log(users); // ["Alexander", "Kate"]
Also, now we can insert new ones in place of the deleted elements:
const users = ["Alexander", "Timote", "Bill", "Alice", "Kate"];
const usersdeleted = users.splice(1, 3, "Sam", "Poul");
console.log(usersdeleted); // ["Timote", "Bill", "Alice"]
console.log(users); // ["Alexander", "Sam", "Poul", "Kate"]
concat – merge arrays
The concat() method is used to concatenate arrays. It returns the concatenated array as a result:
const men = ["Tom", "Sam", "Bob"];
const women = ["Alice", "Kate"];
const people = men.concat(women);
console.log(people); // ["Tom", "Sam", "Bob", "Alice", "Kate"]
join – concatenates array elements into one string
The join() method concatenates all the elements of an array into a single string using a specific delimiter, which is passed through parameter:
const users = ["Alexander", "Timote", "Bill"];
const usersToString = users.join("- ");
console.log(usersToString);// Alexander- Sam- Bob-
sort – sorts the array in ascending order
const users = ["Alexander", "Timote", "Bill"];
users.sort();
console.log(users);// ["Alexander", "Bill", "Timote"]
By default, the sort() method treats the elements of an array as strings and sorts them alphabetically. What can lead to unexpected results, for example:
const numbers = [200, 15, 5, 35];
numbers.sort();
console.log(numbers); // [15, 200, 35, 5]
In this case, we can customize the method by passing a sort function to it. We define the logic of the sort function themselves:
const numbers = [200, 15, 5, 35];
numbers.sort((a, b) => a - b);
console.log(numbers); // [5, 15, 35, 200]
The sort function gets two adjacent array elements. It returns a positive number if the first
The element must be before the second element. If the first element should be placed after the second, then returns a negative number. If the elements are equal, 0 is returned.
reverse – flips the array backwards
const people = ["Tom", "Sam", "Bob"];
people.reverse();
console.log(people); // ["Bob", "Sam", "Tom"]
indexOf, lastIndexOf – returns the first and last element of an array
const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
const firstIndex = people.indexOf("Tom");
const lastIndex = people.lastIndexOf("Sam");
const otherIndex = people.indexOf("Mike");
console.log(firstIndex); // 0
console.log(lastIndex); // 3
console.log(otherIndex); // -
If the element is not in the array, then the indexOf() and lastIndexOf() methods return -1 in this case.
includes – checks if there is a value in an array
If there is such a value, then the method returns true, if there is no value in the array, then false is returned:
const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
console.log(people.includes("Tom")); // true - Tom is in the array
console.log(people.includes("Kate")) // false - Kate is not in the array
The includes() method takes the index from which to start searching as its second parameter:
const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
console.log(people.includes("Bob", 2)); // true
console.log(people.includes("Bob", 4)) // false
When passing a negative value, the search starts from the end:
const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];
console.log(people.includes("Tom", -2)); // false - 2nd index from the end
console.log(people.includes("Tom", -3)) // true - 3rd index from the end
every – checks if all elements of an array meet a certain condition
If at least one element does not match the condition, then the every() method returns false.
const numbers = [1, -12, 8, -4, 25, 42];
const passed = numbers.every(n => n > 0);//check whether each element of the array is greater than 0
console.log(passed); // false - there are elements smaller than 0
some – whether at least one element matches the condition
const numbers = [1, -12, 8, -4, 25, 42];
const passed = numbers.some(n => n > 0);//we check if at least one element is greater than 0
console.log(passed); // true - there are several elements greater than 0
filter – filters an array by a given condition
It takes a condition function, but returns an array of those elements that match this condition:
const numbers = [1, -12, 8, -4, 25, 42];
const filteredNumbers = numbers.filter(n => n > 0);
console.log(filteredNumbers); // [1, 8, 25, 42]
forEach – iterate over the elements of an array and perform certain operations on them
The forEach() method takes as a parameter a function that has one parameter – the current element being iterated over array. And in the body of the function, various operations can be performed on this element.
const numbers = [1, 2, 3, 4, 5, 6];
numbers.forEach(n => console.log("Number square", n, "equals", n * n));
map – iterates over an array, performs operations, returns a new array
The map() method is similar to the forEach method, it also takes as a parameter a function that performs operations on the iterated elements of the array, but the map() method returns a new array with the results of operations on the array elements.
const numbers = [1, 2, 3, 4, 5, 6];
const newnumbers = numbers.map(n => n * n);
console.log(newnumbers); // [1, 4, 9, 16, 25, 36]
find – returns the first element of an array that matches some condition
The find method takes a condition function as a parameter:
const numbers = [1, 2, 3, 5, 8, 13, 21, 34];
//get the first element that is greater than 10
let found = numbers.find(n => n > 10);
console.log(found); // 13
findIndex – returns the index of the first array element that matches the condition
const numbers = [1, 2, 3, 5, 8, 13, 21, 34];
// get the index of the first element that is greater than 10
let foundIndex = numbers.findIndex(n => n > 10);
console.log(foundIndex); // 5
flat – simplifies nested arrays
This method from nested arrays translates elements into the outermost array of the top level.
const people = ["Tom", "Bob", ["Alice", "Kate", ["Sam", "Ann"]]];
const flattenPeople = people.flat();
console.log(flattenPeople); // ["Tom", "Bob", "Alice", "Kate", ["Sam", "Ann"]]
//["Sam", "Ann"] have 2 levels of nesting so they weren't converted
The flat() method only applies by default to nested arrays of the first nesting level. But we can transfer to nesting level method:
const people = ["Tom", "Bob", ["Alice", "Kate", ["Sam", "Ann"]]];
const flattenPeople = people.flat(2);
console.log(flattenPeople); // ["Tom", "Bob", "Alice", "Kate", "Sam", "Ann"]
If the array contains nested arrays of much deeper nesting levels, or we don’t even know which levels nesting is in the array, but we want all elements to be converted into one array, then we can use Infinity value.
From other author:
