Forem: Aaron

Three ways to use reduce in javascript

Aaron — Sat, 02 Nov 2019 13:40:08 +0000

In this video we explore the reduce method and demonstrate three different use cases you can use in your next JavaScript project.

Data used

export const eg1 = [1, 45, 2, 3, 34, 4];
export const eg2 = [
  {
    gender: "male",
    name: "Ed"
  },
  {
    gender: "male",
    name: "Bob"
  },
  {
    gender: "female",
    name: "Sarah"
  }
];
export const eg3 = [
  1,45,2,3,34,4,1,2,
  3,4,5,6,3,2,9
];

1 - sum all items in array

const one = eg1.reduce(
  (prev, current) => prev + current,0
);
console.log(one);
//outputs 189

2 - group items by type

const two = eg2.reduce(
  (obj, item) => ({
    ...obj,
    [item['gender']]: [
      /** check if exists
       * if it doesn't start with blank array
       */
      ...obj[item['gender']] || [],
      item
    ]
  }),
  {} //default value
);
console.log(two)
//outputs {male: Array[2], female: Array[1]}

3 - count how many times item in array

const three = eg3.reduce(
  (tally, item) => ({
    ...tally,
    [item]: (tally[item] || 0) + 1
  }),
  {}
);
console.log(three);
//outputs Object {1: 2, 2: 3, 3: 3, 4: 2, 5: 1…}

Conditional (ternary) operator in JavaScript

Aaron — Sat, 26 Oct 2019 09:32:36 +0000

This video shows how you can refactor your existing function using an if statement to a ternary operator.

In our example we create a function that returns true or false based on whether the number has at least 2 digits in it. Initially we do this using an if statement and at the end of the video we show the power of a ternary operator by doing it in a single line.

Have a great weekend!

Create a Cricket Points Table in Javascript - Part 2

Aaron — Thu, 24 Oct 2019 10:24:05 +0000

Overview

Click on the following links to read part1 of the series.

Follow @afewminutesofcode on Instagram and YouTube for video content for this series and view original article at afewminutesofcode.com

In this tutorial we are going to create a function to calculate when a team has won, lost or there is no result.

Initial Setup

We are going to develop our app in codesandbox so to begin we will head over to https://codesandbox.io/s/ and select the React Icon as shown below.

We are going to create some folders to structure our code.

data Contains all the matches from the tournament and can be viewed here.
helpers - We will create 3 files calcCompletedMatches, getOppTeam and constants.
points-table - We will create 3 files teamWon, teamLost, teamNoResult
tests - where we will add our unit tests.

Calculate Completed Matches

In our data structure we can tell a match is completed when fin === 1 and we also are only concerned about matches of type===1 (group matches). So we will create a helper function to filter out only completed matches for us.

export const calcCompletedMatches = (
  matches,
  teamNum,
  team
) =>
  matches.filter(
    match =>
      match[teamNum] === team &&
      match["type"] === 1 &&
      match["fin"] === 1
  );

We should expect our first test below to return 45 matches (all completed group matches) and our second test to return 9 the amount of matches where England where team1.

import { calcCompletedMatches } from "../helpers/calcCompletedMatches";
import { matches } from "../data/matches";

it("calcCompletedMatches", () => {
  expect(calcCompletedMatches(matches)).toHaveLength(45);
  expect(calcCompletedMatches(matches, "t1", "ENG")).toHaveLength(9);
});

Constants

We will use the below constants throughout the application to make our code more readable.

export const SHOW_TEAM = false;
export const SHOW_OPP = true;
export const WON = "won";
export const LOST = "lost";
export const DRAWN = "drawn";
export const POINTS = "points";
export const NORESULT = "nr";
export const TEAM1 = "t1";
export const TEAM2 = "t2";

getOppTeam

We will create a helper function to enable us to easily access the opposition team in our matches array.

import { TEAM1, TEAM2 } from "./constants";

export const getOppTeam = teamNum => teamNum === TEAM2 ? TEAM1 : TEAM2;

Tests

import { getOppTeam } from "../helpers/getOppTeam";

it("getOppTeam.", () => {
  expect(getOppTeam("t1")).toBe("t2");
  expect(getOppTeam("t2")).toBe("t1");
});

Calculate Matches Won

To see who has won from our data structure we will pass in four parameters.

matches
teamNum (t1,t2)
team eg ENG
stat (will always be Ru in this example but gives flexibility to extend in the future).

Then the below gets all the completed matches and returns an array of all the matches where the teams runs are greater than the opposition. Then returns the length.

import { calcCompletedMatches } from "../helpers/calcCompletedMatches";
import { getOppTeam } from "../helpers/getOppTeam";

export const teamWon = ({
  matches,
  teamNum,
  team,
  stat
}) => {
  const oppTeam = getOppTeam(teamNum);
  return calcCompletedMatches(
    matches,
    teamNum,
    team
  ).filter(
    match =>
      match[`${teamNum}${stat}`] >
      match[`${oppTeam}${stat}`]
  ).length;
};

Test - Our test returns all the matches ENG won as t1

import { teamWon } from "../points-table/teamWon";
import { matches } from "../data/matches";

it("teamWon.", () => {
  expect(
    teamWon({
      matches,
      teamNum: "t1",
      team: "ENG",
      stat: "Ru"
    })
  ).toBe(6);
});

Calculate Matches Lost

Our Matches Lost function will be very similar to the won function except instead of returning matches where runs is greater and opposition we will do where runs are less than opposition.

.filter(
    match =>
      match[`${teamNum}${stat}`] <
      match[`${oppTeam}${stat}`]
  )

Calculate No Results

To calculate matches with no result we change our filter to look for where NR === 1

.filter(match => match[`${teamNum}NR`] === 1)

In this lesson we have started to create the building blocks required for our points table application and in Part 3 we are going to create a function to handle the totals for the points standings eg P/W/L/NR/RF

To follow the code so far head over to codesandbox.

Create a Cricket Points Table in Javascript - Part 1

Aaron — Thu, 24 Oct 2019 10:16:26 +0000

Overview

In this Series we are going to cover how to use match data to build a cricket points table.

Follow @afewminutesofcode on Instagram and YouTube for video content for this series and view original article at afewminutesofcode.com

Part 1 (This article) we are going to look at the structure of the data we are going to be working with, the structure of our codebase, the final result and the tools we are going to use to build it.

Part 2 In Part 2 we are going to dive into the code and setup some constants to use in our various functions and create a function to calculate when a team has won, lost or if there was no result.

Part 3 In Part 3 we are going to create a function to handle the totals for the points standings eg P/W/L/NR/RF.

Part 4 In Part 4 we are going to create a function to calculate overs and Net Run Rate.

Part 5 In part 5 we are going to use the data structure we have made to render the UI with React and also sort the points table by points / wins / Net Run Rate.

Data Structure

Using the recent world cup as example data each match will have the below fields.

Assuming some knowledge of the game of Cricket most fields below should hopefully be easy to understand, some fields which are not common fields are type (1 for group match and 2 for final) and fin (1 for finished 0 for upcoming).

Another thing to note in the data is that matches that where decided by the Duckworth Lewis Method have the calculated scores in order to be able to build the correct net run rate for the team.

{
  date: '2019-06-09',
  type: 1,
  fin: 1,
  t1: 'IND',
  t1NR: 0,
  t1Ov: 50,
  t1Ru: 352,
  t1SupOvrR: 0,
  t1SupOvrW: 0,
  t1Wk: 5,
  t2: 'AUS',
  t2NR: 0,
  t2Ov: 50,
  t2Ru: 316,
  t2SupOvrR: 0,
  t2SupOvrW: 0,
  t2Wk: 10,
  dlmethod: false
}

Code Base Structure

We will be storing the match data in a data folder, typically you would get such data from an API but I have stored the data locally for this course to make things simpler. Other folders are shown below for your reference but will be explored in more detail throughout the course.

Final Result

When all the calculations have been made we will take the data structure and render out a table in react as shown below.

Development Tools

We will add code into the blog posts so you can use your preferred method however we will be using a create-react-app instance from codesandbox.io (with Jest built in).

Thanks for reading the overview of this series, now lets get down to business and build the cricket points table in Part 2 of the series.

How to Audit your site with Lighthouse

Aaron — Tue, 24 Sep 2019 13:07:52 +0000

Lighthouse is an open-source, automated tool for improving the quality of web pages. ⠀
You can run it against any web page, public or requiring authentication. ⠀
It has audits for performance, accessibility, progressive web apps, and more.

Image from video and above description from Lighthouse website.
⠀
To run it in Google Chrome follow the below steps.⠀

Open Devtools⠀
Click Audit tab⠀
Click Run audits

⠀
It has some great tips and resources for how to improve your site.⠀
⠀
However one thing to keep in mind is that getting a good score on the audit doesn't mean you have the perfect site, for example it doesn't rate the quality of your design, content, usability etc, you should find the right balance between meeting your clients needs and making sure it is as fast as possible.

Once again if you are interested in finding out more about this awesome tool I highly recommend heading over to the lighthouse website.

And I will aim to do a deeper dive into the functionality at a later date.

Render a List from an Object in React

Aaron — Wed, 28 Aug 2019 12:43:13 +0000

image from undraw.co

Sometimes the data we want to render in a list will be in an object rather than an array, to render it as a list we can take advantage of Object.keys so that we can map over the item like we would on a standard array.⠀

Note you could also look at using es6 Object.values or Object.entries here as well.

Check out the video below.

Head over to the reactjs.org docs for some more great examples.

How to create a custom sort order in javascript

Aaron — Fri, 09 Aug 2019 12:46:57 +0000

image from undraw.co

Originally posted on afewminutesofcode.com

Usually we will want to sort an array numerically or in alphabetical order, but there are also some cases were we might need a custom sort order.

Take the below example we want to show the items inProgress first, then todo and then done.

const tasks = [
  {id:1, title: 'Job A', status: 'done'},
  {id:2, title: 'Job B', status: 'inProgress'},
  {id:3, title: 'Job C', status: 'todo'},
  {id:4, title: 'Job D', status: 'inProgress'},
  {id:5, title: 'Job E', status: 'todo'}
]

We will first create an array with our desired sort order.

const sortBy = ['inProgress', 'todo', 'done']

Then we will make a function using reduce that will output the data as an object. {inProgress: 0, todo: 1, done: 2} with the array item as the key and the index as the value.

const sortByObject = data => data.reduce(
  (obj,item,index) => ({
    ...obj,
    [item]:index
}), {}
)
console.log(sortByObject(sortBy))
/* {inProgress: 0, todo: 1, done: 2} */

Now we have our sorting setup we can bring it all together with a reusable function that passes in an array (data), a sortby array, and a sortField so we know which field to sort on.

const customSort = ({data, sortBy, sortField}) => {
  const sortByObject = sortBy.reduce(
  (obj, item, index) => ({
      ...obj,
      [item]: index
  }), {})
  return data.sort((a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]])
}

console.log(customSort({data:tasks, sortBy, sortField: 'status'}))

This will now sort by our custom order, however there will be an issue if there is an item in the list that has a different status (one not in our sort order). So to handle this we will set a default sort field to catch all items we don't want in the sort.

const tasksWithDefault = tasks.map(item => ({...item, sortStatus: sortBy.includes(item.status) ? item.status:'other'}))

With this in place if we log out our function again this time passing in our updated sort field then we now have our correct sort order with other items at the bottom of the list.

console.log(customSort({
  data:tasksWithDefault,
  sortBy: [...sortBy,'other'],
  sortField: 'sortStatus'
  }))

If you are looking for some more tips or want to be notified when my next post is available follow Me Online Here:

Instagram
Facebook
afewminutesofcode.com
Twitter
Pinterest

How the winner of the cricket world cup was awarded in Javascript

Aaron — Thu, 08 Aug 2019 12:45:35 +0000

In this post we are going to use a practical example from a recent sporting event to learn how to sort an array by multiple fields in JavaScript.

In the recent cricket world cup, The winner was decided based on the below.⠀

Most runs (if a tie go to a super over)⠀
Most runs in Super Over (if a tie go to a boundary count)⠀
Most boundaries.⠀

When sorting we can use the syntax array.sort((a,b) => b - a to sort from highest to lowest.⠀

So in our code below we check ⠀

if the runs and super over runs are equal - sort by boundary count⠀
else if runs are equal sort by most runs in super over⠀
else sort by most runs⠀

Then because this will sort an array we the take the first results in the array [0] and return the team property, so when we log out the scores from the world cup final we can see that England is declared the winner of the match.⠀

const cricketWorldCupFinal = [{
  team: 'England',
  runs: 241,
  wkts: 10,
  supOvrRuns: 15,
  boundaryCount: 26
},
{
  team: 'New Zealand',
  runs: 241,
  wkts: 8,
  supOvrRuns: 15,
  boundaryCount: 17
}]

const calcMatchWinner = scores => {
  return scores.sort((a, b) => {
    if (a.runs === b.runs && a.supOvrRuns === b.supOvrRuns) {
      return b.boundaryCount - a.boundaryCount
    } else if (a.runs === b.runs) {
      return (b.supOvrRuns - a.supOvrRuns)
    } else {
      return (b.runs - a.runs)
    }
  })[0].team
}

console.log(calcMatchWinner(cricketWorldCupFinal))
// output => England

I am currently working on a cricket javascript course where I demonstrate how to Create a Cricket Points Table in JavaScript so please follow me on one of the below channels or here on Dev to stay up to date, with when it is released.⠀

Instagram
Facebook
afewminutesofcode.com
Twitter
Pinterest

How to convert an array into an object in javascript

Aaron — Thu, 08 Aug 2019 12:21:21 +0000

image from undraw.co

Originally posted on afewminutesofcode.com

To convert an array into an object we will create a function and give it 2 properties, an array and a key.

const convertArrayToObject = (array, key) => {};

We will then reduce the array, and create a unique property for each item based on the key we have passed in.

We also need to remember to set an initial Value, and also pass in the current value (...obj in the below).

const convertArrayToObject = (array, key) => {
  const initialValue = {};
  return array.reduce((obj, item) => {
    return {
      ...obj,
      [item[key]]: item,
    };
  }, initialValue);
};

So now if we log out our function (passing in the array and our key which is a unique identifier in this case the id property) we will see our array is now an object.

console.log(
  convertArrayToObject(
    [
      { id: 111, name: 'John', age: 29 },
      { id: 112, name: 'Sarah', age: 25 },
      { id: 122, name: 'Kate', age: 22 },
      { id: 123, name: 'Tom', age: 21 },
      { id: 125, name: 'Emma', age: 24 },
    ],
    'id',
  ),
);

returns

{
  111:{ id: 111, name: 'John', age: 29 },
  112:{ id: 112, name: 'Sarah', age: 25 },
  122:{ id: 122, name: 'Kate', age: 22 },
  123:{ id: 123, name: 'Tom', age: 21 },
  125:{ id: 125, name: 'Emma', age: 24 }
}

We can now easily look up data in our array by an id and use it as required.

If you are looking for some more tips or want to be notified when my next post is available follow Me Online Here:

Instagram
Facebook
afewminutesofcode.com
Twitter
Pinterest