Kit-Kat array in JavaScript

In JavaScript, a Kit-Kat array is a custom array where numbers are replaced with specific strings based on divisibility rules. This pattern is similar to the classic FizzBuzz problem but with customizable divisors.

Problem Statement

Create a function that takes three parameters: a natural number num, and two divisors m and n. The function should return an array containing numbers from 1 to num with these replacements:

• Replace multiples of m with 'kit'
• Replace multiples of n with 'kat'
• Replace multiples of both m and n with 'kitkat'

Algorithm Visualization

Implementation

Here's the solution with proper parameter validation and clear logic:

const num = 50;
const m = 5, n = 6;

const kitKat = (num = 1, m = 1, n = 1) => {
    const res = [];
    for(let i = 1; i <= num; i++){
        if(i % m === 0 && i % n === 0){
            res.push('kitkat');
        }else if(i % m === 0){
            res.push('kit');
        }else if(i % n === 0){
            res.push('kat');
        }else{
            res.push(i);
        }
    }
    return res;
};

console.log(kitKat(num, m, n));

Output

[
  1, 2, 3, 4, 'kit',
  'kat', 7, 8, 9, 'kit',
  11, 'kat', 13, 14, 'kit',
  16, 17, 'kat', 19, 'kit',
  21, 22, 23, 'kat', 'kit',
  26, 27, 28, 29, 'kitkat',
  31, 32, 33, 34, 'kit',
  'kat', 37, 38, 39, 'kit',
  41, 'kat', 43, 44, 'kit',
  46, 47, 'kat', 49, 'kit'
]

Step-by-Step Example

Let's trace through the first 10 numbers with m=5, n=6:

const traceKitKat = (num, m, n) => {
    for(let i = 1; i <= num; i++){
        let result;
        if(i % m === 0 && i % n === 0){
            result = 'kitkat';
        }else if(i % m === 0){
            result = 'kit';
        }else if(i % n === 0){
            result = 'kat';
        }else{
            result = i;
        }
        console.log(`${i}: ${i % m === 0 ? 'divisible by ' + m : ''} ${i % n === 0 ? 'divisible by ' + n : ''} ? ${result}`);
    }
};

traceKitKat(10, 5, 6);

1:   ? 1
2:   ? 2
3:   ? 3
4:   ? 4
5: divisible by 5  ? kit
6:  divisible by 6 ? kat
7:   ? 7
8:   ? 8
9:   ? 9
10: divisible by 5  ? kit

Alternative Approach with Map

A more functional approach using Array.from() and mapping:

const kitKatFunctional = (num, m, n) => {
    return Array.from({length: num}, (_, i) => {
        const current = i + 1;
        if(current % m === 0 && current % n === 0) return 'kitkat';
        if(current % m === 0) return 'kit';
        if(current % n === 0) return 'kat';
        return current;
    });
};

console.log(kitKatFunctional(15, 3, 5));

[
  1, 2, 'kit', 4, 'kat',
  'kit', 7, 8, 'kit', 'kat',
  11, 'kit', 13, 14, 'kitkat'
]

Key Points

• Check for both divisors first (LCM condition) to avoid incorrect replacements
• Use modulo operator (%) to test divisibility
• The order of conditions matters - check combined condition before individual ones
• Default parameters provide fallback values for edge cases

Conclusion

The Kit-Kat array pattern demonstrates conditional logic and array manipulation in JavaScript. The key is checking the combined divisibility condition first, then individual conditions, ensuring accurate string replacements based on mathematical rules.