JavaScript - basic array operations with examples
Tags: javascript, webdev, beginners, programming
Published: 2022-03-31 09:43:10

##Have you ever had any difficulties using basic array methods in JavaScript?
In today's post I will try to explain the basic operations on arrays as simply as possible, stay tuned! 🔥

__Before we start__, I would highly recommend you to check out the __runnable examples__ for the solution on our website:
[JavaScript - basic array operations](https://dirask.com/posts/DWkYOD)

###Below I've presented the six most common methods used on arrays that you may find useful:
- `map()`
- `filter()`
- `find()`
- `fill()`
- `some()`
- `every()`

###1. `map()` method
In this example, I've used the `map()` method to create a new array filled with the results of calling a provided function on every element in the calling array.
```javascript
const array1 = ['🟦', '🟦', '🟦', '🟦'];

const array2 = array1.map((item) => '🔵');

console.log('array1: ' + array1);
console.log('array2: ' + array2);
```
Output:
```
array1: 🟦,🟦,🟦,🟦
array2: 🔵,🔵,🔵,🔵
```

###2. `filter()` method
In this example, I've used the `filter()` method to create a new array filled with all elements that pass the test implemented by the provided function.
```javascript
const array1 = ['🟦', '🔵', '🟦', '🟦'];

const array2 = array1.filter((item) => item == '🟦');

console.log('array1: ' + array1);
console.log('array2: ' + array2);
```
Output:
```
array1: 🟦,🔵,🟦,🟦
array2: 🟦,🟦,🟦
```

###3. `find()` method
In this example, I've used the `find()` method to get the first element in the provided array that satisfies the provided testing function.
```javascript
const array = ['🟦', '🟦', '🔵', '🔵'];

const item = array.find((item) => item == '🔵');

console.log('array: ' + array);
console.log('item: ' + item);
```
Output:
```
array: 🟦,🟦,🔵,🔵
item: 🔵
```
>📝 Note:

>If there's no value that satisfies the testing function, undefined is returned.

###4. `fill()` method
In this example, I've used the `fill()` method to change all elements in an array to a specific value, from a start index `1` (default is `0`) to an end index (default `array.length`).
```javascript
const array = ['🟦', '🟦', '🟦', '🟦'];
console.log('array: ' + array);

array.fill('🔵', 1); // filling since index 1
console.log('array: ' + array);

array.fill('🔵');    // filling since index 0
console.log('array: ' + array);
```
Output:
```
array: 🟦,🟦,🟦,🟦
array: 🟦,🔵,🔵,🔵
array: 🔵,🔵,🔵,🔵
```

###5. `some()` method
In this example, I've used the `some()` method to test whether at least one element in the array passes the test implemented by the provided function. The method returns `true` if, in the array, it finds at least one element for which the provided function returns `true`.
```javascript
const array = ['🟦', '🔵', '🟦', '🔵'];

const result = array.some((item) => item == '🟦');

console.log('array: ' + array);
console.log('result: ' + result);
```
Output:
```
array: 🟦,🔵,🟦,🔵
result: true
```

###6. `every()` method
In this example, I've used the `every()` method to test whether all elements in the array pass the test implemented by the provided function. The method returns `true` or `false`.
```javascript
const array = ['🟦', '🟦', '🟦', '🔵'];

const result = array.every((item) => item == '🔵');

console.log('array: ' + array);
console.log('result: ' + result);
```
Output:
```
array: 🟦,🟦,🟦,🔵
result: false
```
You can run these examples [here](https://dirask.com/posts/DWkYOD)

If you found this solution useful let me know in the comment section or just leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜
_____________
## Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on [dirask.com -> Questions](https://dirask.com/questions)