JavaScript Katas: Position in Alphabet
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-08-04 16:59:51

---
title: "JavaScript Katas: Position in Alphabet"
description: "We learn how to use toLowerCase, charCodeAt, indexOf"
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

Source: [Codewars](https://www.codewars.com/kata/5808e2006b65bff35500008f)

Write a function `positionInAlphabet`, that accepts one parameter: `myChar`.

Given a one-char string, e.g. `"a"`,
return the message "Position in Alphabet: [position]", e.g. `"Position in Alphabet: 1"`.
If the input is uppercase, handle it like a lowercase character.

---

Input: a string.

Output: a string.

---

## 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. Convert the character into lowercase
1. Find the position of the char in the alphabet
1. Return the desired message with the position

---

Example:

- Input: `"a"`
- Convert the character into lowercase: `"a"`
- Find the position of the char in the alphabet: `1`
- Return the desired message with the position: `"Position in Alphabet: 1"`
- Output: `"Position in Alphabet: 1"` ✅

---

## Implementation (charCodeAt) ⛑

```js
function positionInAlphabet(myChar) {
  const DIFFERENCE_CHARCODE_AND_LETTERS = 96;

  // Convert the character into lowercase
  const myCharLowercase = myChar.toLowerCase();

  // Find the position of the char in the alphabet
  const position = myCharLowercase.charCodeAt() - DIFFERENCE_CHARCODE_AND_LETTERS;

  // Return the desired message with the position
  return `Position in Alphabet: ${position}`
}
```

Where do we get the `96` from? When we go to the [ASCII Table](https://www.w3schools.com/charsets/ref_html_ascii.asp) and scroll down to the `a` in the `Char` column, we can see `97` in the `Number` column. So our `1`. char has the number `97`, our `2`. char has number `98` etc., meaning there is a difference of `96` between the char code (the `Number` column) and the actual char (the `Char` column).

### Result

```js
console.log(positionInAlphabet("a"));
// 1 ✅

console.log(positionInAlphabet("Z"));
// 26  ✅
```

---

## Implementation (indexOf) ⛑

```js
function positionInAlphabet(myChar) {
  const letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

  // Convert the character into lowercase
  const myCharLowercase = myChar.toLowerCase();

  // Find the position of the char in the alphabet
  const position = letters.indexOf(myCharLowercase) + 1;

  // Return the desired message with the position
  return `Position in Alphabet: ${position}`;
}
```

### Result

```js
console.log(positionInAlphabet("a"));
// 1 ✅

console.log(positionInAlphabet("Z"));
// 26  ✅
```

---

## Playground ⚽

You can play around with the code [here](https://repl.it/@miku86/js-katas-position-in-alphabet)

---

## Next Part ➡️

Great work!

We learned how to use `toLowerCase`, `charCodeAt`, `indexOf`.

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 📖

- [toLowerCase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
- [charCodeAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt)
- [indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)

---

## Questions ❔

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