DEV Community: Logan-Ward

A Fortran Primer, Puzzle, and Solution

Logan-Ward — Mon, 24 Oct 2022 10:14:29 +0000

Primer

Fortran is an old programming language that is best used for physics-based computations regarding spectra calculation and n-body simulations. Otherwise it is commonly used for large scale mathematical computations. Regardless of the reason you are seeking to learn Fortran, this primer will help you get started. First, you will need to download the Fortran compiler. Follow the steps at this website to get the compiler downloaded. Next you will need to create a file ending with the .f90 extension. Some things to note about Fortran: comments are done with !'s, the language is not case sensitive, and a Fortran file can only have one program block. Now you can get started programming with the following Fortran puzzle sourced from CodeWars.

Puzzle

If you would like to attempt the puzzle for yourself in a different language that you already know, follow the above link. The puzzle asks that you calculate the number of cubes n each of whose volume equals n^3, (n-1)^3, ..., 1^3, given the total sum of the cube's volumes m. There are multiple approaches to solving a problem like this. The first and easiest is to iteratively add the volumes of the cubes incremented by one on each iteration until the sum of the volumes equals the passed in value m. Once that point is reached, return the iterator if the sum exactly meets the m or else return -1. The more complex yet faster solution is to create a formula based on the summation of the cubes to get the value of m. That formula is shown in the code below.

Solution

Follow along with the code below to see both the iterative and formulaic solutions to the coding puzzle.

! modules are basically packages that can be used by programs
modUle testers

  ! disables a fortran feature that treats all variables starting with
  ! i, j, k, l, m, and n as integers and all other variables as reals
  ! by default
  implicit none

  ! defines a variable
  ! first argument is the data type of the variable
  ! parameter keyword specifies that this variable is a named constant
  ! selected_TYPE_kind(a) returns a kind for the specified data type that can represent all values from -10^a to 10^a
  integer, parameter :: ikind=selected_int_kind(16)
  integer, parameter :: rkind = selected_real_kind(16)

! contains blocks off the module's procedures from its global definitions
contains

  ! function definition
  ! begins with a type and kind to specify what the function will return
  ! next is the function keyword followed by the function name and its parameters
  ! optionally you can define a result variable which will inherit its type from the function
  ! the alternative to explicitly defining the result variable is to remove the result section entirely and the result 
  ! variable will default to the name of the function
  integer(16) function find_nb(m) result(n)

    ! defining the type and kind for the parameter m
    integer(ikind) :: m 
    integer(ikind) :: sum

    ! reals are a category of number that, in simple terms, can have decimals
    real(rkind) :: k

    ! Given a volume of m, return the number of cubes n where the volume
    ! of each cube is given by n^3 -> (n-1)^3 -> etc... -> 1^3 and when each
    ! cube's volume is added together you get m

    ! iterative solution
    ! n = 0
    ! sum = 0
    ! do while (sum < m)
    !   n = n + 1
    !   sum = sum + n ** 3
    ! end do
    ! if (sum /= m) then
    !   n = -1
    ! end if

    ! formulaic solution
    ! the real keyword here is used to convert the integer m into a real datatype of kind rkind
    ! the decimal tells the compiler to treat these whole numbers as reals instead of integers
    k = ((8. * (real(m, rkind)) ** (.5) + 1.) ** (.5) - 1.) / 2.
    ! merge is the ternary operator for fortran: merge(if true, if false, case)
    ! floor is the equivalent of Math.floor() in javascript
    n = merge(-1, floor(k), floor(k) /= k)

  ! end the function definition
  end function find_nb

! end the module
end module testers

! program denotes where we start the code for a file
program test

  ! gives access to the testers module defined above
  use testers
  implicit none

  ! outputs to the console in the specified format
  ! a lot to go into here, but basically the first argument to print specifies the type and spacing of the rest of the arguments
  ! A is for strings and i is for integers
  print "(A)", "Pile O' Cubes"
  print "(A, i4.0, A)", "expected: ", find_nb(9_ikind), " -> actual: 2" ! the function find_nb and the kind ikind are both provided by the cubes module
  print "(A, i4.0, A)", "expected: ", find_nb(36_ikind), " -> actual: 3"
  print "(A, i4.0, A)", "expected: ", find_nb(1071225_ikind), " -> actual: 45"
  print "(A, i4.0, A)", "expected: ", find_nb(24723578342962_ikind), " -> actual: -1"
  print "(A, i4.0, A)", "expected: ", find_nb(4183059834009_ikind), " -> actual: 2022"
  print "(A, i4.0, A)", "expected: ", find_nb(135440716410000_ikind), " -> actual: 4824"

! end the program
end program test

Conclusion

While Fortran might be a bit dated and mostly outclassed by languages like C++, there are still cases for its usage. If you decide that Fortran is the tool you need then be sure to spend the time necessary to uncover its more powerful computational tools that are relevant to your needs.

Templating JS Projects With MRM

Logan-Ward — Mon, 10 Oct 2022 12:17:16 +0000

Preface

Purpose

Mrmjs is a templating tool for setting up JavaScript applications by generating various config files according to preset specifications. This is accomplished by running either pre-made or custom tasks for each dependency in the application that requires a specific config file. Before that though, we will need to install mrm.

Installation

The command to install mrm globally is as follows:
npm install -g mrm
To prepare to create custom tasks to generate config files, navigate to your home directory. Create a directory called ".mrm". Navigate into that folder, create a file called "config.json", then run this command:
npm install mrm-core
After following those steps, you are ready to start running pre-made tasks and creating tasks of your own, as outlined below.

Implementation

Pre-Made Tasks

Mrm comes with a set of pre-made tasks that the tool is commonly used for. For example, it has a task to generate a .eslintrc file, another task for creating a package.json file, and plenty more. These tasks can be found on their website, and they can be run from the project's directory as shown:
mrm <taskname>
Replace <taskname>with the name of the task you intend to run. If you want more detailed control of how your config files will be generated, then read on to learn about creating custom tasks with mrm-core.

Customizing Tasks

Often when a developer starts expanding their toolset of linters, loaders, builders, etc they will start developing preferences and specific settings they always use when developing an application from scratch. Mrm-core is a library that lets you create tasks that will create almost anything you want on command. To create a task, first go into your .mrm directory you created then make a new directory named after your task you want to create. Inside the new directory create an index.js file. Inside that file you will use the mrm-core library to customize your task. Since there are a few different file types you can make, the below example will be an example of one of the most common file types for configs, .json.

Example

To demonstrate how to create a custom task, here I will show you a customized eslint task named eslintairbnb.

// in the index.js file of the eslintairbnb directory
// import the mrm-core tools you need for the task
// json will help with creating .eslintrc and lines will be used to create .eslintignore
const { json, lines } = require('mrm-core');
// export the task
module.exports = function eslintAirBnb() {
  // create the json file
  json('.eslintrc')
  // use .set to create the json object (you can use merge to update an existing object instead)
  .set({
    // add your preferred eslint settings
    "extends": ["eslint:recommended", "airbnb", "airbnb/hooks"],

    "env": {

      "es6": true,

      "browser": true

    },

    "parserOptions": {

      "sourceType": "module",

      "ecmaVersion": 9,

      "ecmaFeatures": {

        "jsx": true

      }

    },

    "rules": {

      "import/extensions": ["warn", "always", {"ignorePackages": true}],

      "no-unused-vars": ["warn", { "vars": "local", "args": "after-used", "ignoreRestSiblings": false }],

      "no-use-before-define": ["off"],

      "no-shadow": ["off"]

    }

  })
  // save the new file
  .save();
  // while we are at it lets make a .eslintignore file
  lines('.eslintignore')

  .add([

    '**/.eslint*',

    '**/.vscode',

    '**/node_modules',

    '**/dist'

  ])

  .save();

};

Summary

Ultimately, the value of Mrm will come down to how often you are spinning up new JavaScript applications. If you have found yourself creating the same files, tweaking the same configs, and templating the same file trees consistently, then consider giving Mrm a try. The initial investment to setup the tasks will easily outweigh the time saved in future applications.

Intro to Babylon.js

Logan-Ward — Mon, 26 Sep 2022 12:29:42 +0000

Introduction

Using Babylon.js can be daunting if you have had little or no experience with 3D rendering, so this guide is targeted at total 3D beginners. Babylon allows websites to create interactable 3D environments directly in the browser. What is important to remember when starting with Babylon is that it is just another JavaScript library. Even though it works with 3D meshes and materials, ultimately those are just different resources imported into the site like any other. In the case of materials, they are often regular jpeg or png images. If a site is programmed directly in the html, the Babylon scenes will be defined in a script tag, if the site is made in react, the scene will be created in the jsx files. With this in mind, lets cover the main use cases for Babylon, the main components involved in making a scene, and an example scene to bring it together.

Usage

3D environments and objects have always been primarily used by the game development community where the demand for interactivity is obviously the highest. Babylon can be used to create entirely online video games playable in the browser or in desktop/mobile applications if the web game code is properly ported over. The level of game complexity and fidelity is limited by the user's computer just like with native games, but more on 3D limitations later. There are plenty of other use cases for interactive 3D models though. A popular commercial usage is allowing a user to customize a product in their browser and see the result from every angle instead of having to scroll through a series of fixed images that might not accurately reflect their custom changes. If your tastes are more eccentric, then these 3D objects could be used to integrate into the navigation and styling of your website, as will be demonstrated in the example below. There are plenty of other uses for web-based 3D environments, but before they can be realized through Babylon we will need to learn about what a Babylon scene is comprised of.

Babylon.js Scene Components

A Babylon scene is the container for your 3D creation and is primarily comprised of the following parts:

Cameras - The perspective of the user
Lights - The illumination of the scene
Meshes - The shape of 3D objects
Materials - The appearance of 3D objects
Vectors - The position of 3D objects
Events - The user's interactions with the scene

Depending on their implementation, cameras can range from having a fixed position and direction to being completely controllable by the user. Lights have plenty of variations and brightness settings to light the scene appropriately. Meshes are the meat of 3D environments as they are the actual objects being shown and manipulated. Materials are most often images that are overlaid on the mesh to simulate texture. Vectors are used to position and rotate all of the above objects in three-dimensional space. Finally, events in Babylon are very similar to events in HTML and React, in that they return an event object related to the specific action taken by the user. With this surface-level understanding of the various components of a Babylon scene, lets take a closer look at how they are implemented.

Example - Overly Complex Webpage Navigation

Babylon makes use of a very useful tool called playgrounds that allow developers to create and share their 3D creations very easily to learn as a community. This is the playground I started from to create my example. After I customized it to my liking, I downloaded it, and it automatically converted into an HTML document as seen below. Follow along with the comments, and experiment with different changes to start getting a grasp of how to use Babylon in an HTML application.

Conclusion

In summary, Babylon is a JavaScript library that allows developers to create interactable 3D scenes for anything from gaming to product simulation, and the scenes are comprised of several distinct components that simulate the virtual environment. There are some important drawbacks to consider. For one, all of this processing is dependent on the user's computer specs, so unoptimized scenes can be completely unusable to certain users. If this is a major concern and you still want to implement 3D elements on your webpage, then consider researching real-time 3D rendering. This version of 3D rendering takes the onus of rendering off the user's end and transfers it to a more powerful central server. Otherwise focus on optimization and making the best use of Babylon's feature-rich 3D rendering library.

A Conceptual Overview of Virtual Reality Applications

Logan-Ward — Mon, 22 Aug 2022 12:43:00 +0000

Introduction

In an endeavor to future-proof this discussion of a highly complex and evolving field, I will mostly discuss the structure of virtual reality and augmented reality applications with only limited mention of any particular contemporary implementations. Any quick browser query will tell you what languages are currently most popular for VR programming, but speaking more specifically on how to approach structuring a VR application from a conceptual level without referring to the specific hardware used to create it is a different beast entirely. To that end, the three major steps of formatting VR and AR programs are:

Input Channels
Input Parsing
Output Channels

As you may have guessed, we are focusing on the primary part of these applications that functions completely differently from normal computer applications: the means by which the application communicates with the user.

Input Channels

Inputs are the most important and most volatile part of VR programming, both from a hardware and software perspective, as new technologies and old mesh together to provide the greatest degree of control and freedom in how a user interacts with your 3D world. That volatility comes from the many improvements and redesigns that regularly overtake the VR space and both vastly improve the abilities of developers while also potentially invalidating their previous work. As an example, in one implementation of a VR application the user might use joysticks that have positional data relative to a headset that the developer can then use, through varying levels of abstraction depending on their framework, to determine what the user intends to interact with and how they intend to do so. However, another variation of the same resulting output to the user could be implemented by eye-tracking technology coupled with an outgoing camera on the headset that could determine the user's intent by their hand's position and shape. Both of these examples achieve the same result of allowing the user to interact with their virtual environment, but in terms of how the user's input is received by the developer, they are completely different. So the first step to developing a VR application is understanding how you will be receiving data from the user, and what level of abstraction you will be dealing with.

Input Parsing

Once you have a grasp on the types of input you are receiving from the user, the next step is to analyze these inputs to extract their intent from them. In the previous example, we briefly touched on how you can track hand and eye position with cameras and other sensors so you can map their position onto the virtual environment. In these VR environments, context is the basis for all input parsing. If the user is pointing a finger and it is positioned on a button element in your 3D environment, that input can be interpreted as a button press. If they are making the same hand gesture but are in a fantasy video game environment, they might cast a spell based on their hand shape and the presence of an enemy in the direction the user is pointing. On a lower level of abstraction, depending on what level of VR programming you are doing, you might need to be able to understand the precise outputs of a sensor and how it translates to 3D space. Gyroscopes can relate information about movement and rotation, cameras can parse highly valuable and specific data about the user's physical build, position, and environment, and even more advanced sensors can read muscular signals to glean user intent. Thus, the second step in VR programming is to learn how to translate the variety of user inputs into usable data and actual changes in the virtual environment.

Output Channels

Finally, when the user's inputs have been translated and mapped to their environment, the various means by which the environment responds to the user are our output channels. The most obvious and commonly used at the time of writing is the headset that visually and audibly presents the 3D environment to the user. This feedback aspect of VR is in constant development as well though. One technology that has been gaining traction lately is haptic feedback: physical outputs that are usually transmitted through vibrations or adjustable resistances on VR controller triggers. To go back to the fantasy video game example, picking up a light object and throwing it might result in minor vibrational feedback, but grabbing and holding a large weapon might produce stronger resistance from the trigger when squeezed. While this part of the VR experience is currently not as varied as the input side, it is still important that you understand what avenues of communication are available to you when producing feedback for the user from their actions in the virtual environment.

Conclusion

To recap, the three most important things to keep in mind when programming a virtual reality application in any language or framework are: the types of inputs you will receive from the user, the way you interpret these inputs and translate them to the virtual environment, and the available means by which you can output the results of the user's actions in the virtual world. With this format in mind, you can effectively strategize your implementations of virtual or augmented reality across any number of applications, from interactive 3D videos to sprawling virtual sandboxes. If you are looking for how to get started in VR application programming from here, I would suggest researching frameworks for the type of applications you are interested in and starting there.

Sources

https://en.wikipedia.org/wiki/Virtual_reality

An Entry-Level Guide to Note-Taking and Organizational Tools

Logan-Ward — Mon, 15 Aug 2022 11:40:00 +0000

Preamble

Who is This Guide For?

This guide is intended for those who have minimal experience in using note-taking, planning, or information-manipulating tools more advanced than a calendar app or a word document. If you have found yourself seeking more effective and rewarding methods to organize your thoughts and are trying to find your bearings, then follow along.

What Will This Guide Cover?

Information to keep in mind when picking organizational tools; pitfalls and caveats abound, so being forewarned of them wins you half the battle.
A recommended minimal-investment setup based on the assumption(given where you found this guide) that you are a software developer of some description.
- A description of the use-cases for each suggested tool
- A short guide on how to start using each tool
Directions on how to branch out from here and some suggested reading

Important Info

Usage

The first thing to think about before picking any service is what you will be using it to accomplish. If you are a student or someone who works in an evolving field, you might need an application that enhances your note-taking capabilities. If your job or hobby is heavily project-driven, you could be in need of an organizational workspace that tracks your progress and remaining work to complete an ongoing project.

Pricing

Another important point is pricing: choose whether you can afford to invest in a subscription-based service or that you might need to settle for a potentially feature-lacking free option. The setup in this guide will be entirely free as of the time of writing, but there were some compromises that needed to be made.

Personal Requirements

After establishing what you need and can afford, turn your attention next to how you will engage with it.

Do you need an application that is available cross-platform and synced across devices?
Will you be consistently working from the same device and instead might value an application that is available completely offline, thus reducing latency?
Importantly, will you need to collaborate on the work you are planning/organizing?

Answering these questions and establishing your personal needs in advance will make sifting through the vast mountain of options much simpler.

The Little Things

Finally, and most importantly to making your final decision, understand that the deluge of available choices means that you can afford to be picky. Since investing in these tools is a long-term process, missing, incomplete, or off-putting features that you might otherwise overlook can instead be deal breakers. For some personal examples, I will not use an application that cannot be set to dark mode by default, I passed up on one visualization tool for another because the latter allows you to navigate by right-click dragging, while the former uses middle-click dragging, and I even crossed out a few because I didn't like the style of the UI. Especially when these tools are often not open source and are only available online, little things like key-bindings and appearance are often impossible or very difficult to customize without extraneous effort on your part. Spend a little extra time trying to find out what is important to you, as small as the features may be, before finalizing your choice of application.

Filling the Toolbox

Overview

To reiterate and lay the framework, let's describe the person this toolbox will be designed for. You are a software developer or someone working in a similarly evolving/project-based field, you want to start using a note-taking tool to keep track of the knowledge related to your expertise, and you would like to have a broader tool that can be used in conjunction with your projects to plan, track your progress, collaborate, etc. You also want your tools to be platform and device agnostic, and you want them to be available offline when possible. Lastly, you are willing to do some legwork to get this system running, including learning a simple text-formatting language. With that out of the way, let's finally talk about the first recommended tool of this guide, Obsidian.

Obsidian, Our "Second Brain"

Obsidian is newer to the note-taking scene, but it has several compelling points that have swiftly garnered it popularity and solidified its position on this list. In, their own words,

Obsidian is a powerful knowledge base on top of a local folder of plain text Markdown files.

Obsidian is an entirely offline application that we will use to take notes, develop ideas, and associate these notes and ideas with each other through a method called "backlinking." Backlinking simply means that when a note is created, we can open up a Linked Pane that will show places in our note where we mentioned a word or phrase from another note and can choose to link those notes to form a connection between them. Once we have enough of these notes linking to each other, we can visualize and navigate them through Obsidian's hallmark sexy graph view:

Onto the details, Obsidian's free plan only blocks you out of syncing across devices, a setback that can be bypassed by storing your Obsidian files in locally available cloud folders such as Google Drive/OneDrive. The app is supported by hundreds of both official and community-made plugins to customize, enhance, and completely alter your experience as needed. Lastly, Obsidian uses a simple text-formatting language called Markdown that is very easy to use, even with no prior experience(this entire article was made using Markdown). Now let's talk about the managerial tool, Notion.

Notion, the "Big Brother"

Notion is a much more complex tool on first look than Obsidian, and that complexity can be off-putting. The ways we can displace that complexity are through some easily accessible features of the browser application. The first is templates. Other people have already done some of the work for you, so use their creations as jumping off points. If you need a calendar that links its events to pages of plans for part of a project, or you need a table linked to a database relevant to you, then choose a template that gets you most of what you need and work from there. The two main ways you will format and choose inputs yourself is through the "/" key and by highlighting a section of text. Both of these options will open a context menu allowing you to insert a data structure or change the current selection into a different data structure. For our purposes, we will focus on using Notion as a project manager, task planner, and general tool for filling gaps in our organizational needs.

Miro, the "Looker"

Miro is the part of the equation where you lose the most by not paying for the premium version. In simple terms, Miro is the visualizing tool that we can use for anything from flowcharts and mood boards to whiteboard style drag-and-drop post-it notes to illustrate and brainstorm ideas. The unfortunate cost of being on the free version is that, amongst other restrictions, you can only have three of these boards up at one time. So the workflow we will use here is to use Miro to create a visualization, export it as an image or pdf according to need, then delete it from our boards to free up space, This does mostly preclude us from having more than one ongoing visual representation, but having a tool that can do these visualizations at all is worth the hassle.

Bringing It All Together

To recap:

Obsidian is the simple yet customizable note-taking tool that will develop a mind-map of knowledge and show us links within that knowledge that we might not have realized ourselves
Notion is the flexible and powerful managerial tool that will outline our projects, link our tools and applications, and keep us on track
Miro is our easily available visualizer for when text, graphs, and tables won't do the trick

There are a thousand and one other bits of information to learn about each of these tools that were not covered here. Experiment, look up guides, and branch out if any of them are not working out for you. Two resources that are helpful in making these decisions from a broader standpoint than what was discussed here are this article about types of note-takers by Anne-Laure Le Cunff and this article about types of note-taking applications by Cameron Flint. Once you've finished packing and understanding your toolbox, you will become a much more capable learner and creator.

Web Animations API - A Compelling Case

Logan-Ward — Mon, 08 Aug 2022 12:59:00 +0000

When implementing an animation on an HTML document, the natural first reaction is to turn to CSS and handle animations through that avenue. However, instead of having an entirely separate document for handling these animations, we can make use of the versatile web animation tool, Web Animations API. Web Animations API, WAAPI for short, can be utilized entirely within the JavaScript framework and works directly in reference to DOM elements that could be manipulated by CSS. WAAPI has a wide range of tools, information, and control regarding web element animations. Read on to find a breakdown of the major components and syntax of a WAAPI animation, a quick example of how to code an animation using these components, and a brief overview of the advantages of WAAPI over some of its contemporaries.

An important concept in animation as a whole, is that of keyframes. Keyframes are the starting and endpoints of a particular animation. As an example, in an HTML document you might have an image with a specific top and left position. If you were to animate that image to move to a new position, that image with its new location data would be the second keyframe, with its old position being the first. Keyframes in the context of Web Animations API can even include in-between keyframes of an animation, such as an image that moves to one new position, then moves to a second position following that animation, for a total of three keyframes. The number of these in-between keyframes is not limited to three, but as many keyframes as you put in the keyframes array. But more on that later, let’s talk about animation timing.

Animations can be described, in the context of HTML webpages, as a series of transformations on an element occurring at specific moments on a defined timeline for that animation. In the broader scope, each of those animation timelines are placed on the entire HTML document’s timeline. By default, these transformations will occur equally spaced along the animation timeline, but they can have their start and endpoints explicitly defined. Furthermore, the current time of a specific ongoing animation can be accessed as well. Now that we have covered the component parts of an animation, let’s delve into the animation itself.

When an animation is started, it returns an animation object that allows you to access various data regarding the ongoing animation. Some examples of this data are playState which is what stage of the animation process the animation currently is in, finished which returns a Promise(a blog post all unto its own) that resolves at the completion of the animation, pending which returns a boolean value indicating whether the animation is waiting on other asynchronous code to resolve before beginning, and plenty others. It also allows you specific tools to control that animation as well. Animations can be paused, started, finished, reversed, cancelled, and more. Animation objects can also be created directly with the animation constructor, allowing you to create the animation without having to pause it immediately and use it whenever you want.

Now that we have outlined the tools and their structure, lets look at an example. Below I have a code example of how to animate an HTML element using WAAPI:

// First we want to define our keyframes in an array
// These will look very similar to keyframes in CSS
let targetKeyframes = [
  {transform: 'rotate(0deg)'}, 
  {transform: 'rotate(180deg)'},
  {transform: 'rotate(360deg)'}
  ];

// Now define the duration of the animation and the 
// number of times to run the animation
let targetTiming = 
{duration : 2000,
 iterations: Infinity};

// Finally, run the animation with your chosen HTML
// element
document.getElementById("target").animate(
  targetKeyframes, 
  targetTiming);

When this code is run on an HTML element that can be animated, the element will rotate until the animation is cancelled elsewhere or the page is closed. Now let's brush over a few of the advantage WAAPI holds over CSS animations and other web animation tools.

In comparison with CSS animations, WAAPI can be applied directly in the JavaScript file of your webpage which allows for a host of benefits. For example, because you have access to the logic and functionality of your webpage inside the JavaScript file, you can defined and manipulate aspects of your animation based on this information that might be inaccessible or difficult to access from CSS files. In comparison to animation through jQuery, aside from having a broader suite of animation tools and control than jQuery, WAAPI can directly refer to HTML elements when animating, whereas jQuery requires that all HTML elements be wrapped in a jQuery object to interact with them. For these reasons and more, Web Animations API should easily make a space in your toolbelt for web page development.

Arguably, the best part of WAAPI is that it doesn't try too hard to reinvent the wheel. The types of animations all function similarly to CSS, the layout of the keyframes is similar, and the keywords themselves are derivative of their forbearers. Where WAAPI shines is increasing the readability, utility, and control of these tools and making them available in a broader context.

Sources: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

Reducing Reduce

Logan-Ward — Tue, 14 Jun 2022 21:12:09 +0000

Higher order functions as a whole can be challenging to understand as a novice developer. The thing that separates reduce from its counterparts though, is that reduce is not nearly as immediately intuitive. Filter filters array elements with a function, map changes array elements with a function(admittedly this one only makes sense if you understand the verb form of map), forEach calls a function on each array element, and reduce... reduces the array to a single value? It just doesn't quite make as much sense up front as the others do. So let's _reduce _that confusion.

As silly as it might have sounded, the meaning behind the name of reduce is likely as simple as "reduce the array to a single value." While the common implementations of reduce may not be so straightforward, that can be considered an accurate definition. Another way to think of reduce is as a transformation or condensation. Transform the given array into a data type you need or condense the array into a value you need.

Now let's talk about the syntax of reduce:
array.reduce(function(previous, current, index, array){}, seed)
array in this case is the array we are calling the reduce function on, function is the function we are going to pass each element of the array into, previous is the result of the "reducing" the array that we are building over the course of the reduce call, current is the current element of the calling array, index is the index of the current element, array is the calling array, and seed is the base value of whatever we are trying to reduce the array to. The index and array inputs for the function are optional, include them if you need to have access to those values for your operations. The most important components of this call are the previous and seed values. Previous is what we are manipulating and returning in our passed-in function, and seed is essentially the first value for previous. By default, seed will be set to 0.

Now that we've gone over the syntax, let's see some simple use cases and examples of how to use reduce. The easiest and most directly implicated use for reduce is to get a sum based on the elements of an array like so:

let array = [0, 1, 2, 3];
// prints "6" to the console
console.log(array.reduce((sum, num) => sum + num, 0));
// or
array = [{num: 0}, {num: 1}, {num: 2}, {num: 3}];
// also prints "6" to the console
console.log(array.reduce((sum, ele) => sum + ele.num, 0));

In each call of the passed in function, the current number is added to the sum then returned and assigned to the next sum to continuously update the total. The important thing to remember when using reduce is that whatever you return in the passed-in function will be what is assigned to the "sum" or "previous" value for when the function is called on the next element. Here is an example of getting a count of the elements that pass a certain test:

let array = [0, 1, 2, 3, 4, 5, 6];
// prints "4" to the console
console.log(array.reduce((count, num) => num % 2 === 0 ? ++count : count, 0));

In this implementation of reduce, each call of the passed in function will check whether the current number is even then increment the counter accordingly until a count of the number of array elements that are even has been returned. Using the earlier concept of accessing specific data from more complex elements and this concept of conditionally changing the return value, let's look at some more advanced use-cases for reduce.

Sometimes when calling reduce on an array, we want to use the elements in the array to create a complex data type rather than "reduce" them into a primitive data type like an integer sum or a string. An example:

let array = [
{firstName: 'Bilbo', lastName: 'Swaggins'},
{firstName: 'John', lastName: 'Hancock'},
{firstName: 'She', lastName: 'Ra'}];
// prints an array of the full names of 
// each of the array objects to the console
console.log(array.reduce(function(arr, person){
arr.push(`${person.firstName} ${person.lastName}`);
return arr;
}, []));

For this implementation of reduce, we used the seed value to create an empty array that we then populated with values derived from the elements of the calling array. In the next example we will combine the concepts of filtering elements and constructing a complex data value:

let array = ['a', 'ab', 'abc', 'abcd', 'abcde'];
// prints an object with the two properties being 
// arrays of the string elements that are longer 
// or shorter than 3 respectively to the console
console.log(array.reduce(function(obj, ele){
if(ele.length > 3){
obj.longerThanThree.push(ele);
}
else{
obj.shorterThanThree.push(ele);
}
return obj;
}, {longerThanThree: [], shorterThanThree: []}));

As shown, the reduce function was used here to to both filter the elements and use them to construct a complex data type all in one function call.

Although the examples given here are a bit forced, the less obvious applications of reduce should be more apparent now. Instead of being a nebulous concept of reducing an array, reduce should instead be viewed as a tool to transform the data in an array into a more readily usable form, or condense its elements into a desired result.