Art of Array Manipulation in JavaScript.
Tags: javascript, beginners
Published: 2023-02-11 22:13:14

As a JavaScript developer, you know that working with arrays is a critical component of your skill set. In this article, I'll be sharing time-saving functions that I use on a daily basis.

## [Array.map](http://Array.map)()

* `map` takes a callback function to modify/change each item of an array and returns a new array with the changes.
    

```js
const numbers = [1, 2, 3, 4, 5]

const sqraredNumbers = numbers.map((num)=> num * num )

console.log(sqraredNumbers) // Expected Output: [1, 4, 9, 16, 25]
```

That means, if each item of the array is an object, we can use object properties on the item if each item of the array is an object. For example,

```js
const person = [{name: "Peter", age: 30}, {name: "John", age: 25}, {name: "Ernest", age: 40}]

// extract names. 
const name = arr.map((obj)=> obj.name) // Output: ['Peter', 'John', 'Ernest']
// extract age
const age = arr.map(obj => obj.age) // Output: [30, 25, 40]
```

> In the above example, we have a `person` array with objects as items. Each item has `name` and `age` property. Using the map function, for each item of the array, we first grabbed the name and then age.

* To re-create an array of objects with keys and values you can do the following.
    

```javascript
const name = ['Peter', 'John', 'Ernest'];
const age = [30, 25, 40]
const newObject = []; .

// using for loop. 

for (let i = 0; i < name.length; i++) {
    
const reconstructedObject = {name: name[i], age: age[i]} 
newObject.push(reconstructedObject) // push the array 
    
}

// using forEach 
name.forEach((element, index) => {
	const reconstructedObject = { name: element, age: age[index]}
newObject.push(reconstructedObject)
})

//Side Note:  if you want to make name key and the age it's value, //then just do this. 

name.forEach((element, index ) => newObject[element] = age[index])
// Output: [Peter: 30, John: 25, Ernest: 40]
```

## Array.filter()

* Filters: Returns/Outputs the new array based on the filtering criteria you provide on the callback function.
    

```js
let arr = ['Kabul', 'Zalalabad', 'Interesting City', 1, 2, 3, 3, 'kabul']

let strArr = arr.filter(item => typeof item === "string") 
console.log(strArr)
// expected output: 
//['Kabul', 'Zalalabad', 'Interesting City', 'kabul']

let numArr = arr.filter(item => typeof item === "number")

// expected output: [1, 2, 3, 3]
```

* In the example above, each array item is checked based on whether the item is a string or a number. Then, the filter property filters out the array based on the callback function provided.
    

## Array.reduce().

As the name suggests, `array.reduce()` reduces an array to a single value. It is a powerful recursive method (a function that calls itself until the desired result is achieved). It can get complicated quickly but here is my attempt to simplify it.

* Reduce takes **a callback function** with two arguments: `sum` and `currentValue` and an optional **initial value**.
    
    * `sum` also known as accumulator, accumulates all the values from the previous call. If the array contains numbers, reduce function outputs a single value. If the array contains a string, it will join all the strings together.
        
    * The Initial value is optional. If provided, `sum` is set to the initial value. If this is not provided, `sum` is set to the first item of the array.
        

```js
const message = ["I ", "am", "learning", "JavaScript"];

// No initial Value. So here: sum = "I". 
const reducedMessage = message.reduce((sum, currentValue)=>{
	return sum + currentValue
})
// Expected Output: I am learning Javascript
```

reduce example with an initial value

```js

const message = ["I ", "am", "learning", "JavaScript"];

// With initial Value. So, sum = "Hello everyone!"
const reducedMessage = message.reduce((sum, currentValue)=>{
	return sum + currentValue
}, "Hello everyone! ")

// Expected Output: Helo everyone! I am learning Javascript
```

Since the `sum` is set to the initial value, we can set the sum to an empty array by passing an empty array in place of the initial value.

```javascript
let arr = ['Kabul', 'Zalalabad', 'Interesting City', 'kabul']

// Here, sum = []. 
let lowerCasedArrays = strArr.reduce((sum, currentValue) => {
    sum.push(currentValue.toLowerCase());
    return sum
}, [])
// expected output. 
//['kabul', 'zalalabad', 'interesting city', 'kabul']
```

* Explainer:
    
    * Above `sum` is set to an empty array: `sum = []`. That means, we can use array methods with sum. Therefore, `sum.push` is a valid method.
        
    * `currentValue` is each item of the array `arr`
        
    * `toLowerCase()` method takes a string and converts all to lower case.
        
    * return `sum` returns the array.
        

> You could use `map`, `forEach`, `for` or many other methods to achieve this result instead of `reduce`. That might be desired since `reduce` can be complicated to understand, especially for beginners.

## set()

* In Javascript, `Set` object is a collection of unique values. So, anytime you need to filter out an array based on unique values, you would use, set.
    

```js
let totallyUniqueArr = [...new Set(lowerCasedArrays)]
console.log(totallyUniqueArr)

// expected output. 
// ['kabul', 'zalalabad', 'interesting city']
```

* `new Set` outputs the following, which is not a valid javascript object. So, I used the spread operator to spread/distribute the value of this object to the array.
    

```js
new Set(["kabul", "zalalabad", "interesting city"]). 
// Expected Output: {"kabul", "zalalabad", "interesting city"}
```

## Other simple methods.

There are multiple other methods, that are simple to understand and use.

```js
let arr = ["Denver", "Chicago", "New York", "Houston"]
```

* `array.shift()`: Get the first item of the array. But, it changes the length of the original array.
    

```js
arr.shift() // Output: Denver
```

* `array.pop()`: Get the last item of the array. But, it changes the length of the original array.
    

```js
arr.pop() // Output: Houston
```

* [`array.at`](http://array.at)`()`: Pass `0` to get the first item and pass `-1` to get the last item of the array. This method does not change the length of the array.
    

```js
arr.at(0) // Output: Denver
arr.at(-1) // Output: Houston
```