loading...
Cover image for JavaScript Katas: Position in Alphabet

JavaScript Katas: Position in Alphabet

miku86 profile image miku86 ・3 min read

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

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
  2. Find the position of the char in the alphabet
  3. 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) β›‘

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 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

console.log(positionInAlphabet("a"));
// 1 βœ…

console.log(positionInAlphabet("Z"));
// 26  βœ…

Implementation (indexOf) β›‘

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

console.log(positionInAlphabet("a"));
// 1 βœ…

console.log(positionInAlphabet("Z"));
// 26  βœ…

Playground ⚽

You can play around with the code here


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.

If you want to read my latest stuff, get in touch with me!


Further Reading πŸ“–


Questions ❔

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

Posted on by:

miku86 profile

miku86

@miku86

Mentor & Educator & Senior Web Developer - I help people to reach their (career) goals. => https://miku86.com/mentoring

Discussion

markdown guide
 

Nice!

(Btw, you can use .indexOf on strings too)

My weird takes:

A regex approach

const positionInAlphabet = c => 'abcdefghijklmnopqrstuvwxyz'
  .replace(new RegExp(c + '.*', 'i') , c).length

Parsing with alphabet radix (26 + 10 for 0-9 numbers)

const positionInAlphabet = c => Number.parseInt(c, 36) - 9

Michael, make em a bit harder, please, to leave us some space for creativity :)

 

Hey Kostia,

nice solution!

I probably wouldn't ever use my array solution,
because the prettier formatting would blocked the whole screen vertically haha.