DEV Community: Sean Niehus

Continuous Integration

Sean Niehus — Mon, 13 Mar 2023 13:51:56 +0000

Continuous Integration (CI) is a software development practice that optimizes efficiency by automating many of the steps in the development process as changes are being committed and pushed to a shared repository. This method ensures that everything is in testing the code to make sure that no errors exist and that the project is always in working order. CI is essential when an application has many contributors to ensure the stability of code, in this post I will cover the basics of how it works, why it is so important, and what options are available.

What is Continuous Integration?

CI involves merging changes into a shared repository as frequently as possible. Whenever new code is committed, before it is merged, the new code is verified to ensure that no errors exist and there will be no conflicts. The typical process involves first automating the compiling/building, testing, and checking for errors. Notifications are sent out of the results and the code will deploy if no issues are detected. The goal of CI is to catch issues early in the development process before they become a larger problem. CI can catch syntax errors, and conflicts with existing code as well as identify issues that could become problems.

Why is it important?

CI offers several benefits to a software development team by streamlining and automating the development process. It abstracts away the crucial but mundane tasks letting developers focus on writing code instead of performing repetitive tasks. By testing the code locally before it is accepted into the organization's repo, one bug written by a developer can be prevented from breaking the whole application. The process leads to a reduction and errors that can be resolved quickly, leading to easier collaboration and sharing of code leading to faster development.

Options for Continuous Integration

There are numerous options for tools that deliver CI capabilities to choose from, each with its own set of unique capabilities. One of the most popular tools is Jenkins, which is open-sourced and offers support for multiple languages. Jenkins is flexible, customizable, and can run on many different platforms. Another popular option is Travis CI, a cloud-based, intuitive platform that provides seamless integration with GitHub and is well-suited for both open-source and private projects. CircleCI is also cloud-based, easy to use, provides fast speedy builds and testing, and offers integration with GitHub, BitBucket, and other DevOps tools. These are just a few of the many options available to provide CI to a project.

Conclusion

Continuous Integration is an invaluable tool that can outsource many of the mundane and repetitive tasks that are crucial to any project's success. CI lets developers focus on writing high-quality code and provide insurance and confidence that errors will be caught and there will be no disruption to the development process. Many options exist, but it is worth the investment of time during the set-up of a project to find the right one to best optimize your performance.

Intro to Typescript Part II

Sean Niehus — Mon, 27 Feb 2023 14:58:55 +0000

Typescript is a powerful tool that enhances Javascript with static type checking along with loads of other features. While Typescript's basic type system has a lot of value, it offers a lot more features to help you write better code. This article will touch on a few of those, generics, unions and intersection types, and type guards.

Generics

One of the reasons Typescript is so popular its templates are a lot like statically typed languages such as Java or C++. For instance, generics offer a way to define a function, class, or interface that will work with different types making them useful for creating more flexible reusable code. Below is an example of a generic function that allows for any type of input:

const printValue = <T>(value: T): void => {
  console.log(value);
}

printValue("message"); // logs "message"
printValue(99); // logs 99
printValue(false); // logs false

In the example, the '' syntax defines the type of variable that can be passed into the function. In this case, it would accept any type of variable. After the parenthesis, the type of return is declared, in this case, 'void' indicates that the function doesn't return anything. In the second example below it takes in an array with any type of elements:

const returnFirst = <T>(arr: T[]): T | undefined => {
  return arr[0];
}
const numbers = [1, 2, 3];
const strings = ['a', 'b', 'c'];

returnFirst(numbers);// returns 1
returnFirst(strings);// returns 'a'

Union and Intersection Types

Union and intersection types are another way that Typescript allows flexibility. Union types allow for one of several alternative types, while intersection types allow for a combination of types. Below is an example of a union type of function:

const printValue = (value: number | string) => {
  console.log(value);
}

printValue("message"); // logs "message"
printValue(99); // logs 99
printValue(false); // throws error

Below, two interfaces with different properties are defined and an intersection function takes in a parameter of 'Person & User' which combines the properties of both interfaces:

interface Person {
  name: string;
  age: number;
}

interface User {
  username: string;
  id: number;
}

const printInfo = (person: Person & User) => {
  console.log(`Name: ${person.name}`);
  console.log(`Age: ${person.age}`);
  console.log(`Username: ${person.username}`);
  console.log(`Id: ${person.id}`);
};

const bob: Person & User = {
  name: 'bob',
  age: 25,
  username: 'bob999',
  id: 12345
};

printInfo(bob);//prints four key/value pairs

Type Guards

Type guards are a useful feature of Typescript that allow you to use conditional logic when using union types. When you are using type guards, the type of a variable is determined when a function is invoked and its properties are accessible.

type User = {
  username: string;
  isVerified: boolean;
};

function isVerified(user: User): user is User & {isVerified: true} {
  return user.isVerified === true;
}

const printUserDetails = (user: User) => {
  if (isVerified(user)) {
    console.log(`${user.username} is verified`);
  } else {
    console.log(`${user.username} is not verified`);
  }
};

const user1: User = { username: "jane", isVerified: true };
const user2: User = { username: "john", isVerified: false };


printUserDetails(user1);//prints: 'jane is verified'
printUserDetails(user2);//prints: 'john is not verified'

Above the return type of 'isVerified' is a type predicate, it narrows the type of argument to a more specific type where the boolean value is set to 'true'.

Typescript can be a bit difficult at first and it can sometimes feel too opinionated. But these are a few of the features that give it flexibility so that help you write robust and re-useable code and spend less time looking for bugs.

Intro to Typescript

Sean Niehus — Mon, 06 Feb 2023 14:57:55 +0000

Typescript is a syntactical superset of Javascript that has strict rules for formatting designed to allow programmers to write code with fewer bugs. Open-sourced and maintained by Microsoft, Typescript was created in 2012 to extend the features and syntax of Javascript adding an extra layer of error prevention to large and complex code bases by preventing incorrect datatypes from being entered. Whenever a variable is created, a datatype can be explicitly defined and an error will be thrown if at any point the wrong type of value is assigned to it. One of the many benefits of Typescript is the ease of use for anyone familiar with Javascript, any code that can be written in Javascript can be written in Typescript and it will get trans-piled into Javascript. This article will serve as a brief introduction to the many capabilities of TS.

Explicit vs. Implicit

There are two ways that data types are defined in Typescript. A datatype can be implicitly defined by assigning a value to the variable and that variable can not be re-assign to another
type. When declared explicitly type declaration syntax is used to define the only datatype that the variable can hold.

//Implicit strong typing:
let num = 25;// value of num can only be a number
num = '25';  // re-assigning to string throws an error


//Explicit strong typing:
let int: number = 13;// value of int can only be a number
int = '13'           // re-assigning to string throws an error

In the second example above the keyword 'number' after the colon will ensure that that variable will never be re-assigned to a non-number datatype. Forcing a primitive data type is not always a requirement, if a variable may contain different types of data, the 'any' keyword could be used to avoid implicitly setting it.

Arrays

For complex data types the type of primitive data that make up collections is set when when creating the variable, with an array all elements can have the same datatype like this:

let nums: numbers[] = [ 1, 2, 3, 4, 5 ];
nums.push('6'); //throws error

Or Arrays can have a mix of datatypes which enables the creation of a new type of collection, tuples, which are have fixed lengths where each element's data type is pre-determined.

let employee: [string, number];
employee = ['John Doe', 12345]; 

console.log(`Name: ${employee[0]}`);
console.log(`ID: ${eployee[1]}`);

Objects

When strong typing is used on objects it ensures that a class of objects will have the same format. A very minimal change to a vanilla constructor function will ensure uniformity among all instances which allows you to catch bugs during development and reduce the number of run-time errors. Code will also be easier to read understand and refactor. When creating the blueprint for an object an interface is used:

interface Pet {
  name: string;
  age: number; 

};
const pet: Pet = {
  name: 'Mr. Whiskers',
  age: 6, 
};

Functions

Functions in typescript allow for strong typing either the arguments and/or the returns.

let add = (x: number, y: number): number {
  return x + y;
}

console.log(add(3, 5));     //prints: 8
console.log(add('3', '5')); //throws error

Conclusion

This article gives fairly simple examples of how to force type variables and some of them are redundant and would not practically be used but were given to distinguish between the implicit and explicate creation methods, but Typescript is a very useful tool. Utilizing Typescript requires a bit more work at the beginning of a project but will have immense benefits throughout the project allowing for more efficient coding.

Intro to Encryption

Sean Niehus — Mon, 19 Dec 2022 15:08:57 +0000

Encryption is the act of encoding data to keep it secure as it passes from the sender to the receiver. It is used to keep sensitive information private allowing it to only be viewed by authorized persons or organizations. Encryption is crucial to keeping data secure as it travels electronically through networks and over the internet. This blog will serve as a basic introduction that includes a brief history of the field, an exploration of how it works, and an examination of different methods that are used.

For nearly as long as humans have had the ability to write and share messages, they have been creating ways to keep the messages keep the messages from being viewed by others. Many of the earliest documented uses of encryption were efforts made by militaries to keep their enemies from deciphering their intercepted communications. The most famous is the Caesar Cipher where the intended receiver would know how many many letters (the key) to increment to decode the message. This was a fairly ineffective method though, as the number of attempts to crack the code is the number of letters of the alphabet. The Enigma machine, used by the Axis powers could electro-mechanically scramble the letters of a message. This device took in plain text and outputted cipher text, the receiving party knew the settings, which were changed daily, and use their own device when it was received to decrypt it. Poland was able to crack the code in 1932, which was instrumental in leading to the Allies' success.

Today, mathematical algorithms encrypt nearly all the data that travels electronically. The most common methods that programmers use are symmetric-key, asymmetric-key, and hash functions. Symmetric-key encryption is when the sender and receiver use the same key to gain scramble and unscramble the data. In order for the data to remain secure, both parties must keep the key private, which makes this method less reliable than more sophisticated methods.

Public-key encryption is the asymmetric alternative, which uses a public key and a private key. The public key is used to encode the data and the private key decodes it. With this method, only the private key must be secured to maintain security.

Today's computers need to be way more sophisticated than the early methods. Where the earliest encryption methods had cipher texts the same length as the raw messages today, the keys are made longer. Algorithms can be used to map every character to another the repeat the code mapping with a different function, this process is repeated many times over until the encryption is unlikely to be compromised by even the most powerful computer the standard length for modern keys is 256-bit.

With everyone sending banking information, passwords, and credit card over the internet it is crucial that the data remain out of the hands of hackers. Encryption methods continue to advance and become more and more sophisticated to protect all the sensitive data that is constantly being passed around the internet.

Intro to Socket IO

Sean Niehus — Wed, 14 Dec 2022 00:28:00 +0000

Socket IO is an invaluable tool that utilizes WebSocket technologies to enable the creation of a persistent connection that allows two-way communication between the client and server. In addition to sending messages back and forth between the client and the server, event listeners can also be set up on the client to which the server can receive and respond. This technology is ideal for browser-based applications that frequently pass small pieces of data back in forth to and from the server, without having the hassle of setting up and shutting down the connection.

The WebSocket protocols were established 2011 by the Internet Engineering Task Force, defining the ground rules for syntax and use of the WebSocket API. Socket.IO is one of many tools that enhances their abilities working alongside Node.js, offering a library of methods and built in event listeners.

Creating the connection is a simple process with just a bit of starter code. On the server side, below, the library is imported, a port is defined and a message is sent. The emit method sends a message to every socket that is connected to the socket:

import { Server } from "socket.io";

const io = new Server(3000);

io.on("connection", (socket) => {
  // send a message to the client
  socket.emit("hello from server", 1, "2", { 3: Buffer.from([4]) });

  // receive a message from the client
  socket.on("hello from client", (...args) => {
    // ...
  });
});

source:

When the client-side code below is added the connection is made and we can see the message that was received.

The starter code on the other end is just as simple and looks very similar. The socket.on method is creating a listener that sends will send the message only when the connection is made.

import { io } from "socket.io-client";

const socket = io("ws://localhost:3000");

// send a message to the server
socket.emit("hello from client", 5, "6", { 7: Uint8Array.from([8]) });

// receive a message from the server
socket.on("hello from server", (...args) => {
  // ...
});

source:

One of the benefits of using sockets is that you have the ability to include callbacks on one end that are invoked when on the other end, once they are received, these listeners allow functions to be triggered without having to poll the other to determine the statuses.

socket.on("hello", (arg, callback) => {
  console.log(arg); // "world"
  callback("got it");
});

source:

The simple example above demonstrate the link between one server and one client, but Sockets allow the capability of a one-to-many connection, in essence allowing a continuous connection to all clients.

With broadcasting, the server can send messages to all sockets on the connection or just a subset of users.

// to all connected clients
io.emit("hello");

// to all connected clients in the "news" room
io.to("news").emit("hello");

source:

Included here are just a small sample of the numerous capabilities of this very useful, easy-to-use technology. WebSocket can be a great tool to have at your disposal when building browser-based apps.

Introduction to AI Image Generation

Sean Niehus — Mon, 05 Dec 2022 14:59:16 +0000

"Art is never finished only abandoned" -Leonard da Vinci

Introduction

The technology to create images using AI has exploded in both access and in popularity over the last few years. Now anyone with an internet connection can create images in a matter of seconds, anything they can imagine, in any style they want. Some people (probably not Leonardo da Vinci, I imagine) would consider these creations works of art. This blog will give you the basics of how they operate, briefly look at the history, and will explore the implications of such tech.

How it works

Algorithms are created to use databases of photos to compare existing photos and use their text descriptions to create new ones. A pair of neural networks go to work, one generates an image while the other grades and gives it feedback. The back and forth continues until the second network is satisfied. Each time the program is run, it gets a little better at its job.

These algorithms go to work when a user types in a description of their desired image. The technology scrubs the web looking for images with descriptions that match each word in the prompt. It then fetches, combines, and returns new images to the network for grading and feedback. It continues this process until the network technology deems it satisfactory and it is returned to the user. In moments, an image of anything you can imagine in anything style you want can be created.

A Brief History

While it may seem that this tech has come out of nowhere, it has a history dating back at least 50 years. Harold Cohen, who created one of the first programs called AARON in the 1960s, wanted the ability to create art through code. The technology evolved further with the development of generative adversarial networks (GANs) in 2014, which utilized the 'generator' and 'discriminator' pair of networks to develop its algorithm. Google's Deep Dream was another advancement in 2015 prompting the creation of apps that allowed users to transform their pictures into images that resembled works of art. Now some of the biggest players in the AI image game are DALL-E, Midjourney, and Stable Diffusion, just to mention a few. A quick web search will produce scores of platforms that create AI images.

Jason Allen’s A.I.-generated work, “Théâtre D’opéra Spatial,” took first place in the digital category at the Colorado State Fair.Credit...via Jason Allen source: https://www.nytimes.com/2022/09/02/technology/ai-artificial-intelligence-artists.html

Implications

Just like any other type of AI technology, it does come with its downsides. Other than the squandered hours that you spend going down a rabbit hole trying to figure out what The Dude would look like painted as the Mona Lisa when you should be doing other things (such as writing a blog), there are far more serious implications that can come into play. Many artists who spend years toiling to hone their craft take offense to people calling these images art. Also, having their intellectual property showing up as part of one of these images must be infuriating. There are many other implications as well that would be worthy of a deep dive.

Conclusion

Hopefully, the developers of this technology will use their powers for good and will be able to anticipate the negative effects that are possible and strive to use AI responsibly. This brief introduction is just the starting point of exploration of this topic and will be expanded on at some point. In conclusion, I can abide by Leonardo's belief, this ~~art~~ image needs a bit more work. The Dude's smile just isn't quite right.

Introduction to Bootstrap

Sean Niehus — Mon, 17 Oct 2022 17:51:31 +0000

Bootstrap is a CSS, mobile-first framework that allows you to build dynamic sites with ease that are responsive and will scale according to the size of the user's device. Its ease of use and extensive library of templates, classes, and attributes make it a reliable way to quickly build great-looking, mobile-friendly websites or apps. This article will talk about a few of the fundamental features that Bootstrap offers.

The Grid System

The core feature of this framework is its grid system layout which defines the layout of a UI. The structure of each component is a container that includes columns with nested rows inside of them. Each container can contain up to 12 columns.

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

source

When a container is loaded with divs that all have a class of "col", the columns default to the same width. Below another row is added and the sizes of the columns are changed in the second row.

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

source

Column width can be defined for any number of columns, if the size is defined for some but not all, the elements with undefined width will all default to equal width that occupies the remainder of the page. If the sum of the sizes exceeds twelve, the columns will wrap and sit on top of one another. This simple system allows any combination of nested rows and columns, which are all given functionality to render responsive HTML, depending on the type of device that receives it.

Breakpoints

Bootstrap layouts will always default to a layout that is best for a phone. When the page is rendered on a larger screen it will adjust the layout to fit the size of the user's screen. Adding breakpoints ('sm', 'med', 'lg', 'xl', or 'xxl') enables you to add conditionals to define the layout based on the screen size. When a breakpoint is set, it will apply to all screens of that size and larger. If you wanted to have three different displays you could set 2 breakpoints, one at medium and one at extra large. Any screen smaller than medium would get the default layout. When a breakpoint is given the defined state applies to that screen size and larger.

Breakpoints can be applied to any container, column, or row inside the grid system. Go here to learn all about breakpoints then here to implement them on the grid system and see the unlimited possible layouts to create your project with.

Customize

Bootstrap is a flexible framework, the components all come with default values, but are fully customizable. Their library is filled with invaluable tools that work with both CSS and Javascript. They also have specific frameworks to use with React, Vue and Angular.

Conclusion

Bootstrap's huge library of classes and templates along with its 12-column layout system is could be a huge help if you are on a time crunch to get a project launched quickly. A little bit of playing with the framework's tool kit now could have huge benefits in the future. Whether you just the grid functions to set the layout, or you choose to use a full template bootstrap can be a huge asset to your product.

An Introduction to Vue

Sean Niehus — Mon, 10 Oct 2022 13:58:17 +0000

Vue is a fairly new front-end framework that is gaining a lot of popularity among developers and is now one of the top 3 frameworks along with Angular and React. Created in 2013, its simple integration, the lightweight and progressive design have converted a lot of developers to fans of their product. Vue is easy to learn, flexible and can use to build an API from top to bottom or only used on a few components. The fact that is incrementally adaptable means it can be implemented on legacy code to upgrade it one component at a time. This article will serve as a beginner guide to the framework where I will talk about just a few of its features.

The fundamentals

The structure is built on top of Javascript, HTML and CSS, if you are comfortable with those it easy to jump right in and begin using the framework, it's not loaded with a lot of new terminology like some of the other frameworks. With just a bit of boilerplate code, you can access the library and be writing cleaner code with very little research. From Vue's website: “The core feature of Vue is declarative rendering”. Their rendering functions tell the program how (as opposed to what) to run.

At its core, the structure of components pass options arguments into functions that return another object.

Source: https://vuejs.org/tutorial/#step-2

Directives

A directive is an instruction inside the HTML of a DOM element to do something. These can take on many forms, functions, methods, and event handlers or even implement version control. Vue has numerous built-in directives ready for us or they can be custom created by the user if one doesn’t already exist to fit your need. Below are a few examples of some that already exist in the library.

Conditional directives for if, else-if and else:

source: https://vuejs.org/guide/essentials/conditional.html#v-else

Iteration directives for easily looping through collections:

https://vuejs.org/guide/essentials/list.html#v-for

Inline handlers make dynamically adding event handler functions a breeze.

source: https://vuejs.org/guide/essentials/event-
handling.html#key-modifiers

Both of the above directives accomplish the exact same thing with the second using a bit of Vue shorthand.

For a handler that is a bit more complex the directive would be used as a method such as the following:

source: https://vuejs.org/guide/essentials/event-handling.html#key-modifiers

Hooks

A Lifecycle hook is a function that is triggered to be run on a component at some point during the multiple steps a component takes being integrated into an API. Components are created, the stage is set, it gets added(mounted) to its place on the DOM, etc. At any of these points in this cycle, a hook can be added before or after the step is taken. These functions utilize the 'this' keyword to set the context. Here is the full list of lifecycle hooks to use in Vue:

source: https://learnvue.co/tutorials/vue-lifecycle-hooks-guide

Conclusion

The easy-to-navigate documentation and the large community of users make doing research on the framework a piece of cake. Using Vue to create your project will make your code way more concise and easier to read, give you access to their nifty developer tools, and set the organization's expectations for your team. It's easy to see why this framework has so many loyal devotees.

A Brief Introduction to Express.js

Sean Niehus — Mon, 03 Oct 2022 22:43:45 +0000

Express bills itself server-side framework as 'fast, un-opinionated and minimalist web framework for Node.js.' Express's bare-bones skeleton gives the user the ability to define its structure, making it the ideal option to use in conjunction with client-side frameworks to create dynamic apps and websites with ease. In this article, I will show you how to get started using the framework and talk about some of the features that make it the most popular node framework.

Getting Started

The below example from the Express website shows you how simple it is to get started using it on a project:

source: https://expressjs.com/en/starter/hello-world.html

The first few lines of the above code, in addition to installing the node package manager(NPM) in the terminal (along with having Node installed), are all that's needed to begin. The function on lines 5 through 7 is typical of the way functions will be created which we will examine next. Finally, on line 9 the code here defines the port to listen on, where you will go to find the output.

Middleware Functions

Express offers users loads of ways to write clean code and move data to and from the front-end to the back-end (and has a ton of resources on their website), here I will just scratch the surface of its capabilities. Middleware functions are the bread and butter of the framework, giving you the ability to manipulate the properties of the request and response objects, using .get, .post, .put and .delete. In the graphic below (from Express's website) you can see the format and the anatomy of one of these function calls:

source: https://expressjs.com/en/guide/writing-middleware.html

After the .get method is defined, the route to the context of the function is declared, defining the path to the target file. Next, in the invocation of the anonymous function, the first two arguments are for the request and response arguments followed by a callback which is executed in the body of the function. Middleware functions can be easily created with just a few lines of clean, concise code.

Express Application Generator

One last asset that I will touch on is the express-generator which offers a fast, efficient way to set up a custom framework for an app pre-configured with the Express capabilities of your choosing. The beauty of Express is its minimalist framework that will not limit what you want to do with it, it doesn't dictate the terms, but gives you only the capabilities that you want. The generator allows you to create, customize and reuse frameworks that will allow you to get your project off the ground in very little time. Using a compatible template engine is also a possibility for efficiently setting up a skeleton framework.

Express has so many great features, it's easy to see why it is so popular. The capabilities discussed above are just a few of the reasons that it is the go-to framework for so many developers.

The Power of Reduce

Sean Niehus — Mon, 15 Aug 2022 14:11:00 +0000

Reduce is powerful Javascript method that is crucial for every beginning programmer to become familiar with . In a nutshell, reduce will iterate through an array and return a single value. That single value can be of any data-type, be it primitive or complex. As reduce loops through the input collection, it invokes a callback function on every value, updating the return value at every pass. The value returned can be a string, number, array or an object. Reduce is an invaluable tool that can be used in and endless amount of ways, I show a few simple examples of how it can be used. First, an example using it to return a simple data type, number, here the sum of all elements in numbers:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var reduced = function(array){
  return array.reduce(function(accumulator, element){
return accumulator += index; 
}); 
};
reduced(numbers);  //returns 55

Above the callback function invokes the function on every element of the numbers array and updates the value of the accumulator and returns the final value when the iteration is complete. Above, the return value is the same type of data as each element in the collection, but reduce can return complex data as well. Say, you have an array of users and want to return an array of only the user's objects of those that are younger than 30:

var users = [{name:'john', age: 27, accountNumber: 383838}, 
             {name: 'jane', age: 26, accountNumber: 388728}, 
             {name: 'bob', age: 33, accountNumber: 399384}];

var reducedArray = function(array){
  return array.reduce(function(accumulator, object){
    if(object.age < 30){
      accumulator.push(object);
    }
    return accumulator;
  }, [])
};
(reducedArray(users));

Above, the function works the same way, iterates through and updates the return value at every call and returns a simplified array with only 2 objects. The callback function here takes in one more argument (after the body of the function), the empty array is initial value of the accumulator, called the seed. This is optional (recall the first example did not have one), if one is not supplied the first element of the input array becomes the initial value of the accumulator and the iteration will start at index 1.

Taking a look at the function created from scratch, gives us a view of what is happening in the background whenever it is used:

function reduceFromScratch(array, iterator, seed){
  let accumulator = seed;
  let i = 0;

  if(accumulator === undefined){
    accumulator = array[0];
    i = 1;
  }
    for(; i < array.length; i++){
      let elem = array[i];
      accumulator = iterator(accumulator, elem, array, seed);  
      }
      return accumulator;
}

First, the function checks to see if a starting value has been passed in, assigns it to the accumulator if it has. If the seed hasn't been provided it makes the first element the starting value and tells the loop to begin at the second element instead of the first. It then invokes the iterator function on every element and updates the accumulator per directions of the callback.

There are few basic array methods in javascript that get used repeatedly when working with large collections of nested data such as JSON files. The map and filter methods are invaluable and can be chain together to extract precise slivers of data from collections, but often reduce can be used alone to achieve the same results with less code.

Take a look again at the second example above that returned the objects that were for users who are under 30. If just the account numbers were need, filter and map could handle the job, but reduce can do it on it's own:

var users = [{ name:'john', age: 27, accountNumber: 383838}, 
             {name: 'jane', age: 26, accountNumber: 388728}, 
             {name: 'bob', age: 33, accountNumber: 399384}];

var reducedArray = function(array){
  return array.reduce(function(accumulator, object){
    if(object.age < 30){
      accumulator.push(object.accountNumber);
    }
    return accumulator;
  }, [])
};
console.log(reducedArray(users));

This basic example shows reduces versatility, but there is no limit to the possibilities of what reduce can accomplish. It's not hard to imagine how a retail company could use reduce on its user's database to precisely target customers based on their data. Say, if you need to send an email to everyone who purchased a certain product. Reduce will return their addresses if the product is on their purchases array. It can return something as simple a number representing an average balance or as complex as nested objects, the possibility are endless.

In conclusion, these very simple examples are only the a tiny sample of reduce is capable of. Knowing how to use reduce is a great asset and can make code much more efficient and concise, making it easier to debug and reduce repitition, something all of us should strive for.

Higher Order Functions

Sean Niehus — Fri, 17 Jun 2022 22:22:30 +0000

Higher Order functions takes in arguments as an argument or return a function. Using these allows your code to run more efficiently and reduces repetitiveness. The result is code that is easier to read and easier to de-bug. Whether you are using native methods (helper functions), using recursion, or writing your own callback functions, you will become a better programmer when you are utilizing these tools.

Filter, Map, and Reduce
The filter, map and reduce functions are three invaluable tools for dealing with collections of large amounts of data. The filter function takes in an array and a test function as arguments:

function filter(array, testFunc){
 let results = [];
for(let i = 0; i < array.length; i++){
  if (testFunc(array[i], i, array)) {
    results.push(array[i]);
  }
}
  return results; 
}

Invoking this function will return a new array, with only the values that satisfy the condition in the input function. Upon the function being called, the input array is iterated through; and for each element the input function is called on it, if true, it's pushed into the array. The function returns a new array without mutating the input array, thus it is a pure function.

let numbers = [2, 3, 5, 18, 21, 22, 27, 33];
console.log(filter(numbers, function(number) {
  return (number % 3 === 0);

Here, invoking the filter function created above with an anonymous function tests each element of the numbers array to see if it is divisible by 3. This function call would log to the console: [3, 18, 21, 27, 33]. Or the same could be done using the native filter method like this:

let divByThree = function(array){
  let filtered = array.filter(function(element){
    if (element % 3 === 0){
      return element;
    }
   }
  return filtered; 
});
console.log(divByThree(numbers));

The Native Methods
Since the native methods exist, there is no need to create the function from scratch each time. The map function one that is used to iterate through a collection and returns a new array of identical length to the input array (or object) with each all elements change in a way that input function dictates. For example, all the values inside of an array could be cubed with this function:

let nums = [1, 2, 3, 4, 5];
let cubeEach = function(array){
  let mapped = array.map(function(element){
    return element ** 3; 
  })
return mapped; 
};
  console.log(cubeEach(nums));

When invoked, in the background each element of the input array goes into function, cubed and pushed into the output array. After the iterating is complete, a new array is returned and the value of cubeEach = [1, 8, 27, 64, 125].

Reduce is another native method that will take a collection and return one value. This function, typically takes in more arguments than filter and map, usually 3: an accumulator, which will be the value that is returned, the current element of the collection (as it's being looped through), and a seed that represents the value of the accumulator at the time that it is called. Suppose the sum of all value of an array are needed:

let values = [1, 3, 5, 7, 9];
let addAll = function(array){
  let reduced = array.reduce(function(accumulator, current){
    accumulator += current; 
    return accumulator;
  }, 0); 
  return reduced;
};
console.log(addAll(values));

Above, the seed is given after the function body. When the function is called the value of accumulator is 0, then at each iterations it increases and is return after the value of the last element is added. Note type of data for the seed here is a number, but depending on what you are trying to return it can be string, array, or object.

Recursion
A callback function includes a function invocation in its body as a return statement. Including callback functions can preserve values after the function has run (more on closure in a bit). Recursive functions are functions that re-invoke them over and over with one argument slightly changing with each time it is called. Below, the function will return the sum of all positive numbers less than or equal to the inputted value:

function recursiveSum(x, sum = 0){
  //base: when x has a value of 1, return
  if(x === 1){
    return sum + x; 
  }
  if(x < 0){
    return "the number is not positive";
  }
  //recurse: add the value and re-invoke function 
  else {
    sum += x;
    return recursiveSum(x-1, sum); 
  }
}

Until the base condition is satisfied, the function re-invokes itself each time with the value of x decreasing each time. The second argument is set at 0 for the first invocation but is changed each time in the body of the function. When recursiveSum(3) is called, it is re-invoked 2 more times until it hits the base condition, where 6(3 + 2 + 1) is returned.

The examples given here have been fairly simple and straightforward, but these methods/techniques can be combined with others, scaled up and/or altered to handle complex data. As a beginner, getting comfortable with these can be a useful first step on your way to becoming a Javascript expert.