DEV Community: Samuel Littell

TS Part 2: Getting Started with TypeScript

Samuel Littell — Mon, 12 Dec 2022 00:11:13 +0000

So in my previous post we learned a little bit about the background, history, and purposes of TypeScript and how it could potentially be used, or not used, for your application's development. Now I want take a look at some of the basic TypeScript fundamentals and how to get started using TypeScript in your React or JavaScript projects.

First, a simple way to initialize a new React project with TypeScript is to utilize npx create-react-app my-app but with --template typescript following it. So simply pop open your terminal, set it to the desired directory, and input the command: npx create-react-app my-app --template typescript. So now, you will have initialized a new React app set-up with all of the TypeScript dependencies needed for your project. Immediately upon opening your "my-app" directory in your source-code editor, the first thing you'll notice is that all your files are now followed by the .tsx extension, as opposed to .jsx. But, if you already have a React project in progress, you can add TypeScript by installing it with the command: npm install --save typescript @types/node @types/react @types/react-dom @types/jest.

If you're not using React and want to implement TypeScript in your JavaScript/HTML project, you'll need to first run the command npm init -y which will load your package.json file with your dependencies and scripts inside. Now, simply install TypeScript with the command npm i --save-dev typescript. You should now see TypeScript loaded into your dev-dependency list, which we put there since TypeScript is not required for production. On top of this you will need to load your tsconfig.json file which will contain a boiler-plate list of default TypeScript properties which are either commented out or uncommented. Simply uncomment out any other properties to activate them. To load the config file use the command: npx tsc --init. Lastly, there are multiple options to compile your TypeScript code into JavaScript, and to bundle your files, but in order keep this short, I would highly recommend researching those options on your own, and see what is best suited for the application you're developing. (Snowpack apparently has a very quick/easy set-up for TypeScript Applications.)

In my previous TypeScript post we quickly took a look at some of the very basic typing, such as string, number, and boolean. But what if we need to type something a bit more complex, such as an array? Or what happens if an array needs to contain multiple types?

To type an array we need to first declare our variable and assign it a type. This can be any type, but in order to apply it to an array, it needs to be followed by square brackets, giving you something like this:

// Declaration
let arrayStr: string[];
let arrayNum: number[];
let arrayBool: boolean[];

// Initialization
arrayStr = ['Apple', 'Orange', 'Banana'];
arrayNum = [1, 2, 3, 4];
arrayBool = [true, false];

// TypeError: 'string' is not assignable to type 'number'.
arrayNum = [1, 2, 3, '4'];

or using generic array type syntax in your declaration is another option:

// Declaration
let arrayStr: Array<string>;
let arrayNum: Array<number>;
let arrayBool: Array<boolean>;

// Initialization
arrayStr = ['Apple', 'Orange', 'Banana'];
arrayNum = [1, 2, 3, 4];
arrayBool = [true, false];

// TypeError: 'string' is not assignable to type 'number'.
arrayNum = [1, 2, 3, '4'];

Now, if we want our array to contain different types, we can utilize what TypeScript calls a Tuple. A tuple can contain multiple types of data. To achieve this we simply declare our types wrapped in square brackets, then initialize with the corresponding values, like so:

// Declaration
let tuple: [number, string, boolean];

// Initialization
tuple = [1, "opSpark", true];

// TypeError: Type 'number' is not assignable to type 'string'.
tuple = [1, 4, true];

or if we need to wrap our tuple into an array, try this:

// Declaration
let tupleArr: [number, string][];

// Initialization
tupleArr = [[1, 'Sam'], [2, 'Student'], [3, 'opSpark']];

// TypeError: Type 'boolean' is not assignable to type 'string'.
tupleArr = [[1, 'Sam'], [2, 'Student'], [3, false]];

Finally, let's take a look at objects. Objects are fundamental to the way we move and group data in JavaScript. So, how can we define an object using TypeScript? There are actually two ways to declare an object, and the first really isn't recommended. Let's take a look at this:

// Declaration
let anObject: Object;

So this is a completely valid way to define an object in TypeScript, but an object can have a lot of different properties inside of it. So how can we validate that the object we are trying to utilize contains the corresponding set of types? Well, TypeScript provides us with a type keyword. To use these just start with the type keyword followed by the name or "alias" of your object. By utilizing objects in TypeScript not only can we assure that the correct type is being used, but also catch missing properties, check it out:

// Create type alias
type Object = {
  name: String;
  age: Number;
};

// Initialize / Declare an object with new type created
let anObject: Object = {
  name: 'Sam',
  age: 35
};

// TypeError: Property 'age' is missing in type 
// '{ name: string; }' but required in type 'Object'. 
let anObject: Object = {
  name: 'Sam',
};

// TypeError: Type 'string' is not assignable to type 'Number'. 
let anObject: Object = {
  name: 'Sam',
  age: '35'
};

So there you have it! I hope this was helpful and shows how catching type errors at the time of compile, and not later at runtime, can be super helpful and an efficient way of correcting your code. Hopefully TypeScript can become an important part of your workflow. Happy coding!

TS Part 1: What is TypeScript?

Samuel Littell — Mon, 05 Dec 2022 04:17:40 +0000

Typescript, put simply, is a superset of JavaScript that is object oriented and is considered "strongly typed". A strongly typed programming language is one in which restrictions are firmly enforced when mixing different data types and values. These restrictions can ensure a consistency of results, but at the sacrifice of flexibility. Whether or not that sacrifice is worth it is up to the developer or depends on the type of application being developed.

TypeScript was created in 2010 when JavaScript was still perceived as a programming language that wasn't really capable of handling large scale applications. Microsoft acknowledged this perception and chose to do something about it, thus creating what we now know as TypeScript. In 2012, Anders Hejlsberg, a core Microsoft developer of TypeScript, said "JavaScript was never really designed to be a programming language for big applications" and that JavaScript "lacked some of the structuring mechanisms that you need in large applications like classes and modules and perhaps interfaces." So Microsoft built TypeScript on top of JavaScript which allowed them to create the ideal development platform they desired, while still benefitting from the broader JavaScript ecosystem. Today most of Microsoft's former objections about JavaScript have actually been solved, but even with those improvements, TypeScript is still very valuable.

_**Anders Hejlsberg (co-creator of TypeScript)**_

In dynamically typed languages like JavaScript, you don't necessarily think about the types of data in your code, at least not as much as you would in a statically typed languages. Variables, for instance, are containers for values, but when you use variables in your code, you may not necessarily be considering their types. In a larger apps you can have hundreds or thousands of variables in your code, and if you're not careful, you can introduce bugs by mistakenly referencing a variable with the wrong type. TypeScript allows the developer to define what type a variable will be when that variable is declared.

// JavaScript
let city = 'New Orleans';
let zip = 70130;
let visited = true;

// TypeScript
let city: string = 'New Orleans';
let zip: number = 70130;
let visited: boolean = true;

So in the example above we see the city, zip, and visited variables declared in JavaScript, and then updated with Typescript. Now city must always contain a value with a type of string, zip with a type of number, and visited with a type of boolean.

TypeScript can also be thought of as a type of linter. It can validate your code similarly to Prettier or ESLint, and makes troubleshooting problematic code a bit easier. TypeScript can autocomplete your code as it's written, warn if a function is used incorrectly, alerts you if an object is missing a required property, or even something simple, like letting you know if a return value is missing at the end of a function.

Finally, TypeScript can also be thought of as a compiler, which means it can take JavaScript and TypeSript code and transform them to support different features for older JavaScript engines. So TypeScript is actually a bit more than simply just adding types to JavaScript!

Resources:

UXUI Part 2: Getting Started with Figma

Samuel Littell — Mon, 28 Nov 2022 14:54:28 +0000

The UX/UI tool I'll be taking a look at is Figma, which is marketed as a "collaborative interface design tool". Considering there are multiple other design and prototyping applications out there, I chose Figma primarily based on a quick search, which yielded thousands of positive user responses from the design community. I did find other design tools appealing, such as Adobe XD and Sketch, but Figma seemed to have a more devoted fan base supported by a plethora of easily available content such as documentation and tutorials. Coming from a developer point of view, I feel as though examining Figma and the UX/UI design process will better prepare me to have a more streamlined and flexible relationship with a design team, before injecting their design with code from the front-end.

At a quick glance it's immediately obvious that Figma's main emphasis is collaboration. It's primary user interface is browser based and allows for a live and simultaneous multi-user work environment. Users can also choose a desktop application for windows and mac, although the desktop applications also require internet access. The built-in online/cloud nature of Figma allows for large teams to always be in sync with a project, and files never need to be sent manually or stored else-where for access. Users can also drop comments directly into a design project for instant feedback and communication. A free account is simple enough to set-up, just go to the Figma website and login either manually or using your google account. A free account is allowed up to 3 working files before you're forced to purchase a premium subscription plan. These are set-up for either individuals using the application or entire organizations, and can range from $12 to $45 per month for the design plans. But, if all you need from Figma is its whiteboarding/presentation/planning capabilities, there are cheaper plans available (aka FigJam) ranging from $3 to $5 per month as seen below:

Figma has an important role in the UX/UI process. It can create rapid and high-res prototypes of applications and websites, and can also include some interactivity. While the prototype you create is merely a loose mock-up of the finished product, it's still capable of going to peers, developers, or clients for testing. This means before the user puts a ton of work into a full scale application, they can get important and instantaneous feedback from their presentation prototype. So before moving forward, and stepping outside the scope of the design stages in the creation process, important information can be collected. At this point, if changes to the design need to be made, they can be made really quickly in Figma, until a desirable response is received, and then coding / development will pick up the project from here. The passing off stage between the designer and developer can be a complicated one. But luckily applications, like Figma and others, can assist and ease some of the struggles of this process, and create a more desirable work flow.

When first starting a new design draft in Figma, it can be a bit intimidating. You are immediately greeted with a rather blank and minimal user interface with a simple iconographic tool bar (as seen above), but once you get past this part, the software really begins to open up. It appears the first step in designing your prototype is selecting a frame size. This can be done by simply drag and dropping out your custom frame size, or selecting from the frame size presets that Figma provides. These include mobile phone screen sizes, tablets, or desktop sizes, among many others. Once your frame size is selected you can begin to work with primitive shapes, and lay out the foundations of your design. In the small time I played around with the shapes in my workspace, I noticed subtle snapping, locking, and spacing assistance that Figma provides to speed up the design process. Here is a quick submission form mock-up I created:

Adding text components to your design is also done with ease. Simply selecting the text editor and creating your text box area allows you to play and experiment with many different text styles and font combinations. Similarly to the shapes discussed above, Figma provides "smart" guides for snapping and aligning your text quickly and easily. Another plus, is that Figma comes preloaded with Google Fonts, as well as allowing you to import any locally stored fonts from your personal computer. I was pleasantly surprised seeing Roboto set as my default font upon start up. Here are a few text styles I played with:

I'm just barely scratching the surface here, there are tons of features that Figma can provide including: creating animations for rollover or onclick events, transition animations between frames or slides (as seen below), and even plug-ins which can help generate rough code based on your design. In conclusion I think Figma is a pretty fantastic design tool. It's ease of use, combined with a highly collaborative work environment makes for a powerful and communicative application that can assist in translating design into an interactive finished product. I hope this soft introduction was helpful and hopefully sheds some light on the UX/UI process. Happy designing.

Resources:

UXUI Part 1: A Look into UI & UX Design

Samuel Littell — Sun, 16 Oct 2022 21:05:52 +0000

(Cover Image Source: Link)

From afar, UI and UX design careers appear to be one of those things that anyone can break into. If you understand people, how they interact with things, and what they like, you essentially understand UI and UX. People from several different types of backgrounds and degrees end up in this growing field. It's where psychology meets design, and where design is king. But what is the difference between the two, and how has UI/UX become such a prominent subject in tech today?

“UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse.”
— Dain Miller, Web Developer

On the most basic level UX can be summed up as how things work, while UI is how things look. This may be a grand oversimplification, but in order to differentiate between these two overlapping subjects, it's simply easier to draw a line in the sand. Another way you could think about it, is that UI is a sub-category of UX, and UX is kind of an overarching topic that encompasses UI. UX can mean several different things, while UI is a bit more specific.

UI, or user interface, is a graphical thing; colors, branding, and making users remember you or your brand are essential ideas to effective UI. Given these things, you can easily imagine someone with an arts or design degree would be strongly suited for UI. Someone who can make effective decisions about a simple button click animation or imagery on an app/website, can drastically improve traffic to your business, and create a deep feeling of connection with your target audience. But strong UI can also be beneficial outside the scope of capitalistic endeavors. Web features like larger fonts, accessible colors, high contrast environments, and interchangeable visual modes can add value for individuals with impairments. This can all be achieved by using and implementing well thought out UI design.

“People ignore design that ignores people.”
— Frank Chimero, Designer

UX, or user experience, is about experience. (Duh) It's about how something looks and works in order to create an easy and enjoyable experience for the user. Getting feedback from users is also very important. Testing things, getting feedback, and then deeply analyzing that feedback is important to the UX process. You must ask yourself, on a psychological level, what appeals to a user, and compare what they like vs. what they don't like. Is the user having a good experience regardless of how the product works? Does the user learn to use your product easily? These are just two of the many questions you can ask yourself in the planning and analysis stages of successful UX design.

“If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”
— Albert Einstein, Theoretical Physicist

To better understand the concept of UX design lets take a quick look at the 5 key stages of the UX process according to CareerFoundry:

First stage: In the understand stage, we take a close look at what users or customers want/need from your build, and then create a concept that actually solves or addresses those wants/needs. At this point it's important to pay attention to the small details.

Second stage: In the analyze stage we examine how users already perceive a product, and then understand how weaknesses in the product should be addressed or where to maintain the product's strengths. This could be done by intense testing, or just simply asking the right questions in regards to your finished product. This stage is where a cohesive direction for your design is born.

Third Stage: Simply put, in the ideate stage we come up with ideas. This is where the problems we worked so hard to comprehend in the previous stage are addressed, and we come up with concrete ideas to fix those problems. This stage can be accomplished in several ways including digitally, in person meetings, or brainstorming on your own.

Fourth Stage: In the validate stage we take our idea or ideas from the previous stage and put them to the test. Assuming multiple ideas were generated in the third stage, this is the time where bad ideas are filtered out, and the great ideas rise to the top. This stage can be accomplished by sketching mock-ups or creating prototypes to mimic your final product whenever it may come to fruition.

Fifth Stage: The iterate stage occurs throughout all five stages. It is the process of revisiting and re-researching your previous problems, ideas, and concepts. This stage is something that can always be built on and improved. It essentially never ends because products and user are always changing/evolving.

So there you have it, a quick look and introduction into the world of UX and UI design. As someone leaning more towards the front-end development side of web/software engineering, this was incredibly helpful in understanding the important processes that occur when creating a finished product. I hope it was also helpful for you!

(Vin Diagram Source: Link)

Elixir Basics

Samuel Littell — Mon, 10 Oct 2022 00:54:49 +0000

Before I begin this blog, I think it would be wise to preface it with a brief statement. As someone who is in the early stages of their JavaScript learning journey, it may seem a bit premature to venture out into unknown territory. That territory specifically being another programming language, of which I probably have no business exploring. But I do believe this will be beneficial. Seeing another language's inner workings and understanding its syntax and data types (even on a basic level) will maybe shed some light on how and where to address my weaknesses with JavaScript, and with coding in general.

Elixir is a functional programming language released by José Valim in the year 2012. It has gained a pretty substantial fan base since then, and is utilized in companies by the likes of Motorola, Pinterest, and Discord (among many, many others). It runs on top of the Erlang Beam virtual machine, which was actually developed in the 80s to scale the growing demands of phone switching. Elixir was essentially created to make the Erlang technology accessible to the every day developer. Elixir has a minimal and dynamically typed syntax inspired by Ruby, which makes it more approachable than other languages. Also, it's Phoenix web framework is responsible for the creation of thousands of full stack web applications.

Installing Elixir on your machine is a breeze. Simply visit the Elixir installation page and find your operating system in the installation list. For MacOS you simply run a command in your terminal, or for Windows follow a quick series of installation prompts, and voilà, you have Elixir installed. No need for path configuration or anything like that, just a straight install. To double check that the installation process was a success, head back over to your terminal and do a version check with the command: elixir -v. (At the time of writing this blog, Elixir is currently on version 1.14.0.) To get started with a new project, set your terminal to the desired directory, and use the command mix new "project name", and the necessary files will be loaded into your project folder, including a README, gitignore, library, and other basics.

Now that we have a project set up, let's start taking a look at the datatypes that make up Elixir.

The first two datatypes we will be taking a look at are integers and floats. These are both number data types, but they can never be strictly equal to each other. Any whole number is considered an integer, while floats are numbers with any given number of decimal places following that number. Here is a quick demonstration of how these two datatypes can be used together in operations, but in the end, are still different.

iex(1)> 1 + 1
2       
iex(2)> 1.5 + 1.5
3.0     
iex(3)> 1 + 1.5
2.5     
iex(4)> 4 * 4
16      
iex(5)> 3 === 3.0
false

The next datatype is boolean. This is going to be your standard boolean datatype giving you true and false values.

iex(6)> true
true    
iex(7)> true === false
false

We can even wrap our value in an is_boolean function to assess whether or not the value is in fact a boolean datatype.

iex(8)> is_boolean(true)
true
iex(9)> is_boolean("a")
false

Strings in Elixir must be delimited by using double quotes. (See yuh later single quotes.) Other than that, strings in Elixir behave pretty similarly to those in JavaScript. They can be concatenated together with the + or <> operators and Elixir also supports string interpolation by inserting your string value into an interpolation syntax: #{string value}. To print a string value simply wrap your value in the IO.puts(string value) function. Other string functions include String.length(string value) and String.upcase(string value).

iex(10)> string = "dog"
"dog"
iex(11)> "The #{string} ran fast"
"The dog ran fast"
iex(12)> "The " <> "#{string} " <> "ran fast" 
"The dog ran fast"
iex(13)> IO.puts("Hello World!")
Hello World!
iex(14)> String.length("hello")
5
iex(15)> String.upcase("hello")
"HELLO"

Lists in Elixir are similar to arrays in other languages, but they're not exactly the same. Aesthetically, they're identical, but lists in Elixir behave more similarly to linked list data structures. The first element of the list is considered the "head" and the remaining elements are considered the "tail". The first and remaining values in a list can be accessed by utilizing the hd(list) and tl(list) functions. Lists are also immutable, meaning the original list can not be edited or changed.

iex(16)> list = [2, 4, 6, 8]
[2, 4, 6, 8]
iex(17)> hd(list)
2
iex(18)> tl(list)
[4, 6, 8]

Tuples are somewhat similar to lists. They are represented though, with curly brackets instead of square. They are however, also immutable. The real difference though lies in that lists are sorted in memory as linked lists. This means accessing the end of the list is a linear operation, so we need to travers the entire list to determine its length, or size. Tuples on the other hand are stored contiguously in memory. So accessing an element can be a very quick operation. However adding or updating an element to tuples can be expensive in memory, because it requires creating a new tuple.

iex(19)> {"hello", "world!"}
{"hello", "world!"}
iex(20)> tuple = {"hello", "world!"}
{"hello", "world!"}
iex(21)> tuple_size(tuple)
2
iex(22)> elem(tuple, 0)
"hello"
iex(23)> elem(tuple, 1)
"world!"

Finally we arrive at atoms! Atoms are similar to symbols in Ruby, and somewhat similar to defining a variable using the const keyword in JavaScript. Atoms are constants who's name is also their value. In other words, they will always represent what they stand for. Atoms can also represent boolean values as seen below.

iex(24)> :hello === :hello
true
iex(25)> :hello === :world
false
iex(26)> true === :true
true
iex(27)> is_atom(false)
true

If you were wondering what the "iex" is preceding my code, that is the Elixir Interactive Shell. It is the built in shell that allows you to write statements and execute them, resulting in an output.

So there are some basic fundamentals to dip your toes into Elixir!
I hope to continue exploring Elixir further and hopefully build some projects using this language in the future.

Resources:

Intro to The MERN Stack

Samuel Littell — Mon, 03 Oct 2022 01:18:49 +0000

(Cover Image Source: Link)

While there is a plethora of full stack options and opinions out there, I am choosing to focus on one, in particular, The MERN Stack. I've chosen this particular stack due to it's accessibility and popularity. The MERN Stack is a full, open-source, tech stack. The acronym "MERN" is derived from the group of JavaScript-based frameworks, runtime environments, and databases that make up this specific stack. The stack is comprised of MongoDB (database solution), ExpressJS (NodeJS framework), React (Frontend browser side JS library), and NodeJS (Server-side JS runtime). MERN was created to help developers obtain a smooth end-to-end development process. Let's take a closer look at the 4 elements that make up The MERN Stack, and try to understand why it's quickly becoming the more popular stack option among developers.

Backend | Database

In order to stay loyal to the order of our "MERN" acronym, let us first take a look at the "M": MongoDB. MongoDB is a NoSQL database engine that allows us to store data in the form of key/value, graph, wide-column stores, or document database models (amongst others). MongoDB stores this data natively in the form of BSON data (a binary version of JSON). Unlike SQL it does not enforce a schema typical to most relational databases. This makes it a flexible and powerful database that can easily be integrated into an ExpressJS/NodeJS environment. Speaking of which, let's take a closer look at the two other backend components of MERN, ExpressJS and NodeJS.

Backend | Server

ExpressJS, NodeJS, and MongoDB make up the backend components of MERN, but if we break down the backend even further, we have ExpressJS and NodeJS handling the server-side of the backend, while MongoDb is left handling the database. NodeJS is an asynchronous, event driven, JavaScript runtime often used to create scalable server-side applications. ExpressJS is a minimal and flexible framework for NodeJS. It assists in URL routing and handling HTTP requests and responses. We need NodeJS in order to use ExpressJS, and in turn, ExpressJS is what we use to communicate the backend to the frontend. Which leads us to React, the frontend of The MERN Stack.

Frontend | Web

React is the frontend, client-side framework of MERN which allows developers to build interactive user interfaces. With React we can write JavaScript code that will be executed in the browser, and since it's executed there, it's responsible for controlling what the user sees on their respective devices. React assists in rendering a user interface with dynamic data, and updates the interface accordingly when the data changes, or when certain events occur. Essentially, it takes in user input and provides feedback to the user via visualization. There is a treasure trove of reasons to choose React over other respective frontend libraries, but a few stand-out reasons are the following:

React is maintained by talented developers at Facebook.
React is the most used / most popular frontend framework, which means there is a TON of free and easily attainable resources out there to assist in learning and applying React to your projects.
React is incredibly flexible: "React code is easier to maintain and is flexible due to its modular structure. This flexibility, in turn, saves a huge amount of time and cost to businesses." - Ubaid Pisuwala of Peerbits.com

So in conclusion, how exactly do these MERN technologies work together to create and render a finished application in the real world? Essentially, when a user goes to a particular website or web address, we are going to send the user some files, content, or HTML to appear on the screen. This will be handled by the frontend, or React "side" of our application. React doesn't particularly care, or know what to show to the user. It needs data to show the correct content. So we store that data via MongoDB. In order for React to communicate and pull data from the database we need a middle man, and that is where ExpressJS/NodeJS come in. ExpressJS will contain logic to handle incoming requests from React, pull data from MongoDB based on those requests, and then package and send that data back to React where it is then rendered and the content is displayed on the screen as a finished user interface.

There you have it. The MERN Stack is a three tier, full-stack solution to all of your application building needs. Understanding how this three tier system flows and works together is understanding how to build better and more efficient applications.

Resources:

Bootcamp: .Reduce()

Samuel Littell — Fri, 12 Aug 2022 22:31:55 +0000

As an impressionable first time "bootcamper", nearly 2 and a half months into my deep-dive of JavaScript, it's easy to become immediately attracted to shiny objects. Learning hundreds of concepts in such a short period can be overwhelming, but I think it's important to stop and admire what you've come to appreciate as far as those concepts go. I think the reduce method is my shiny object, thus far.

For me iterating through data was completely foreign. This was not something on my radar. The idea of looping through an array of letters, numbers, words, and "stuff", was not something I was prepared for. Oh, and making it return something after? What? I was ignorant, to put it simply. After learning imperative style for-looping, over and over again, it became clear to me how simple code like:

let array = [2, 4, 6, 8];

const sum = (array) => {
  let result = 0; 
  for (let i = 0; i < array.length; i++) {
    result += array[i];
  }  
  return result;
};

console.log(sum(array)); -> 20

... can quickly get out of hand, especially when we introduce complex code, math, or conditions into the equation.

...

In comes the Reduce method. It seems like the Reduce method has no limits. It can do what Map, Filter, and many other JavaScript array functions do, AND it just looks better doing it. Take my for-loop example from above for example, let's photoshop it using Reduce:

let array = [2, 4, 6, 8];

const sum = (array) => array.reduce((total, item) => total += item, 0);

console.log(sum(array)); -> 20

Wow. So much cleaner. That's clean. A single line of code that does what you want it do, as opposed to telling it what to do. As a noob I just FEEL more confident, and maybe, a little less capable of screwing this function up, although I would not put it past me.

...

Next I will use a coding example that was introduced to me in bootcamp. While I understand the "think outside of the box" type of programming that this toy-problem is forcing upon me, I could not help but be a little annoyed knowing a similar result could be attained with ONLY using the Reduce method. For example, return an array of all of the people who's favorite stuff includes "stuff1", using Reduce AND forEach:

const people = [
    {
      person: 'person1',
      favStuff: ['stuff1', 'stuff2', 'stuff3'],
    },
    {
      person: 'person2',
      favStuff: ['stuff4', 'stuff1', 'stuff5'],
    },
    {
      person: 'person3',
      favStuff: ['stuff6', 'stuff7', 'stuff8'],
    },
    {
      person: 'person4',
      favStuff: ['stuff9', 'stuff1', 'stuff10'],
    }
];


const stuff = (people) => {
  var newArr = people.reduce(function(arr, curr) {
    curr.favStuff.forEach(function(stuff) {
      if (stuff === 'stuff1') {
        arr.push(curr.person);
      }
    });
    return arr;
  }, []);
  return newArr;
};

console.log(stuff(people)); -> ['person1', 'person2', 'person4']

Now, I'm not trying to toot my own horn here, this took me a good 25-30 minutes to figure out, mostly because I had tunnel vision. I kept wanting to solve this, only using Reduce, nothing else. I had to convince my brain to solve the problem in this manner... and invite forEach to my party even though it wasn't welcome.

As I continue through my coding journey, I hope to pick up more tools along the way and hopefully bond with them. I need to search for the positive, and focus less on the many struggles that the coding maze presents to me. Also, before I forget, and my brain explodes from holding it in (and imposter syndrome), here is the "stuff" function using only Reduce:

const stuff = (people) => {
 let result = people.reduce(function(arr, curr) {
  if (curr.favStuff.includes('stuff1')) {
    arr.push(curr.person);
  }
   return acc;
  }, []);
  return result;
}

console.log(stuff(people)); -> ['person1', 'person2', 'person4']