JavaScript Katas: A Gift Well Spent
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-08-07 16:25:36

---
title: "JavaScript Katas: A Gift Well Spent"
description: "We learn how to use a for loop"
published: true
tags: ["JavaScript", "Beginners", "Webdev", "Codenewbie"]
series: JavaScript Katas with miku86
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0jfyzv0grswtx1mlo17m.jpg
---

## Intro 🌐

Problem solving is an important skill, for your career and your life in general.

That's why I take interesting katas of all levels, customize them and explain how to solve them.

---

## Understanding the Exercise❗

First, we need to understand the exercise!
If you don't understand it, you can't solve it!.

My personal method:

1. Input: What do I put in?
2. Output: What do I want to get out?

---

### Today's exercise

Today, another `7 kyu` kata,
meaning we slightly increase the difficulty.

Source: [Codewars](https://www.codewars.com/kata/54554846126a002d5b000854)

> You got a gift card for your local store. It has some credit you can use to buy things, but it may be used only for up to two items, and any credit you don't use is lost. You want something for a friend and yourself. Therefore, you want to buy two items which add up the entire gift card value.

Write a function `buy`, that accepts two parameters: `giftCard` and `prices`.

Given a gift card value, e.g. `5`, and a prices array, e.g. `[5, 2, 3, 4, 5]`
return the array indices that sum up to the gift card value out of the prices array, e.g. `[1, 2]`.

In this example, we can add up the prices `2` and `3` to our gift card value of `5` (=> `2 + 3 = 5`). Their indices are `1` and `2`.

---

Input: a number and an array of numbers.

Output: an array of numbers.

---

## Thinking about the Solution 💭

I think I understand the exercise (= what I put into the function and what I want to get out of it).

Now, I need the specific steps to get from input to output.

I try to do this in small baby steps:

1. Go to the first price element and look if there is another price that adds up to the gift card value
1. If not, go to the next price element and look if there is another price that adds up to the gift card value
1. Return the indices of the first pair of prices that add up to the gift card value
1. Return null, if there is no pair

---

Example:

- Input: `5, [5, 2, 3, 4, 5]`
- Go to the first price element and look if there is another price that adds up to the gift card value: `5` => no other price adds up to `5`
- If not, go to the next price element and look if there is another price that adds up to the gift card value: `2` => we can find a `3` that adds up to `5`
- Return the indices of the first pair of prices that add up to the gift card value: `[1, 2]`
- Output: `[1, 2]` ✅

---

## Implementation ⛑

```js
function buy(giftCard, prices) {
  // don't waste energy 🥵
  if (prices.length <= 1) return null;

  for (let i = 0; i < prices.length; i++) {
    for (let j = i + 1; j < prices.length; j++) {
      if (prices[i] + prices[j] === giftCard) {
        // the indices of the first pair of prices that add up to the gift card value
        return [i, j];
      }
    }
  }

  // no pair!
  return null;
}
```

### Result

```js
console.log(buy(5, [5, 2, 3, 4, 5]));
// [1, 2] ✅

console.log(buy(3, [1, 1]));
// null ✅
```

---

## Playground ⚽

You can play around with the code [here](https://repl.it/@miku86/js-katas-a-gift-well-spent)

---

## Next Part ➡️

Great work!

We learned how to use a for loop.

I hope you can use your new learnings to solve problems more easily!

Next time, we'll solve another interesting kata. Stay tuned!

---

If I should solve a specific kata, shoot me a message [here](https://forms.gle/RmQLq7CLDiD2Ptmw5).

If you want to read my latest stuff, [get in touch with me!](https://miku86.com/newsletter)

---

## Further Reading 📖

- [for](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)

---

## Questions ❔

- How often do you do katas?
- Which implementation do you like more? Why?
- Any alternative solution?