Array Destructuring Methods in Javascript.

Array destructuring in Javascript allows us to ‘unpack’ values from arrays into distinct variables for users.

The below is a structure for basic destructuring;

let nums = [5,7,2,4];
console.log(nums);
let[a,b,c,d] = nums;

console.log(d);

//[5,7,2,4]
//4

‘d’ represents the fourth value, hence output is as seen above.

• We can also skip elements while destructuring by using a comma (,). In the below example, we are skipping the third value;

let nums = [5,7,2,4];
let[a,b,,d] = nums;

console.log(d);




//4

• It’s also possible to swap values using the array destructuring method. Example:

let a = 8;
let b = 2;

[a,b] = [b,a]
console.log(a,b);

//2 8

• The Split Method : We split the spring into an array of variables, then assign whichever we want to use.

let words = "Aisha is writing on Javascript".split(' ');
let[a,b,c,d,e] = words;

console.log(a,b);



//Aisha is

• Rest of the Elements Operator (...): it allows us capture the remaining elements of the array into a single variable. Examples;

let animals = ['cat', 'dog', 'goat', 'hen']
let[a,, ...d] = animals;

console.log(d);



//['goat', 'hen']

let words = "Aisha is writing a Javascript exam today".split(' ');
let [a,b,, ...d] = words;

console.log(d);



//['a', 'Javascript', 'exam', 'today']

• forEach Method: this method gives us one by one value, i.e. it takes one value , passes the value to a function, then we accept the passed value and perform our desired operation on it. Example:

let nums = [42,51,24,98,65,12];

nums.forEach(n=> {
  console.log(n*2);

})

//84
//102
//48
//196
//130
//24

Note: the forEach takes three parameters. We can pass the value(n), the index value and the array as it is(nums). Examples;

let nums = [42,51,24,98,65,12];

nums.forEach((n,i,nums)=> {
  console.log(n*2);

})

//84
//102
//48
//196
//130
//24

let nums = [42,51,24,98,65,12];

nums.forEach((n,i,nums)=> {
  console.log(n,i,nums);

})

//42 0 [42,51,24,98,65,12]
//51 1 [42,51,24,98,65,12]
//24 2 [42,51,24,98,65,12]
//98 3 [42,51,24,98,65,12]
//65 4 [42,51,24,98,65,12]
//12 5 [42,51,24,98,65,12]

• The filter map reduce method:

Filter creates a new array containing the elements that pass a test. Here, an element is taken as an argument and returns ‘true’ to include the element in the new array, ‘false’ if otherwise. Filter allows the value only if it’s true. Example:

let nums = [42,51,24,98,65,12];
nums.filter(n => n%2===0)
    .forEach( n=> {
                console.log(n);

  });

//42
//24
//98
//12

Map: takes a value and changes it. It could be doubling the value, subtracting it, finding the square root or even complex operations. While Filter takes an argument and checks for the condition, then sends the value ahead if it’s true, Map on the other hand simply takes a value and perform operations on it. Example:

let nums = [42,51,24,98,65,12];
nums.filter(n => n%2===0)    
    .map(n => n*2)
    .forEach( n=> {
                console.log(n);

  });



//84
//48
//196
//24

Reduce: Reduces an array to a single value. Example:

let nums = [1,2,3,4,5,6];

let result = nums.filter(n => n%2===0)    
    .map(n => n*2)
    .reduce((a,b) => a+b);

console.log(result);


//24

The above methods are very useful as they offer concise and functional ways to manipulate arrays in Javascript.

See you next time.