Posts.

5 Array Methods in JavaScript | Part 1 | Mastering JavaScript

Cover Image for  5 Array Methods in JavaScript | Part 1 | Mastering JavaScript
Rami Al-Karo
Rami Al-Karo

Hey and welcome to another video in Mastering JavaScript series in this video we gonna take look at 5 array methods and they are push, pop, find, isArray and some. understanding each one use cases, without further to say.

let's get start with first method which is push.

PUSH

The push() method is used to add one or more elements to the end of an array and returns the new length of the array. It mutates the original array by adding the specified element(s) to it. This method is commonly used to dynamically grow an array by appending new values to it.

Easy Example:
1 2 3 4 5 6 7 8 9 // Define an empty array let fruits = []; // Use push() to add elements to the array fruits.push("apple"); fruits.push("banana"); fruits.push("cherry"); console.log(fruits); // Output: ["apple", "banana", "cherry"]
Advanced Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Define an array of numbers let numbers = [1, 2, 3, 4, 5]; // Define a function to generate and push squares of numbers function pushSquares(arr, n) { for (let i = 1; i <= n; i++) { arr.push(i * i); } } // Use the pushSquares function to add squares of numbers up to 7 pushSquares(numbers, 7); console.log(numbers); // Output: [1, 2, 3, 4, 5, 1, 4, 9, 16, 25, 36, 49]

POP

the second method in list is the pop() method is used to remove and return the last element from an array. It mutates the original array by removing the last element.

Easy Example:
1 2 3 4 5 6 7 8 // Define an array of colors let colors = ["red", "green", "blue", "yellow"]; // Use pop() to remove and return the last color let lastColor = colors.pop(); console.log(lastColor); // Output: "yellow" console.log(colors); // Output: ["red", "green", "blue"]
Advanced Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // Define an array of tasks let tasks = [ { id: 1, description: "Write code", completed: false }, { id: 2, description: "Read documentation", completed: false }, { id: 3, description: "Test functionality", completed: true } ]; // Define a function to remove and return the last task function popLastTask(arr) { if (arr.length === 0) { return null; // Return null if the array is empty } else { return arr.pop(); } } // Use the popLastTask function to remove the last task let removedTask = popLastTask(tasks); console.log(removedTask); // Output: { id: 3, description: "Test functionality", completed: true } console.log(tasks); // Output: [{ id: 1, description: "Write code", completed: false }, { id: 2, description: "Read documentation", completed: false }]

FIND

next method, the find() method is used to search for the first element in an array that satisfies a given condition and returns that element. If no element satisfies the condition, it returns undefined.

Easy Example:
1 2 3 4 5 6 7 8 9 // Define an array of numbers let numbers = [1, 3, 5, 7, 9]; // Use find() to find the first even number let evenNumber = numbers.find(function (element) { return element % 2 === 0; }); console.log(evenNumber); // Output: undefined (no even number found)
Advanced Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Define an array of objects representing books let books = [ { id: 1, title: "The Catcher in the Rye", author: "J.D. Salinger" }, { id: 2, title: "To Kill a Mockingbird", author: "Harper Lee" }, { id: 3, title: "1984", author: "George Orwell" }, { id: 4, title: "The Great Gatsby", author: "F. Scott Fitzgerald" } ]; // Define a function to find a book by its title function findBookByTitle(title) { return books.find(function (book) { return book.title === title; }); } // Use the findBookByTitle function to find a book by title let book = findBookByTitle("1984"); console.log(book); // Output: { id: 3, title: "1984", author: "George Orwell" }

IsArray

fourth method, the Array.isArray() method is used to check if a given value is an array or not. It returns true if the value is an array and false otherwise.

Easy Example:
1 2 3 4 5 6 // Check if a variable is an array let fruits = ["apple", "banana", "cherry"]; let number = 42; console.log(Array.isArray(fruits)); // Output: true console.log(Array.isArray(number)); // Output: false
Advanced Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // Define a function that accepts an array and checks its type function processArray(arr) { if (Array.isArray(arr)) { console.log("Processing the array:", arr); // Perform array-specific operations here } else { console.log("Input is not an array:", arr); // Handle non-array input } } let myArray = [1, 2, 3]; let myString = "Hello, World!"; processArray(myArray); // Output: Processing the array: [1, 2, 3] processArray(myString); // Output: Input is not an array: Hello, World!

SOME

final method, the some() method is used to check if at least one element in an array satisfies a given condition. It returns true if at least one element meets the condition, otherwise, it returns false.

Easy Example:
1 2 3 4 5 6 7 8 // Check if there is at least one even number in an array let numbers = [1, 3, 5, 6, 7, 9]; let hasEvenNumber = numbers.some(function (element) { return element % 2 === 0; }); console.log(hasEvenNumber); // Output: true (6 is an even number)
Advanced Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Define an array of objects representing users let users = [ { id: 1, name: "Alice", isAdmin: true }, { id: 2, name: "Bob", isAdmin: false }, { id: 3, name: "Charlie", isAdmin: false }, { id: 4, name: "David", isAdmin: true } ]; // Check if there is at least one admin user let hasAdminUser = users.some(function (user) { return user.isAdmin === true; }); console.log(hasAdminUser); // Output: true (Alice and David are admin users)

conclusion

As we wrap up, I'd like to express my gratitude for your engagement up to this point. If you have any questions, please don't hesitate to ask in the video comments section. Also, if you find value in content, dot not forget to like video and subscribing to channel. Stay tuned for more exciting content in the future!


More Stories

Cover Image for  5 Array Methods in JavaScript | Part 3 | Mastering JavaScript

5 Array Methods in JavaScript | Part 3 | Mastering JavaScript

485 words - 2,754 characters

Rami Al-Karo
Rami Al-Karo
Cover Image for 5 Array Methods | Part 2 | Mastering JavaScript

5 Array Methods | Part 2 | Mastering JavaScript

907 words - 5,716 characters

Rami Al-Karo
Rami Al-Karo