DEV Community: Adam Preece

Destructuring arrays in JavaScript (also with added rest and spread!)

Adam Preece — Wed, 23 Mar 2022 20:59:08 +0000

A great technique and feature of JavaScript is the ability to destructure an object.

This article will look at what we can do with arrays.

To get the full benefit of this, cut and past the code (or make your own up) and play with it on here

What is destructuring?

A great question! Simply put:

It is an expression that gives us the programmer the ability to get value from the array and save them as variables.

You may want the first and second number from this array, so sensibly you would do the below:

const arrayOfNumbers = [4, 6, 2, 11, 16]

const firstNumber = arrayOfNumbers[0] //4
const secondNumber = arrayOfNumbers[1] //6

However, this is long-winded! What happens if you wanted the third and fifth as well.

Let us destructure the array

const arrayOfNumbers = [4, 6, 2, 11, 16]

const [first, second, third, fourth, fifth] = arrayOfNumbers
console.log(fourth)//11

So we start with a const or let.
We name our variables we want to use, then we put the square brackets around them (makes sense since it is an array).
Make sure you then equals it to the actual array!
We can access the variable the usual way.

What happens if I don't want all the numbers, is there a quicker way?

Yes, instead of giving the value in an array a variable name, we can skip it by leaving it blank. You still need the comma, or how would JavaScript know!

const arrayOfNumbers = [4, 6, 2, 11, 16]
//I just want the third and fifth number
const [third] = arrayOfNumbers

console.log(third, fifth)// 4,6 -- oh no! This doesnt work!

const [, , third, , fifth] = arrayOfNumbers
console.log(third,fifth) // 2,16

Well actually I want the first number and the rest in an array, how do I do that?

Well, you have actually answered your own question!

You use the REST parameter. THIS HAS TO BE THE LAST ELEMENT IN THE ARRAY YOU ARE GOING TO DESTRUCTURE

const arrayOfNumbers = [4, 6, 2, 11, 16]

const [first, ...others] = arrayOfNumbers
console.log(others) //[6,2,11,16]

const [first, ...others,fifth] = arrayOfNumbers
console.log(fifth) //Syntax error, Rest element must be last element

What about nested arrays? Can we destructure?

Hell yes!

Let us see the code!

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
const [zero, one, two, three, four, five, six, seven, eight, nine,ten,eleven,twelve] = nestedArray
console.log(three) // 4
console.log(eight) // undefined

Oh dear... that doesn't quite work. 'Three' here is actually '4'.
Why? Well zero = 0, one =1, two is =[2,3] and therefore three = 4. Test yourself on the others now!

So we need to destructure "two", but this is actually quite easy

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
const [zero, one, [two, three], four, [five, six, [seven, eight], nine,ten],eleven,twelve] = nestedArray
console.log(three) //3
console.log(eight) //8

As there are multiple arrays here, we can use multiple REST operators

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
console.log(rest) //[8]
console.log(restTwo) //[9,10]
console.log(restThree) //[11,12]

They all meet the main criteria of them being the last element in their particular level of the array.
p.s. you can call the 'rest' variables anything you like !

You have the rest variables as an array, but I just want the numbers!

There are numerous methods to do this, but a GREAT one is using the ... again!

Let me show you:

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
console.log(...rest, ...restTwo, ...restThree) //8 9 10 11 12

This SPREADS the array, but there is a limitation:

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray
const spread = ...restThree
console.log(spread);// unexpectedToken

This is not allowed!

But you can do other great things with the SPREAD operator:

Joining arrays

const nestedArray = [0, 1, [2, 3], 4, [5, 6, [7, 8], 9, 10], 11, 12]
let [zero,one,  [two, three],four, [five, six, [seven, ...rest], ...restTwo],
  ...restThree
] = nestedArray

// Usual method of merging an array CONCAT
const sequenceInAnArray = rest.concat(restTwo).concat(restThree)
console.log(sequenceInAnArray) //[8, 9, 10, 11, 12]

// USE OF SPREAD!
rest = [...rest, ...restTwo, ...restThree] 
console.log(rest) //[8, 9, 10, 11, 12]

This is a very powerful use and is used frequently. It is a great way of merging data. Make sure the rest is a LET though!

COPYING ARRAYS

A great way of making a new array and not MUTATING the original array is using the slice function (there are others).

You can also copy any array with the SPREAD operator

let pleaseCopyMe = ['a', 'b', 'c']
let okThen = [...pleaseCopyMe]
console.log(okThen)
console.log(pleaseCopyMe === okThen) // false! As they have different memory refernces

Well done for reaching the end. As a reward, he is a great tip!

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a)//?
console.log(b)//?

3 nice little JavaScript tips that you will want to use!

Adam Preece — Thu, 17 Mar 2022 14:21:36 +0000

Short circuiting

// instead of using the usual if statement
if (login.status) {
displayUser()
}

// use a technique called short circuit evaluation

login.status && displayUser()

This works because of the && (the logical AND which is read left to right), so if the first operand is true(login.status) then it will run the second operand (displayUser()).

If the first operand is false Javascript will 'short-circuit' as the AND will always be false and carry on reading the rest of the code!

This technique is especially import if using React as you cannot use IF/ELSE statements in JSX code.

Using an unary operator to turn a string into a number

// you may get an Id or some number as a string type

data.id = "3223"

// a quick and easy to turn it into a number

if(+data.id===3223) console.log("It is now a number!)

All you have to do is place a +(the operator) before your string(operand) and it converts the operand to a number.

There are more unary operators to use, like for example "++"
which adds 1 to its operand.

Another use tip with this is changing any negative number/string into a positive


console.log(-"-12") // 12!
console.log(--12) // 12

See what happens when you place a + or - operator before other operands such as true, null, false, NaN etc. Can you correctly predict?

Shortening multiple condition checking

We have all been there


if(input==="yes" || input ==="y"|| input ==="ok"){
//code to execute
}

It is long, you can miss an equals or just use one, you can forget to write input again. So if you find yourself needing to write some code similar to the above try this little JavaScript code!


if(["yes","y","ok"].includes(input)) {
//code to execute
}

The includes is a method for an array which returns a boolean, if it does not find any of the elements in the array it simply returns false.

10 essential resources for JavaScript developers

Adam Preece — Mon, 14 Mar 2022 19:52:09 +0000

InternetingIsHard

Great free lessons on HTML/CSS. I love the design of this!

Brad Traversy Design Repo

Has every possible thing needed to design your website in one really handy place. Essential!

JavaScript the Right Way

Lots of resources and information here. An essential place to start with any topics.

JavaScript in plain English

Great selection of articles about everything JavaScript related. Remember to log in and save your favourite ones!

GeeksforGeeks

Useful for

Data Structure and Algorithms
JavaScript quizzes/interview preparation
Reference for everything JavaScript related

Exercism

A great place to uhh exercise your demons with JavaScript(sorry!) or attempt the many coding challenges they have.

RegExr

Want to get better or learn regular expressions, well here is the perfect website to do just that!

David Walsh

A great blog website with so much in depth info and some very interesting articles. A wonderful read any time of the day. Read it now!

Serverless

Want to be server-less? Then start here.

JSFiddle

A better version place to online code than codepen. Yeah! I said that!

Anymore that you would like to share, then please comment below!

The javascript module pattern

Adam Preece — Wed, 09 Mar 2022 20:14:28 +0000

Please do not confuse this with modules that you import or export!

Key background knowledge :

use of _ for private methods/properties
IIFE
factory functions (see part1)

What is the javascript module pattern?

The module is very similar to a factory function where instead you make lots of objects, the module is wrapped in an IIFE and is given closure.

So how do we create a module?

(function() {
    // Any code here
  // All function and variables are scoped to this function
})();

This function is immediately invoked(called)

Lets create a usuable module.

const jsModule = (function() {
      const publicMethod = () =>  console.log('Hello World!');
    return {publicMethod}
})();

jsModule.publicMethod(); // outputs 'Hello World'

Even though it is immediately invoked we can still access its methods (via the return)

However a real good use of these IIFE type modules is make methods private.

const myModule = (function() {
  const _privateProperty = 'Hello World';

  const _privateMethod =() => console.log(_privateProperty);

  const publicMethod = () =>_privateMethod()
    return {publicMethod}

})();

myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

Even though the public method uses private methods we can any methods we return.

However see what happens when we try to access private properties and methods!

This gives us a way to create private methods and state!

The revealing module pattern

This is a popular way to use modules to organise code and to reveal properties and methods we want to make public

Example of the revealing module pattern:

const myModule = (function() {
  const _privateProperty = 'Hello World, I am a very private property';
  const publicProperty = 'I am a public property';

  const _privateMethod =() =>  console.log(_privateProperty)   

  const publicMethod = ()=> _privateMethod()
  return {publicMethod,publicProperty};
})();

myModule.publicMethod(); // 'Hello World....'
console.log(myModule.publicProperty); // 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure

You can have as many private/public methods you want.

So when do we use these modules?

Well if you were making a game, you would use the module pattern to load up anything you only wanted loading up once. For example any battle rules , the board game etc..

Then you would use factory functions/constructors for anything you need to make various copies of, say the players or the battles

Another added benefit

Since all the methods are nicely organised in the IIFE, they are also namespaced too.

For example if you had a method called battle, to call 'battle' you would have to use start.battle() or boss.battle() etc so these methods would not get confused

Conclusion

The module pattern is another great tool to have in your organising javascript box

Immediately invoked when loading (good for API!)
We can still access any methods that are returned in the module
Can be used to make method/properties private
Helps with the naming of methods/functions

Learning the reduce function part 3

Adam Preece — Mon, 07 Mar 2022 20:20:02 +0000

Let us continue our reduce journey and look at other useful ways to use the very powerful reduce function.

Here I have an list of blogs with title,author,url and likes keys, feel free to look at the articles!


const blogs = [
  {
    title: 'React Best Practices ',
    author: 'Jean-Marc Möckel',
    url: 'https://www.freecodecamp.org/news/best-practices-for-react/',
    likes: 7,
  },
  {
    title: 'A Complete Guide to Flexbox',
    author: 'Chris Coyier',
    url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/',
    likes: 5,
  },
  {
    title: 'Higher Order Functions In JavaScript',
    author: 'Vegibit',
    url: 'https://vegibit.com/higher-order-functions-in-javascript/',
    likes: 12,
  },
  {
    title: 'Node.js series Part 1. Create a Simple Web-Server with Node.js',
    author: 'Patrick Rottländer',
    url: 'https://patrick-rottlaender.medium.com/create-a-simple-web-server-with-node-js-6db13faab0f5',
    likes: 10,
  },
  {
    title: '5 Amazing GitHub Repos Every React Dev Should Know',
    author: 'Harshithrao',
    url: 'https://javascript.plainenglish.io/5-amazing-github-repos-every-react-dev-should-know-e893d7bfc261',
    likes: 0,
  },
  {
    title: '23 Places to Learn JavaScript in 2022',
    author: 'Niemvuilaptrinh',
    url: 'https://javascript.plainenglish.io/23-place-to-learn-javascript-2022-7c6b854928c2',
    likes: 2,
  },
]

I would like to know:

Which blog achieved the highest amount of likes
The actual number of the highest amount of likes

Which blog has the highest likes

So what do we want?

An object with all the info, but the one which has the highest likes.

So our reducer will need to the previous blog and the current blog and compare their likes.

pseudocode

So my thinking is if the current blog likes are greater than the previous blog we return the current blog

Else we return the previous blog

Let us code that in our reducer. Congrats!

function blogWithMostLikesReducer(previousBlog, currentBlog) {
  if (currentBlog.likes > previousBlog.likes) return currentBlog
  else return previousBlog
}

const blogWithMostLikes = blogs.reduce(blogWithMostLikesReducer)

The actual number of the highest amount of likes.

A bit tricker....

A challenge, why don't you try this before yourself.

Ask yourself what the end result should be

What should the starting value be?

What could we call the parameters on our reducer?

And write the pseudo-code

Then the actual code!

/
/
/
/
/
/
/

Did you get an answer?

If you did it a different way, great! Share it below!!!

I used a ternary here, but an if/else statement would also work nicely.

function highestLikesReducer(highestLikes, blog) {
    // I need to compare the highest likes with the blog likes, and I 
    // want to return a number with the highest likes or the new blog likes
  return blog.likes > highestLikes ? blog.likes : highestLikes
}
// I start with the first blog.likes number to compare
const highestLikes = blogs.reduce(highestLikesReducer, blogs[0].likes)
console.log(highestLikes)

Constructors vs Factory Functions!

Adam Preece — Sun, 06 Mar 2022 15:38:24 +0000

Constructors vs Factory Functions

(before you start look up objects if needed, and maybe function declarations/expressions)

(all the code for this post is here!)

These two elements of Javascript OOP (object-orientated programming) can be very useful to help you orgainse code effectively!

Part 1 - Constructors

Maybe you'd like to duplicate something (say films, books or even a new player in a game).

I would need a blue-print for every new player, say a name, an age, a mood(!?), strength, agilty, intelligence etc. It basically defines all the properties!

Let's make a constructor for a new player

function createPlayer(name,age,mood="content") {
 this.name=name;
 this.age=age;
 this.mood=mood;
 this.strength = Math.floor(Math.random() * 10) + 1;
 this.agility = Math.floor(Math.random() * 10) + 1;
 this.intelligence = Math.floor(Math.random() * 10) + 1;
 this.backgroundStory = function(){
   return `This new brave adventurer is called ${name} and is ${age} years old, ${name} is currently very ${mood}`
 }
 this.totalStats= function(){
     return this.agility + this.intelligence + this.strength
   }  
}

This is a function declaration and using the object literal method I can even add functions to my constructor(backgroundStory and totalStats)

Note you can also you something called prototypes too for defining the method/functions.

Now I can make as many players as I want

How do I do this? By calling the function createPlayer with the parameters?? Try it!
\
\
\
\
\
\
Does it work?
\
\
\
\
\
\
\

const player = new createPlayer("Thor",1000,"grumpy")
console.log(player)
const playerStory = player.backgroundStory()
const playerStats = player.totalStats()
console.log(playerStory,playerStats)

Notice I need the 'new' built in Javascript keyword to call the constructor function.

You can also access the player object properties by using player.name etc

Here I have also declared 2 variables to capture the constructor functions.

Part 2 - Factory Functions

Now, constructors are very useful but some say not to use them as they can be difficult to track down bugs

They look like a function , but they do not behave like one so it can cause many people, especially beginners, headaches (myself included!). It is so very easy to forget the new keyword.

An alternate way to create the above is to use factory functions.

So let us create one, for the above code:

const createPlayerFactory=(name,age,mood="content") =>{
  const strength = Math.floor(Math.random() * 10) + 1;
  const agility = Math.floor(Math.random() * 10) + 1;
  const intelligence = Math.floor(Math.random() * 10) + 1;
  const backgroundStory = () => {
    return `This new brave adventurer is called ${name} and is ${age} years old, ${name} is currently very ${mood}`
  }
  const totalStats = () => strength + agility + intelligence
  // Little ES2015 improvement here,simply creating an object!

  return {name,age,mood,strength,agility,intelligence,backgroundStory,totalStats}
}

This time I have used a function expression with the same parameters.

Notice there is no use of the "this" keyword (hooray!), and we have function expressions for the methods backgroundStory and totalStats.

Also ensure you return what you want to use. Here I have returned everything in an object (you don't need to return everything, as you can keep certain methods/properties private!)

Now how do we access all that wonderful stuff? By simply calling the function.

const player2 = createPlayerFactory("Athena", 235)
console.log(player2)
const playerStory2 = player2.backgroundStory()
const playerStats2 = player2.totalStats()
console.log(playerStory2,playerStats2)

Notice we don't need the new keyword here

We again can access properties by using player2.intelligence etc..

Possible mistakes

Forgetting the 'new' keyword (constructor only)
Calling a constructor/FF method wrongly
Not returning parameters/methods in a factory function

const player = createPlayer()

const playerStats = totalStats()

const createPlayerFactory=(name,age,mood="content") =>{
  const strength = Math.floor(Math.random() * 10) + 1;
  const agility = Math.floor(Math.random() * 10) + 1;
  const intelligence = Math.floor(Math.random() * 10) + 1;
  const backgroundStory = () => {
    return `This new brave adventurer is called ${name} and is ${age} years old, ${name} is currently very ${mood}`
  }
  const totalStats = () => strength + agility + intelligence

}
const player2 = createPlayerFactory("Athena",235)
const playerStats2 = player2.totalStats()

player2 will be undefined, and any method called will end up in various errors!

Conclusion

We have dicussed two methods of efficient code creation by using a constructor or a factory function.

this is especially poweful as we can create thousands of players by one block of code, thus reducing the chances of code error!

And is there another class way of doing all of the above? That involves a little synthetic sugar!

Thank you for reading,

Quality Pre

Learning the reduce function part 2

Adam Preece — Fri, 04 Mar 2022 15:16:08 +0000

A really useful way to use reduce is over arrays of objects(i.e. when getting data from API's!)

Using reduce with an object

const players = [
  { name: 'Salah', price: 200000000, position: 'attack' },
  { name: 'Son', price: 130000000, position: 'attack' },
  { name: 'Kane', price: 170000000, position: 'attack' },
  { name: 'VVD', price: 115000000, position: 'defence' },
  { name: 'Grealish', price: 70000000, position: 'midfield' },
  { name: 'Kante', price: 63000000, position: 'midfield' },
  { name: 'Rice', price: 135000000, position: 'midfield' },
  { name: 'Stones', price: 43000000, position: 'defence' },
]
// for currentValue i have named it player, for prevValue I have named it total

function positionReducer(total, player) {
  console.log(player.position, player.name, player.price)
}
// I need an object to be returned. so lets start with an empty value
const positionCounts = players.reduce(positionReducer, {})

check out the console.logs, before proceeding.

Now it might be useful to find the total price see part1 for how to do that

I think it would be useful to see how many midfielders,defenders or attackers I have returning as a single object example

"attack":6, "midfield":3

function positionReducer(total, player) {
  console.log(total, player.position, total[player.position])
  // increase the position by 1
  total[player.position]
    ? total[player.position]++
    : total[player.position] = 1
  //return
  return total
}

const positionCounts = players.reduce(positionReducer, {})
console.log(positionCounts)

So I get the result I want but what is happening here?

Check out the console.logs to see if you want to work it out for yourself. Why do I need the ternary operator?

So at the beginning I have an empty object therefore total[player.position] will be undefined.

This is falsy, so total[player.position] will be set to 1.

When it is returned the total now will be {"attack":1}

So the next position is an attack, it will now be truthy, so attack will be incremented.

But what happens when it loops to a 'defence' or 'midfield'?

Well we again get undefined, therefore it repeats the same sequence as above.

Challenges:

1) Rewrite the ternary operator using the OR operator

2) Can you find, using const totalCostOfPlayers =, the total price of the players?

3) Using the reducer ,from Q1 or the original one, add code so it only returns the positions of players that cost more than 75000000.

Scroll down for answers....

Extension, make you own object (or even download one from an API) and create your own reduce functions. This will be useful for finding out total number of say action films from a film API
.
.
.
.
.
.
.
.
Q1

 total[player.position] = total[player.position] + 1 || 1
  return total

const totalCostOfPlayers = players.reduce(
  (total, player) => total + player.price,
  0
)

if (player.price > 75000000) {
   total[player.position] = total[player.position] + 1 || 1

  }
return total

Learning the reduce function part 1

Adam Preece — Thu, 03 Mar 2022 13:22:49 +0000

I won't lie.
I struggle with reduce, even now!
But it is powerful and it is worth learning.

What is reduce?

function used on arrays/object
reduce will loop over every item
gives a single result

Let's start with a basic (and overly used!) usage:

Finding a total...

array = [3, 12, 14, 23, 2, 3, 2, 13, 0, 2, 234, 213]

const total = array.reduce((previousValue,currentValue,indexNumber,array)=> {
code here
},initialValue)

Reduce takes 4 arguments, for this example we will only need the first two. The initialValue will be zero.

const total = array.reduce((previousValue,currentValue)=>{
code here
},0)

Refactoring tip

To make it more easily readable I will make the 2 arguments into a callback function. This is sometimes called the 'reducer'

const total = array.reduce(reducerTotal, 0)

function reducerTotal(previousValue, currentValue) {
  console.log('Previous Value:', previousValue)
  console.log('CurrentValue:', currentValue)
  console.log('------')
}

Have a look what happens, change the 0..what happens?

Currently it is correctly looping, but we are not totalling the numbers.

Whatever you return is what the previousValue is going to be.

That is why we got 'undefined' as there was no function return.

Try to return something silly like "I love Reduce" and study what now happens!

Now let us actually add, to create our total so..

const total = array.reduce(reducerTotal, 0)

function reducerTotal(previousValue, currentValue) {
  return previousValue + currentValue
}
console.log(total)

Yes!

Challenges!

Use this reducer and caluclate an average(mean).
See if you can rewrite all the above into one line of code, maybe with an arrow function!
Create a new reducer, that takes a total amount of money say £1000 and your array are amounts of money that you spend. Reduce this to see how much you have left..

Scroll Down for answers(please try before!)
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

There may be other (and better ways!) Please share below!!


const oneLiner = array.reduce((prev, curr) => prev + curr)
console.log(oneLiner)

const average = array.reduce(reducerTotal, 0) / array.length

function reducerTotal(previousValue, currentValue) {
  return previousValue + currentValue
}

console.log(average)

spendings = [3, 12, 14, 23, 2, 3, 2, 13, 0, 2, 234, 213]
const money = 1000

const howMuchDoIHaveLeft = spendings.reduce(reducerTotal, money)

function reducerTotal(previousValue, currentValue) {
  return previousValue - currentValue
}

console.log(howMuchDoIHaveLeft)

You could also expand on this task, by adding a currency, rounding to 2 decimal places, even a warning check if your money goes below 0