Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
array Methods
In this lesson, you'll learn about various array methods in JavaScript, which provide powerful ways to manipulate and interact with arrays. We'll cover both basic and advanced methods, with examples to illustrate their use.
Array Methods
Arrays in JavaScript come with a variety of built-in methods that allow you to manipulate their data, such as adding or removing elements at certain positions. Let's take a look at some of the most basic and useful ones.
Basic Array Methods
Adds a new element to the end of the array.
const names = ["Jon", "Bob", "David"];
names.push("Mark");
console.log(names); // ["Jon", "Bob", "David", "Mark"]Removes the last element of an array and returns it.
const lastElement = names.pop();
console.log(lastElement); // "Mark"
console.log(names); // ["Jon", "Bob", "David"]Removes the first element of an array and returns it.
const firstElement = names.shift();
console.log(firstElement); // "Jon"
console.log(names); // ["Bob", "David"]Adds a new value to the start of an array and returns the new length.
names.unshift("Dean");
console.log(names); // ["Dean", "Bob", "David"]Adds or removes elements from any position in an array.
names.splice(1, 0, "Jenny");
console.log(names); // ["Dean", "Jenny", "Bob", "David"]Creates a new array containing elements from the start index up to, but not including, the end index.
const slicedNames = names.slice(1, 3);
console.log(slicedNames); // ["Jenny", "Bob"]Summary
Here's a code block that demonstrates these basic methods:
const names = ['Jon', 'Bob', 'David', 'Mark'];
// Array Push - Adds a new value to the end of the array.
names.push('Dean');
console.log(names); // ["Jon", "Bob", "David", "Mark", "Dean"]
// Array Pop - Deletes the last element of an array
const lastElement = names.pop();
console.log(lastElement); // "Dean"
console.log(names); // ["Jon", "Bob", "David", "Mark"]
// Array Shift - Deletes the first element of an array
const firstElement = names.shift();
console.log(firstElement); // "Jon"
console.log(names); // ["Bob", "David", "Mark"]
// Array Unshift - Adds a new value to the start of an array
names.unshift('Dean');
console.log(names); // ["Dean", "Bob", "David", "Mark"]
// Array Splice - It adds/removes values from any position of an array
names.splice(2, 0, 'Jenny', 'Johnny');
console.log(names); // ["Dean", "Bob", "Jenny", "Johnny", "David", "Mark"]
// Array Slice - Copies certain parts of an array into a newly created array
const slicedNames = names.slice(1, 3);
console.log(slicedNames); // ["Bob", "Jenny"]Advanced Array Methods
Returns a new array with all members of the current one and adds items to it.
const moreNames = ["Eve", "Frank"];
const allNames = names.concat(moreNames);
console.log(allNames); // ["Dean", "Bob", "Jenny", "Johnny", "David", "Mark", "Eve", "Frank"]Looks for an item starting from position , returns the index if found or if not found.
console.log(names.indexOf("Bob")); // 1Same as but starts from the end.
console.log(names.lastIndexOf("Bob")); // 1Returns if the array contains the value, otherwise returns .
console.log(names.includes("David")); // trueReturns the first element for which func returns a value.
const foundName = names.find(name => name.startsWith("D"));
console.log(foundName); // "Dean"Filters elements through , returning all values that make it return .
const filteredNames = names.filter(name => name.length > 3);
console.log(filteredNames); // ["Dean", "Jenny", "Johnny", "David"]Like , but returns the index of the first matched element.
const index = names.findIndex(name => name.startsWith("J"));
console.log(index); // 2Calls for every element. Does not return anything.
names.forEach(name => console.log(name));
// Logs: "Dean", "Bob", "Jenny", "Johnny", "David", "Mark"Creates a new array from the results of calling for every element.
const uppercasedNames = names.map(name => name.toUpperCase());
console.log(uppercasedNames); // ["DEAN", "BOB", "JENNY", "JOHNNY", "DAVID", "MARK"]Sorts the array in-place and returns it.
names.sort();
console.log(names); // ["Bob", "David", "Dean", "Jenny", "Johnny", "Mark"]Reverses the array and returns it.
names.reverse();
console.log(names); // ["Mark", "Johnny", "Jenny", "Dean", "David", "Bob"]Converts a string to an array.
const str = "apple,banana,cherry";
const fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "cherry"]Converts an array to a string.
const fruitString = fruits.join(", ");
console.log(fruitString); // "apple, banana, cherry"Calculates a single value over the array by calling for each element.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10Returns if any element passes the test implemented by .
const hasShortName = names.some(name => name.length < 4);
console.log(hasShortName); // trueReturns if all elements pass the test implemented by .
const allLongNames = names.every(name => name.length > 3);
console.log(allLongNames); // trueFills the array with a repeating value from index to .
const filledArray = new Array(3).fill("Hello");
console.log(filledArray); // ["Hello", "Hello", "Hello"]These examples provide a practical understanding of how each array method works, enabling you to effectively manipulate arrays in JavaScript.
Loading...
0 Comments
"Please login to view comments"
Upgrade your account