Console.log alphabet with space every 3 letters javascript

Question

I'm learning JS and I have a challenge that I can't solve so far. I have to have the alphabet in an array like so... var alphabet = ['abcdefghijklmnopqrstuvwxyz']; or var alphabet = ['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']; . I need to console.log() the alphabet as fallow...

a
ab
abc
abc d
abc de
abc def
abc def g
abc def gh
abc def ghi

So far I have the following code...

function stackLetter(l) {
    for (var index = 1; index < l[0].length; index++) {
        console.log(l[0].slice(0, index));
    }
}


stackLetter(alphabet);

The outcome so far...

a
ab
abc
abcd
abcde
abcdef
abcdefg
abcdefgh
abcdefghi
abcdefghij
abcdefghijk
abcdefghijkl
abcdefghijklm
abcdefghijklmn
abcdefghijklmno
abcdefghijklmnop
abcdefghijklmnopq
abcdefghijklmnopqr
abcdefghijklmnopqrs
abcdefghijklmnopqrst
abcdefghijklmnopqrstu
abcdefghijklmnopqrstuv
abcdefghijklmnopqrstuvw
abcdefghijklmnopqrstuvwx
abcdefghijklmnopqrstuvwxy

I'm still reading in the MDN about string manipulation but can't make it to work so far. How I can tweak my code to accomplish the outcome? I want to do this with vanilla JS.

Answer 1

You can add a space to your string after every 3rd letter:

var alphabet = ['a', 'b'...'y', 'z'];

function stackLetters(alphaArr) {
  var stackResult = ''; //initialize as empty string
  for (var i = 0; i < alphaArr.length; i++) { //iterate thru alphabet array
    if (i % 3 === 0 && i !== 0) { //every 3rd element
      stackResult += ' ' + alphaArr[i]; //prepend space and concatenate result
    } else {
      stackResult += alphaArr[i]; //concatenate result
    }
    console.log(stackResult); //log during each iteration current stackResult
  }
} 

Answer 2

function stackLetter(l) {
    for (var index = 1; index < l[0].length; index++) {
        var str = "";
        for(var j = 0; j < index; j++)
        {
            str += l[0][j];
            if(j % 3 == 0 && j != 0)
                str += " ";
        }
        console.log(str);
    }
}

Answer 3

Something like that:

var alphabet = 'abcdefghijklmnopqrstuvwxyz';

function stackLetter(l) {
    l.forEach( function(l1, i1) {
        var str = '';
        for (var i2=0; i2<=i1; i2++) {
            str += l[i2]
            if ((i2+1) % 3 == 0) str += ' ';
        };
        console.log(str);
    } );
}


stackLetter(alphabet.split('')); //or pass the array directly

Results:

a
ab
abc 
abc d
abc de
abc def 
abc def g
abc def gh
abc def ghi 
abc def ghi j
abc def ghi jk
abc def ghi jkl 
abc def ghi jkl m
abc def ghi jkl mn
abc def ghi jkl mno 
abc def ghi jkl mno p
abc def ghi jkl mno pq
abc def ghi jkl mno pqr 
abc def ghi jkl mno pqr s
abc def ghi jkl mno pqr st
abc def ghi jkl mno pqr stu 
abc def ghi jkl mno pqr stu v
abc def ghi jkl mno pqr stu vw
abc def ghi jkl mno pqr stu vwx 
abc def ghi jkl mno pqr stu vwx y
abc def ghi jkl mno pqr stu vwx yz

...or another approach using ES6 and regex (just for fun):

function stackLetter(_alphabet) { //receives a string

    _alphabet
        .match(/.{1,3}/g)
        .map((c) => c + ' ')
        .join('').split('')
        .forEach( (a,b,c) => console.log(c.slice(0,b).join('') ) )

}

Answer 4

I know this has an accepted solution, but I think this solution is more simple - rather than iterating through the loop and applying the spacing logic each time - do it one and insert the space before each third element creating a string with spaces. Then iterate through the list and display a substring with an increasing number of the modified string with a line break to give the stacked style.

 var alphabet = ['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']; var str = '', spacer; for(i=0;i<alphabet.length;i++){ if(i % 3 == 0){var spacer = ' '} else {var spacer=''}; str += spacer + alphabet[i]; }; console.log(str); //gives abc def ghi jkl mno pqr stu vwx yz for(a=0;a<=str.length;a++){ var res = str.substr(0, a); console.log(res); //give results such as abc def ghi jkl mno }