Using .map() to Build My CryptoTracker App

When I first came across .map() in JavaScript, I didn’t realize it would end up being the most efficient and easiest way to build out my app. I discovered this while working on my Phase 1 project — a CryptoTracker app that pulls live cryptocurrency prices from the Coinbase API. As I built different features, .map() quickly became one of my go-to tools. It kept my code clean, saved me time, and helped me turn raw data into the interactive features I wanted.

In this post, I’ll explain what .map() does, how I used it in my project, and why I think it’s one of the most helpful methods to learn early in JavaScript.

---

What .map() Does

.map() works with arrays, lists of data. You give it an array, it goes through each item in that array, applies whatever instructions you give it, and returns a brand-new array with the results.

.map() never changes your original array. You end up with two versions: the original list untouched and a new list transformed exactly how you wanted.

I am a big fan of golf so the way I thought about it was, .map() is like taking a bucket of plain golf balls, making a copy of each one, and stamping your custom logo on the copies. When you’re done, you still have your plain golf balls, but now you also have a fresh set with logos — perfect for showing off on the course.

---

Turning API Data into Coin Cards

One of the first places I used .map() in my CryptoTracker app was to turn the raw data from the Coinbase API into visual “coin cards” on my page. The API sent back data that looked something like this:

const coinsData = [
  { name: "Bitcoin", price: 67985, symbol: "BTC" },
  { name: "Ethereum", price: 3520, symbol: "ETH" },
  { name: "Solana", price: 152, symbol: "SOL" }
];

Using .map(), I turned this data into HTML I could drop straight into my app:

const coinCards = coinsData.map(coin => `
  <div class="coin-card">
    <h2>${coin.name} (${coin.symbol})</h2>
    <p>Price: $${coin.price}</p>
  </div>
`);

document.getElementById('crypto-list').innerHTML = coinCards.join('');

Here’s what’s happening:

• .map() goes through each coin object and turns it into an HTML card.

• The result is a brand-new array full of those cards.

• .join('') merges them into a single string so I can place them all into the page at once.

This was way faster and cleaner than manually looping with a for loop and building the HTML piece by piece.

---

Using .map() in the Search Feature

I also used .map() for my live search feature. This lets someone type in part of a coin’s name — like “eth” — and instantly see only matching results.

document.getElementById('search').addEventListener('input', e => {
  const searchTerm = e.target.value.toLowerCase();

  const filteredCoins = coinsData.filter(coin =>
    coin.name.toLowerCase().includes(searchTerm)
  );

  const coinCards = filteredCoins.map(coin => `
    <div class="coin-card">
      <h2>${coin.name} (${coin.symbol})</h2>
      <p>Price: $${coin.price}</p>
    </div>
  `);

  document.getElementById('crypto-list').innerHTML = coinCards.join('');
});

Here, .filter() narrows down the coins first, and .map() takes those results and creates updated HTML cards in real time.

---

Using .map() for Favorites

Another feature I added was a favorites list. Anytime someone marks a coin as a favorite, it shows up in a separate section. .map() made it easy to take the favorites array and turn it into display cards:

function displayFavorites() {
  const favoriteCards = favorites.map(coin => `
    <div class="favorite-card">
      <h2>${coin.name} (${coin.symbol})</h2>
      <p>Price: $${coin.price}</p>
    </div>
  `);

  document.getElementById('fav-list').innerHTML = favoriteCards.join('');
}

This code is short, clear, and easy to update if I ever want to change how the favorites look.

---

Tips I Learned While Using .map()

Here are a few things I picked up along the way:

• Always return something — If you use curly braces {} inside .map(), you need a return statement or you’ll get undefined.

• Only use .map() if you need the result — If you’re not going to use the new array, .forEach() might be a better choice.

• Name things clearly — I use coin instead of c so my code is easier to read later.

• Test with console.log() — I often log the output of .map() before using it just to make sure it’s doing what I expect.

---

Why .map() Was Perfect for My Project

Looking back, .map() made my Phase 1 project a lot easier to build. I could take raw API data and turn it into HTML in just a couple of lines, instead of writing out long, repetitive loops.

It kept my code organized, it worked perfectly with features like search and favorites, and it made my app easier to update later on.