JavaScript Array Methods

Alex's photo
Alex
·

6 min read

The JavaScript Array class is a global object that is used in the construction of arrays which are high-level, list-like objects.

The strength of JavaScript arrays lies in the array methods. Array methods are built-in JavaScript methods that make coding easier and also make your code looks clean and easy to understand.

Declare an Array in JavaScript

There are two syntax's for creating an empty array.

// First Syntax
let arr = new Array();//Second Syntax
let arr = [];
const fruits = ["Apple", "Orange","Plum"];

Almost all the time, the second syntax is used. We can supply initial elements in square brackets.

Array Methods

Now that we have declared our array, let’s dive into Array methods:

  1. map()

This method creates a new array with the results of calling a function for every array element. It calls the provided function once for each element in an array, in order.

Example:

const numbers = [5, 10, 15, 20];
const numbersMap = numbers.map(element => element * 5);
console.log(numbersMap); //[25, 50, 75, 100];

2. shift()

This method removes the first element of an array, and returns the new length. It changes the original array.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];
fruits.shift();
console.log(fruits); // ['Mango','Orange','Banana']

3. copyWithin()

This method copies array elements to another position in the array, overwriting the existing values.

This method will never add more items to the array.

Example:

const numbers = [1,2,3,4];
const numbersCopy = numbers.copyWithin(2,0);
console.log(numbersCopy); // [1,2,1,2];

4. every()

This method checks every element in the array that passes the condition, returning true or false as appropriate.

If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values).

If no false occur, every() returns true.

Example:

const numbers = [1,2,3,4];
const isGreaterThanFive = numbers.every(num => num > 5);
console.log(isGreaterThanFive); // falseconst isLessThanFive = numbers.every(num => num < 5);
console.log(isLessThanFive); // true

5. fill()

This method fills the specified elements in an array with a static value. We can specify the position of where to start and end the filling. If not specified, all the elements will be filled.

This method overwrites the original array.

Example:

const withoutStartEnd = [1,2,3,4];
withoutStartEnd.fill(5);
console.log(withoutStartEnd); //[5,5,5,5]const withoutEnd = [1,2,3,4];
withoutEnd.fill(5,2);
console.log(withoutEnd); //[1,2,5,5]const withStartEnd = [1,2,3,4];
withStartEnd.fill(5,1,2);
console.log(withStartEnd); //[1,5,3,4]

6. filter()

This method creates an array filled with all array elements that passes a condition inside the provided function.

Example:

const numbers = [1,2,3,4];
const filtered = numbers.filter(element => element === 2);
console.log(filtered); //[2]

7. find()

This method returns the value of the first element in an array that passes a condition. It executes the function once for each element present in the array.

Example:

const numbers = [10,20,30,40];
const findNumber = numbers.find(element => element < 30);
console.log(findNumber); // 10

8. findIndex()

This method returns the index of the element in an array that passes a condition. It executes the function once for each element present in the array.

If the condition fails, it simply returns -1.

Example:

const numbers = [1,2,3,4];
const indexFound = numbers.findIndex(element => element === 3);
console.log(indexFound); //2const indexNotFound = numbers.findIndex(element => element === 5);
console.log(indexNotFound); // -1

9. indexOf()

This method searches the array for the specified item, and returns it’s position. The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array.

If the item is not found, it simply returns -1.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];
const indexFound = fruits.indexOf('Mango');
console.log(indexFound); // 1const indexNotFound = fruits.indexOf('Pineapple');
console.log(indexNotFound); // -1

10. includes()

This method determines whether an array contains a specified element. If the array contains the element, it returns true, and false if not.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];
const fruitsInclude = fruits.includes('Mango');
console.log(fruitsInclude); // true

11. splice()

This method adds/remove items to/from an array, and returns the removed item(s).

Example: Add items to array.

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // ['Apple', 'Mango', 'Lemon', 'Kiwi', 'Orange', 'Banana']

Example: Remove item from array

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];
fruits.splice(2, 1);
console.log(fruits); // ['Apple', 'Mango', 'Banana']

12. slice()

This method returns the selected elements in an array, as a new array object.

This method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];
const newFruits = fruits.slice(1, 3);
console.log(newFruits); // ['Mango', 'Orange']

Thank you for reading.....

@prestical...

Prestical Software: Bringing Your Ideas to Life Through Custom Web and Mobile Apps

Prestical Software is a leading software development company specializing in crafting custom web and mobile applications that meet your unique needs and exceed your expectations. We are a team of passionate and experienced developers who are committed to helping businesses of all sizes achieve their goals through the power of technology.

What We Do

We offer a wide range of services, including:

  • Web App Development: We develop web applications that are tailored to your specific business needs, from simple e-commerce websites to complex enterprise applications.

  • Mobile App Development: We create iOS and Android apps that are engaging, user-friendly, and designed to drive results.

  • Software Consulting: We work with you to understand your business needs and recommend the best software solutions to help you achieve your goals.

  • Software Maintenance and Support: We provide ongoing maintenance and support for your web and mobile apps to ensure they are always up-to-date and running smoothly.

Why Choose Prestical Software?

There are many reasons why you should choose Prestical Software for your web and mobile app development needs:

  • Experience: We have over 10 years of experience developing web and mobile apps for a wide range of clients.

  • Expertise: Our team of developers is highly skilled and experienced in all the latest web and mobile technologies.

  • Customer Focus: We are committed to providing our clients with exceptional customer service and support.

  • Results-Oriented: We are focused on helping our clients achieve their business goals through the use of technology.

Contact Us Today

If you are looking for a reliable and experienced software development company to help you bring your ideas to life, contact Prestical Software today. We offer a free consultation to discuss your project and how we can help you achieve your goals.

In addition to the above, you may also want to consider including the following on your SEO page:

  • Case studies: Showcasing your successful projects can help build trust and credibility with potential clients.

  • Testimonials: Positive feedback from your clients can also be a powerful sales tool.

  • Blog: Regularly publishing informative and engaging blog posts can help you attract organic traffic and establish yourself as a thought leader in your industry.

  • Social media: Being active on social media can help you connect with potential clients and build brand awareness.

I hope this gives you a good starting point for creating an SEO page for Prestical Software. Please let me know if you have any other questions.

Please note that this is just a draft, and you may need to customize it to fit your specific needs. I recommend doing some keyword research to identify the terms that your target audience is searching for, and then incorporating those terms into your page content.

JavaScriptarray methodsPractical