The Two Array Problems Every Beginner JavaScript Developer Must Know

Brian Jenney
3 min readDec 15, 2024

--

Wow, you really thought this code would work?

You’re learning about JavaScript arrays all wrong.

For loops, zero-indexing, blah blah blah.

But WHY? What makes arrays so damn important?

Let me explain:

Arrays are one of the most common data structures you’ll encounter in JavaScript — and in programming in general. Most data you work with on the web (social media posts, e-commerce products, or API responses) ends up in arrays, often as arrays of objects. Knowing how to solve problems with arrays is essential.

Let’s break down two common problems you’ll encounter when working with arrays, their real-world application and how to solve them step-by-step.

1. Counting the Number of Times Something Occurs (Frequency Counter)

Imagine you’re analyzing reactions to a social media post about how much JavaScript sucks 🙄

The reactions looks like this 👇

const reactions = [“like”, “love”, “like”, “wow”, “like”, “love”];

The Problem: How many times does each reaction type occur?

The Approach

1. Loop through the array and keep track of counts using an object.

2. Check if the reaction already exists in the object. If it does, increment the count. If not, initialize it to 1.

Solution

const frequencyCounter = {};

for (let reaction of reactions) {
if (frequencyCounter[reaction]) { // we have seen this reaction already
frequencyCounter[reaction]++;
} else {
frequencyCounter[reaction] = 1; // this is the first time we have seen it
}
}

console.log(frequencyCounter); // Output: { like: 3, love: 2, wow: 1 }

What’s Happening Here

  1. The object frequencyCounter acts as a storage bin for reaction counts.
  2. Each time you encounter a reaction, you either increment the count (if it exists) or add it to the object (if it doesn’t).

Why This Matters

Frequency counting isn’t just for toy examples:

Social Media: Count the number of comments by user or hashtags in a post.

E-commerce: Count the occurrences of each product category in a cart.

Analytics: Track how many times a specific error occurs in your logs.

2. Finding the Highest and Lowest Values

Let’s look at a simple list of numbers. For example, the prices of items in a store:

const prices = [45, 72, 34, 89, 12];

The Problem: Find the highest and lowest prices… duh

The Approach

1. Loop through the array while keeping track of the current highest and lowest values.

2. Compare each price to the stored values, updating them if necessary.

Solution

const prices = [45, 72, 34, 89, 12];

let highest = prices[0];
let lowest = prices[0];

for (let price of prices) {

if (price > highest) {
highest = price;
}

if (price < lowest) {
lowest = price;
}

}

console.log(`Highest: ${highest}, Lowest: ${lowest}`);
// Output: Highest: 89, Lowest: 12

What’s Happening Here

  1. Start by assuming the first value is both the highest and the lowest.
  2. Each time you encounter a price, you check if it’s higher than the current highest or lower than the current lowest and update accordingly.

Why This Matters

This isn’t just for classroom exercises:

Finance: Find the highest or lowest stock prices for the day.

Gaming: Identify the top or lowest score in a leaderboard.

E-commerce: Show the most expensive and least expensive items in a category.

How to Approach Problems Like This

  1. Understand the Problem: What is the array representing? What is the question asking you to find?
  2. Break It Down: Use small, simple steps to manipulate the data and track what you need.
  3. Keep It Flexible: Patterns like frequency counters or finding min/max values are easy to adapt to other real-world use cases or coding challenges.

These are more than beginner exercises — they’re foundational skills that show up in countless scenarios. Practice them, and soon solving problems with arrays will feel second nature.

If you want to learn JavaScript, how to build in public and jump start your career as a software developer, I can’t think of a better program than Dev30.

30 days of writing JavaScript, building cool sh*t and making connections. Way better than any course. Dev30.xyz

--

--

Brian Jenney
Brian Jenney

Written by Brian Jenney

full-stackish developer, late bloomer coder and power google user and owner of Parsity.io

Responses (4)