This time, with a test suite!

Image for post
Image for post

Previously I wrote about 10 utility functions implemented with JavaScript’s reduce function. It was well-received, and I walked away with an even deeper appreciation for this magnificent multi-tool. Why not try 10 more?

Many of these were inspired by the awesome libraries Lodash and Ramda! I also wrote unit tests to ensure correct behavior. You can see everything on the Github repo here.

1. pipe

Parameters

Description

Performs left-to-right function composition. The first argument to a pipeline acts as the initial value, and is transformed as it passes through each function.

Implementation

const pipe = (...functions) => (initialValue) =>…


Buy a house, or cautiously build your own.

What’s the difference between a framework and library? I’ve had this discussion with developers at work and meetups, and the core idea boils down to this.

You tell libraries what to do, frameworks tell you what to do.

Framework Upsides

Generally speaking a framework tells you what to do. It has a “right way” of doing things and provides tooling to support you.

Two perfect examples are Angular and Vue.

Image for post
Image for post

All the tools are here

These are frameworks created by dedicated teams, and ship with everything you need to build large-scale applications.

  • Components
  • Basic state management
  • Directives
  • Handling forms
  • Routing
  • HTTP
  • Testing
  • More (UI libraries, animations, etc.)


The multi-tool strikes again.

Image for post
Image for post

In my last article I offered you a challenge to recreate well-known functions using reduce. This article will show you how some of them can be implemented, along with some extras!

In total we’re going to look at ten utility functions. They’re incredibly handy on your projects, and best of all, they’re implemented using reduce! I drew lots of inspiration from the RamdaJS library for this one, so check that out!

1. some

Parameters

  1. array - List of items to test.

Description

If predicate returns true for any item, some returns true. Otherwise it returns false.


90% convention, 10% library.

Image for post
Image for post

Redux is among the most important JavaScript libraries ever created. Inspired by prior art like Flux and Elm, Redux put JavaScript functional programming on the map by introducing a scalable architecture of three simple points.

If you’re new to Redux, consider reading the official docs first.

Redux Is Mostly Convention

Consider this simple counter application that uses the Redux architecture. If you’d like to jump ahead check out the Github repo for it.


Hopefully this reduces the confusion about the reduce function in JavaScript.

Image for post
Image for post

In my experience learning and teaching JavaScript, reduce is one of the toughest concepts to crack. In this article I’ll try to address one core question…

What is reduce and why is it called that?

Reduce Has Many Names

Some of them, according to Wikipedia, are

  • Reduce
  • Fold
  • Accumulate
  • Aggregate
  • Compress

They all hint at the core idea. It’s all about breaking a structure down into a single value.

Reduce — A function that folds a list into any data type.

It’s like folding a box! With reduce you can turn an array [1,2,3,4,5] into the number 15 by adding them all up.


Copy–until you can create.

Image for post
Image for post

As developers, we understand how important practice is to continued professional success. The web moves fast, and just a year or two of contentment can leave you eating JavaScript’s dust.

Yet many developers, regardless of experience, frantically ask: “Which project should I do?”


TLDR: Coerce yourself to use triple equals.

Image for post
Image for post

I unintentionally found this JavaScript meme on Reddit, and it’s the best one I’ve ever seen.


Stop Living in Level One.

Image for post
Image for post

Originally posted on yazeedb.com

I can’t even begin to count how many people (myself very much included) keep saying

Yeah, I’m going to start this JavaScript course!

I’m buying and reading this book!

I’ve started building this app to learn React and GraphQL!

Months Later…


Use #8 for deep copying!

Image for post
Image for post

JavaScript has many ways to do anything. I’ve written on 10 Ways to Write pipe/compose in JavaScript, and now we’re doing arrays.

1. Spread Operator (Shallow copy)

Ever since ES6 dropped, this has been the most popular method. It’s a brief syntax and you’ll find it incredibly useful when using libraries like React and Redux.

numbers = [1, 2, 3];
numbersCopy = [...numbers];

Note: This doesn’t safely copy multi-dimensional arrays. Array/object values are copied by reference instead of by value.

This is fine

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers is left alone

This is not fine

nestedNumbers…

Yazeed Bzadough

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store