DEV Community: Terry Threatt

133 People Started My App's Onboarding. One Finished. Here's Everything I Learned Building Toffee.

Terry Threatt — Tue, 07 Jul 2026 16:55:05 +0000

Building a personal finance app nights-only, one hour at a time, while working a full-time engineering job.

I'm a software engineer by day. By night, after my daughter goes to bed, I get roughly one hour to build. That constraint shaped every decision in this story, and honestly, I think it made the product better.

This is the story of building Toffee, a debt payoff app for iOS and Android, and the mistakes, wins, and one truly humbling analytics discovery along the way.

The idea

Debt payoff apps aren't new. Snowball vs. avalanche calculators have existed forever. But most of them feel like spreadsheets wearing a trench coat. I wanted something that felt warm and encouraging, because paying off debt is an emotional grind more than a math problem. The name Toffee, the warm orange and dark brown palette, the whole vibe was intentional: this should feel like a treat, not a tax audit.

The stack

With one hour a night, I couldn't afford to fight my tools. So I picked things I already knew cold:

Expo / React Native for the app itself. One codebase, both stores.
Supabase for auth, Postgres, and edge functions. The generous free tier and the fact that it's just Postgres made it a no-brainer for a bootstrapper.
Plaid for bank sync, so users don't have to manually enter every balance.
RevenueCat for subscriptions and paywall management.
PostHog for analytics. Remember this one. It's about to become the main character.
Anthropic's Claude Haiku powering an AI feature called Toffee Coach.

Nothing exotic. Boring technology, shipped consistently, beats clever technology shipped never.

Shipping v1 through v4 in one-hour increments

The one-hour constraint forces a specific working style. You can't hold a big refactor in your head across three interrupted evenings, so everything gets broken into small, completable chunks. My rule became: every session ends with something committed and the app in a runnable state. No half-finished migrations sitting overnight.

Early versions were manual entry only. Add your debts, pick snowball or avalanche, watch the payoff date move as you throw extra money at balances. It worked, and a small number of people used it.

The bigger swings came later:

Plaid bank sync (v3). This was the feature I was most scared of and it turned out to be one of the smoother integrations. Plaid's React Native SDK is solid, and Supabase edge functions made a clean home for the token exchange and webhook handling. The gotcha nobody warns you about: handling the messy middle states, like when a user's bank connection degrades and you need to prompt a re-link without nagging them into uninstalling.

Toffee Coach (v3/v4). An AI coach powered by Claude Haiku that looks at your debts and progress and gives short, encouraging, specific guidance. Haiku was the right model choice for a bootstrapped app: fast, cheap, and more than smart enough for structured coaching prompts. The real work wasn't the API call, it was prompt design that keeps the coach encouraging without letting it drift into financial advice territory it shouldn't give.

RevenueCat paywall restructuring. My first paywall was, in retrospect, a ransom note. I restructured the offering around a cleaner free tier with the premium features (bank sync, Coach, advanced projections) behind the subscription. RevenueCat made the experimentation side painless, which matters when you only have an hour a night to iterate.

The night PostHog ruined me (and saved the app)

Here's the part I'd tattoo on the inside of every indie hacker's eyelids if I could.

After a round of App Store optimization and some Apple Search Ads tests, installs were coming in. But subscriptions weren't. Revenue was flat. I assumed the paywall was the problem and was about to spend weeks redesigning pricing.

Then one night I actually built a proper funnel in PostHog instead of eyeballing event counts.

133 people had started onboarding. One person had completed it.

One.

Not a conversion problem. Not a pricing problem. A "your front door is bricked over" problem. All the ASO work, all the ad spend, all of it was pouring users into an onboarding flow that was quietly executing them somewhere around step three.

The flow was too long, asked for too much too early (including the bank connection before the user had any reason to trust the app), and had a couple of screens where the primary action wasn't obvious. Death by a thousand reasonable-seeming decisions.

The fix took a few weeks of evenings:

Cut onboarding to the absolute minimum. Get the user to their first "aha" (seeing a payoff date) as fast as possible.
Moved Plaid sync out of onboarding entirely. Manual entry first, bank sync offered later once the app has earned some trust.
Instrumented every single step so I'd never fly blind again.

Completion rates went from effectively zero to healthy, and everything downstream (trials, subscriptions, reviews) improved because people were actually reaching the product.

The lesson: instrument your funnel before you spend a dollar on acquisition. I did it backwards and paid the tuition.

Distribution: the unglamorous grind

A few things that moved the needle, and a few that didn't:

ASO metadata overhaul: moved the needle. Rewriting the title, subtitle, and keyword field around what people actually search for beat any single feature launch for install volume.
Apple Search Ads: useful as a lab, expensive as a channel. The best thing ads gave me wasn't installs, it was keyword data I fed back into ASO.
Google Play launch: worth it, eventually. Expo made the port nearly free technically. The Play Store is a different beast for discovery, though.
Content: a long game. Daily short-form video content around debt payoff topics under the Toffee brand. Slow compounding, not a spike.

One thing I'm genuinely proud of: Toffee sits at a 5.0 rating on the App Store. When you fix the funnel so only people who actually experience the product are the ones reviewing it, good things happen.

What I'd tell past me

Instrument first, acquire second. A funnel you can't see is a funnel that's broken.
One hour a night is enough, if every hour ends in a commit. Consistency beats intensity for solo builders.
Don't put your scariest ask (bank credentials!) at the start of the relationship. Trust is sequenced.
Boring stack, boring deploys, exciting product. Save your novelty budget for the user-facing stuff.
AI features earn their keep when they're narrow. Toffee Coach works because it does one job with tight guardrails, not because it's a chatbot bolted to a budget app.

What's next

I've learned a ton about what consumer finance users will and won't pay for, and those lessons are steering where I build next. But Toffee taught me the full loop: build, ship, measure, get humbled, fix, repeat. On one hour a night.

If you're building something in the margins of your day job: it's doable. Just please, set up your funnel analytics before you turn on ads. Learn from my 133.

Want to see the finished product? Toffee is live on both stores:

Toffee on the App Store
Toffee on Google Play

FizzBuzz for Javascript

Terry Threatt — Sat, 10 Jul 2021 17:49:53 +0000

New developers will surely see this problem show up in technical interviews. FizzBuzz is a classic technical interview questions to find out if you are familiar with solving programming challenges.

FizzBuzz setup:

Create a solution that prints the number 1 through 100. Print "Fizz" for numbers that have a multiple of 3. Print "Fizz" for numbers that have a multiple of 5. Print "FizzBuzz" for numbers that have a multiple of both 3 and 5.

FizzBuzz solution: (There's many ways to solve this problem)

for (let i = 1; i <= 100; i++) {
    // Finding multiples of 3 and 5
    if (i % 3 === 0 && i % 5 === 0) {
      console.log('FizzBuzz');
    } else if (i % 3 === 0) {
      // Finding multiples of 3
      console.log('Fizz');
    } else if (i % 5 === 0) {
      // Finding multiples of 5
      console.log('Buzz');
    } else {
      console.log(i);
    }
  }

5 reasons to use node.js

Terry Threatt — Sun, 04 Jul 2021 19:48:42 +0000

What is Node.js

Node.js is an open-source Javascript run-time. It is used to create server-side APIs, network applications and services. It was designed to build out highly scalable applications with high concurrency.

Less context-switching

Node has made it very easy for frontend developers to create full-stack projects by using prior Javascript experience on the server side. This has been great for teams to re-use codebases and increase productivity.

Node.js is super fast

Node is built on the V8 chrome javascript engine that has yielded amazing performance. The asynchronous non-blocking design makes for a blazing fast experience dealing with lots of concurrent operations.

Real-time applications

Node.js makes it really easy to produce real-time applications such a real-time chats by allowing synchronized connections via websockets and reliable client/server communication.

Event driven

The event driven architecture of Node.js is pattern on observing event behavior with event listeners and responding to events predictively. These is perfect for client-side web applications make use of many meaningful interactions on the interface and providing a great user experience.

Great Ecosystem

Node is supported by the entire Javascript community and has lots of great open-source tooling and NPM packages that make developing with Node a breeze. Node is quickly being adopting in tech stacks of lots of companies and producing great results in performance.

Terry Threatt

How to use control flow in javascript

Terry Threatt — Sun, 27 Jun 2021 20:28:33 +0000

When you are programming in Javascript. The lines of code are executed line by line. In order to create useful programs, we will need to learn to intercept this flow of execution and go another direction or even restart in the same direction.

This is referred to control flow and is made up of a combination of operators, conditionals and/or loops. Let's take a look at how these parts help to control the flow in your Javascript code.

Operators

Operators are tests for the truth or false values of variables.

Userful Operators

operator: == description: equal to

const x = 11
x == 11
// returns true

operator: === description: equal value and type

1 === '1'
// returns false

operator: != description: not equal to

12 != 8
// returns true

operator: < description: less than

6 < 7
// returns true

operator: > description: greater than

7 > 6
// returns true

operator: && description: logical and

(7 > 6) && (12 != 8)
// returns true 

(7 > 6) && (12 == 8)
// returns false

operator: || description: logical or

const y = 5
(7 > 6) || (y > 7)
// returns true 

(y < 4) || (2 == 2)
// returns true

Conditionals

Statements in code that execute and find out the truthiness value and can be identified by the following:

if statement

if(statement == true) {
  console.log("execute this code when true")
}

else statement

if(statement == true) {
  console.log("execute this code true")
} else {
  console.log("execute this code when false")
}

else if statement

const color = "orange"
if(color === "blue") {
  console.log("execute this code when true")
} else if(color === "yellow") {
  console.log("execute this code when true")
} else {
  console.log("execute this code when false")
}

// returns "execute this code when false"

Loops

A loop is a way to execute a block of code several times.

The most common loop is the for loop.

for loop

const fruits = ["apples", "peaches", "plums"]

for(let i = 0; i < fruits.length; i++){
  console.log("I love " + fruits[i])
}

// returns 
I love apples
I love peaches
I love plums

Control flow in action

// Now let's put this all together

const grades = [75, 44, 92, 98]

for (let i = 0; i < grades.length; i++){
 if(grades[i] > 70){
    console.log("congrats, you passed!")
  } else {
    console.log("sorry, you failed!")
  }
}

// returns 
congrats, you passed!
sorry, you failed!
congrats, you passed!
congrats, you passed!

Learn More

Control flow

Ternary operator

Loops

Let's chat about control flow

We learned about flow control in javascript by using conditionals, operators and loops. If you enjoyed this post feel free to leave a comment about your experience working with control flow in your applications.

Happy Coding,
Terry Threatt

What is a relational database?

Terry Threatt — Sun, 20 Jun 2021 22:32:14 +0000

When you develop functional websites and web applications. A major requirement to hold customer data is a persistent data storage.

This will be key to allowing useful interaction and so it is foundational to learn about databases to be a web developer.

What is a database?

A database is storehouse for types of data and is usually a server or computer. A database is developed to model all your data in tables and columns to be easy to read and retrieve way.

What is a relational database?

A relational database is a type of database that consists of data that is relational. The database is structured in a way to create a relationship from one unit of data to another.

What is a relational database management system?

A relational database management systems(RDMS) is software that is used to manage a relational database. This includes creating database administrators and all the functions of managing the data.

What is SQL?

SQL is a structured query language for managing your data in a database management system. This language gives your the power to read and write to a database and create advanced queries to analyze your data in useful ways.

Learn More

Deep dive into Non-relational databases

Popular relational database management systems:

Let's chat about databases

We briefly described a relational database, relational database management systems, and the database query language (SQL). If you enjoyed this post feel free to leave a comment about your experience working with databases.

Happy Coding,
Terry Threatt

Semantic HTML in 5 Minutes

Terry Threatt — Sat, 12 Jun 2021 19:36:11 +0000

What is Semantic HTML

Semantic HTML refers support and accessibility tags introduced to the markup language HTML in the 2008 release of HTML5. These new tags like <details> & <summary> bring about new ways for browsers to identify new elements on a webpage and with more description.

Why Semantic HTML

The need for more descriptive tags were necessary as the internet grew and here's a few important reasons for Semantic HTML:

Accessibility: Tags like <nav> & <article> give more meaningful information for things like screen readers, which allow upwards of 5 million more people with reading disabilities to access web pages.
Advanced Capabilities: Tags like <audio> & <video> bring new ways to add media to web pages.
Specificity: Tags like <header> & <footer> provide more clearer distinction than divs for developers to work with.
ex: <div id="header">Semantic HTML</div>

Converting to Semantic HTML

Let's make this more accessible to get rid of the deeply nested div issue.


<!-- Before -->

<div id="header">
 <div id="section">
   HTML Elements:

   <div id="article">This is an article about HTML elements</div>
 </div>
</div>


<!-- After -->

<header>
 <section>HTML Elements:</section>

 <article>This is an article about HTML elements</article>
</header>

Learn More

Modernizer - Javascript library for detecting Semantic tags on a website.
Visit MDN for a deeper look into Semantic HTML elements.

Let's chat about Semantic HTML

The was a quick intro into Semantic HTML and how you can make your web pages more descriptive and accessible. If you enjoyed this post feel free to leave a comment about your experience working with Semantic HTML or HTML5.

Happy Coding,
Terry Threatt

5 Skills You Need To Become A Developer

Terry Threatt — Sat, 05 Jun 2021 21:35:42 +0000

Before I got my start developing programs. I gained interest in development and quickly wondering what skills would be necessary to be successful. After experience I am able to provide the 5 most important skills needed to become a developer.

Problem solving

The number one skill to cultivate is problem solving. Development is filled with opportunities to solve real-world or business logic with programming tools like languages. This is the practice of recognizing all parts of a problem to develop a creative solution to apply the problem.

Logical thinking

Logical thinking is another important skill to develop. The development of computers and software operates are based in logic. Learning to think in these ways makes it much easier to reason about code and write great code.

Attention to detail

This is a skill that will be most valuable as your a developing code. This will key to understanding any mistakes or missing parts in programs. This is a skill that will be cultivated daily and a little of this skill goes a long ways.

Teamwork

Contrary to prior beliefs, Mostly all production code happens in a team environment, so it will be very valuable if you know how to work on a team. You can succeed by learning to share your progress, ideas and pair-programming with others.

Written and verbal communication

This a skill that is important provide effective communication to coworkers in both technical and non-technical roles. Demonstrating you can explain your ideas, plans, and progress to all stakeholders can be an indicator that your grow into decison-making roles.

Let's chat about skills

The great part is you may have developed these skills in other activities, passions, or careers and you can put them to use right away. If you enjoyed this post feel free to leave a comment about these skills and others that make a good developer.

Happy Coding,
Terry Threatt

Working with Javascript Events

Terry Threatt — Mon, 31 May 2021 02:08:17 +0000

The motivation of the web development is to provide a web experience that provides pages of information and allows a way for users a way to interact with the information. Javascript serves as the backbone of web in making web pages interactive through events.

A javascript event is an action that happens after you interact with elements on a web page like clicking a button or typing into a form.

Javascript is responsible for three parts as it relates to events. The first is recognizing events, manipulating the DOM(document object model), and sending messages to the server.

Event Listeners

The work of adding events to pages may call this eventing and starts with adding an event listener to an element.

The event listener recognizes whenever a user interacts with the attached element.

It consists of an event type and a callback function that is invoked after the event is triggered.

<!- Adding an event listener ->
<button>Shiny Button</button>

// First, we grab our button element.
const shinyButton = document.querySelector("button");

// Next, we attach our event listener with a click event.
shinyButton.addEventListener("click", () => {
   console.log("Clicked!");
});

Event Handler

The event handler is identified by the function in the event listener that handles what to do with an event after the event listener is triggered.


// Here are using a event to alert any key event
window.addEventListener("keydown", event => {
      // We are now inside the event handler
      alert(`You pressed key: ${event.key}`);
});

Event Object

The event is represented by a javascript object that contains helpful properties like the event target and the event type. The event object is passed through the event listener to the event handler.

Eventing in Action

<!- Creating an name input form ->
<form id="form">
  <label>Name: <input type="text"></label>
  <br><br>
  <button type="submit">Submit</button>
</form>

<!- We will display a name here ->
<p id="name"></p>

// Adding the event handler
function onSubmit(event) {
  event.preventDefault();
  name.textContent = `Hi ${event.target.value}!`;
}

// Adding the event listener
const form = document.getElementById('form');
const name = document.getElementById('name');
form.addEventListener('submit', onSubmit);

Let's chat about Events

Javascript events make up an important part of the web and we've covered a few ways of working with events. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with javascript events.

Happy Coding,
Terry Threatt

CSS Flexbox in 5 Minutes

Terry Threatt — Sun, 23 May 2021 19:51:26 +0000

What is CSS Flexbox

CSS Flexbox is a one-dimensional layout module that can be used to make your applications more responsive.

Flexbox allows you to dynamically control alignment, direction, and space of content inside any container.

Lets get started using Flexbox

Fork this code

Starter Code

Display

flexbox requires a parent container to control the layout of all children.

lets use the display property

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
}

Flex-direction

flex-direction establishes a main axis direction for flex items and can be in a row or column.

flex-direction is in row direction by default so lets try a column layout direction

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: column; 
}

now lets get back to row direction

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: row; /* default */ 
}

Justify-content

justify-content will distribute space along the main axis of container for all the content.

justify-content is in flex-start by default

lets try flex-end

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: flex-end;
}

now lets try to add space-around

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: space-around;
}

Responsive Design

flexbox has a major benefit of making it very easy to create responsive layouts for most devices.

lets make this layout responsive with flex-direction and a css media query.

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: space-around;
}

/* Lets make this mobile-friendly and easy to view for screens below 767px */
@media (max-width: 767px) {
  .flex-container {
    flex-direction: column;
  }
}

Make It Your Own

Final Code

Let's chat about Flexbox

We went through a quick tutorial on how to implement CSS Flexbox web accessibility and how you can make your web projects more responsive. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with flexbox.

Happy Coding,
Terry Threatt

Exploring Web Accessibility: a11y

Terry Threatt — Sun, 16 May 2021 20:28:26 +0000

The web is a great big place with lots of exciting things to explore but did you know that there is a population of people who need accommodations to explore the web for critical tasks or just for entertainment?

According to the Bureau of Internet Accessibility

In the United States, an estimated 25% of adults (61 million people), and 40% age 65 or older, have a disability.

It is our job as web developers to create an accommodating web experience that is inclusive for everyone to benefit from.

What is Web Accessibility

A11y is short for web accessibility. This is the practice of using known techniques to make websites accessible to people with disabilities that include but not limited to vision, hearing, mobility, and cognitive disabilities.

Web accessibility standards are governed by the WCAG and have established the following A11y levels:

A rating: Limited level of web accessibility and does not meet acceptable web accessibility standards.
AA rating: Recommended level of web accessibility.
AAA rating: Excellent level of web accessibility.

Here is a great tool that provides a detailed checklist for web accessibility.

Lets look at some important web accessibility topics to explore:

Semantic HTML

Semantic HTML refers to HTML tags that clearly describe purpose and behavior for optimal web accessibility experiences like <table> || <paragraph> || <form>.

These tags have built-in functionality that is very useful for web accessibility technology like screen readers, unlike the tag <div> which can be very vague to understand for developers, users, and unrecognizable for web accessibility technologies.

This is Semantic HTML in action:


<!- Using semantic HTML it is now easy for a screen reader to understand each element and communicate that element to a user ->

<article>
  <header>
    <h1>Web Accessibility</h1>
    <p>The A11y Mission:</p>
  </header>
  <p>Make the internet fun and useful for everyone!</p>
</article>

ARIA

MDN explains:

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

ARIA gives roles and permissions to give more specificity and context to HTML elements. Screen readers can use this to provide descriptive details about how to interact with these elements.

This is ARIA in action:


<!- ARIA makes the screen reader aware this is a form with a search input to type in ->

<header>
  <h1>Search:</h1>
  <nav role="navigation">
    <form role="search">
      <input type="search" name="search" placeholder="Search" aria-label="Search for something exciting">
    </form>
  </nav>
</header>

<!- Now a screen reader may properly announce to the user to type in the input to search ->

Tab Navigation

Tab navigation is a technique of understanding how keyboard-only and assistive technology devices navigate through tabbable elements on a web page. Making all important elements able to navigate with a Tab Key or the Shift + Tab Keys is a recommended practice.

This is Tab Navigation in action:


<!- Making use of tabIndex attribute helps to make sure this important div is not missed by assistive technology devices ->

<div tabIndex="0">Very Important Info Here!</div>

Color

It also a great practice to avoid really experimental color palettes and combinations that alienate color-blind users like the red/green color scheme (Red/green color blindness is the most common type of color blindness).

See recommended WCAG guidelines for the best color contrast schemes for the best web accessibility experience.

Screen Readers

A Screen Reader is assistive software that parses through web pages and converts text into synthesized speech. Many people who are blind or have visual disabilities use screen readers to read and navigate the web.

It is best to know popular screen readers like ChromeVox, JAWS, and VoiceOver for Mac to design the most accommodating web experiences.

Let's chat about a11y

We explored web accessibility and how you can make your web projects more inclusive. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with web accessibility.

Happy Coding,
Terry Threatt

Object Relationships Intro

Terry Threatt — Sun, 09 May 2021 23:06:30 +0000

When you are constructing object-oriented programs in programming. You will run into a need to model your related objects/data and save them to a database in a way that is both useful and expressive.

Understanding object relationships will help you identify the proper connections you need to make when modeling your objects in your code.

These connections make your programs easy to understand for other programmers and make your program very extensible.

Object Relationships

Object relationships are the technique of creating hierarchy, relations, and communication with complex data types in your code. Software like Object Relational Mapping Systems and Relational Database Management Systems make it possible to utilize organized classes of objects in your code to create object relationships.

UML (Unified Model Language) is a great tool to learn to construct object relationships.

Here are 3 important object relationship types:

One to One Relationship

A one-to-one relationship is an association of one object class instance to one single instance of a different class object.

// Example:
Credit Card 
has_one: Credit Card Number 

Credit Card Number 
belongs_to: Credit Card

One to Many Relationship

A one-to-many relationship is an association of one object class instance to many instances of a different class object.

// Example:
Customer
has_many: Orders 

Order
belongs_to: Customer

Many to Many Relationship

A many-to-many relationship is an association of many object class instances to many instances of a different class object.

// Example:
Product 
has_many: Customers

Customer 
has_many: Products

Let's chat about object relationships

We learned some important parts to object relationships and now understand 3 important object relationship types. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with object relationships.

Happy Coding,
Terry Threatt

Javascript Array Crash Course

Terry Threatt — Sat, 01 May 2021 21:40:58 +0000

When we develop programs for people to use in Javascript, We need to take advantage of data structures. These structures hold values of many types including strings, numbers, and objects.

One of the most common data structures that you will come across is the Array data structure. Mastering Arrays will put you in great shape to build useful programs as they are also used to build complex and abstract data structures as well.

The Array data type

Arrays hold many values of any data type. The structure is identified by a sequential list of values that can be accessed through a numbered index.

This helps to make it easy to traverse through this index very easily. Arrays are considered objects in Javascript which means they are called by reference.

// our first array

const arr = ["Nas", 13, {car: "Tesla"}]

// is this an array? 

// isArray() is a helpful method to prove an Array

Array.isArray(arr) // return: true 

// How many elements are in the array? 
// .length will return the element count

console.log(arr.length) // return: 3

Working with Arrays


// Creating Arrays
// There are two ways to create arrays

const arr = [] // Array literal: This is the recommended way
const arr = new Array() // Array constructor


// Creating Array Elements
const primeNumbers = [2, 3, 5, 7, 11]

// .push() - Adds new elements to the end of the array
primeNumbers.push(13)

console.log(primeNumbers) // return: [2, 3, 5, 7, 11, 13]

// Accessing Arrays 

// You can find array values through bracket notation: 
// Arrays a zero-based indexes 

console.log(primeNumbers[0]) // return: 2
console.log(primeNumbers[4]) // return: 11

// Changing Array Elements
// We can update an element with bracket notation

console.log(primeNumbers) // return: [2, 3, 5, 7, 11, 13]
console.log(primeNumbers[0]) // return 2

primeNumbers[0] = 1
console.log(primeNumbers[0]) // return 1
console.log(primeNumbers) // return: [1, 3, 5, 7, 11, 13]


// Deleting Array Elements
// .pop() - removes the last element in array

primeNumbers.pop() // return: 13

console.log(primeNumbers) // return: [1, 3, 5, 7, 11]

Array methods

Here is a list of common array methods

Array.prototype.shift()

Removes the first element from the array

const colors = ["blue", "red"]
colors.shift() // return: red
console.log(colors) // return: ["red"]

Array.prototype.unshift()

Adds an element to the end of the array

const fruits = ["apples", "oranges", "grapes"]
fruits.unshift("bananas") // return: 4
console.log(fruits) // return: ["bananas", "apples", "oranges", "grapes"]

Array.prototype.sort()

Sorts the elements for the array

const nums = [44, 33, 22]
nums.sort()
console.log(nums) // return: [22, 33, 44]

Array.prototype.filter()

Creates a new filtered array

const age = [15, 22, 43]
const legalAge = age.filter(age => age >= 21) 
console.log(legalAge) // return: [22, 43]

Array.prototype.forEach()

Allows you to perform an operation to each element in the array

const sports = ["baseball", "basketball", "football"]
const favSport = sports.forEach(sport => {
  console.log(`My favorite sport is ${sport}.`)
})

// return: My favorite sport is baseball.
// return: My favorite sport is basketball.
// return: My favorite sport is football.

Loops with Arrays


const nums = [ 11, 24, 36, 47, 53, 66] 

function findEven(nums) {
   const evenNums = []

for(let i = 0; i < nums.length; i++){
 if(nums[i] % 2 === 0) {
    evenNums.push(nums[i])
   }
 }

 return evenNums
}

findEven(nums) // return [24, 36, 66]

Let's Chat About Arrays

Arrays are a key data structure to know and I hope this crash course was helpful in showing how to work Arrays. If you enjoyed this post feel free to leave a comment about your thoughts and experiences with Arrays.

Happy Coding,
Terry Threatt