JavaScript triangle with single function

Question

I'm playing around with making triangles in Javascript and normally I've had to use 2 functions to make one. I recently tried to create one with a single function though, and it worked perfectly. But I'm not sure why or how it starts a new line after running through the for loop each time since I never mentioned " \n " anywhere in the code for the single function. Could anyone explain why it still works? Thanks.

    function tri(num){
  var star = '';
  for(var i = 1; i <= num; i++){
    var star = star + " *";
    console.log(star)
  }
}
tri(10)

Here's how I did it with 2 functions

    function horiztonal(num){
  var star = "";
  for(var i = 0; i <= num; i++){
    var star = star + " *"
  }
  console.log(star)
}


function buildTri(num){
  var star = "";
  for(var i = 0; i < num; i++){
    var star = star + horiztonal(i)
  }
  console.log(star)
}

buildTri(10)

There's also a string of repeating "undefined" after running the 2 function attempt, so if anyone could explain that as well I'd really appreciate it. Thanks again.

You usually shouldn't strive to combine two functions into one. Generally, providing you have good structuring, the more functions the better. And you shouldn't really be using `console.log` in either function; that's just going to cause headaches. Both functions should return a string that can be printed later. — Carcigenicate, Feb 05 '18 at 01:47

Lewix · Answer 1 · 2018-02-05T22:16:15.603

0

Console.log print the argument you passed at each iteration
The function returns undefined. console.log does not explicitly return anything.

Maybe that example will help.

function tri(num){
  var star = '';
  for(var i = 1; i <= num; i++){
    var star = star + " *";
    console.log(star)

  }
     return "Finished"; //explicitly returning
}
tri(10)

Now we are explicitly returning a value.

edited Feb 05 '18 at 22:16

answered Feb 05 '18 at 02:49

Lewix

924
1
9
11

@Carcigenicate the point was to show that he should explicitly return depending on his context - if he does not want to see undefined – Lewix Feb 05 '18 at 22:15
With that said, if I can retire my answer I would. Since there's been a more thorough answer given by Stephen Quan. Next time I'll refrain from answering unless the answer is thorough. – Lewix Feb 05 '18 at 22:23

Stephen Quan · Accepted Answer · 2018-02-05T03:04:48.593

The reason why you're getting "undefined" printed, is you're confusing between a function that returns a string and a function that writes to the console.log(). If you study, horizontal() carefully, you see that it's writing to the console... There is no return value. However, if you study the tri() function carefully, you'll see that it expects horizontal() to be returning a string. i.e. the two assumptions are at odds. So, the behaviour you're getting is the outputs to the console.log as well as the concatenation of undefined because your function didn't return any value.

I've made the following rectifications:

Made horizontal() return the row of stars
Remove over use of the var keyword. You had var star everywhere, and, really, you are declaring it once, and using it everywhere
Now that we're returning strings, I had to add a newline character to the string (before console.log was giving you a freebie newline)
I've done minor formatting and spacing tweaks
Renamed your variable from star to stars (for correctness, since, the string will contain a collection of stars)

function horiztonal(num) {
  var stars = "";
  for (var i = 0; i <= num; i++) {
    stars = stars + " *"
  }
  return stars;
}


function buildTri(num) {
  var stars = "";
  for (var i = 0; i < num; i++) {
    stars = stars + horiztonal(i) + "\n";
  }
  console.log(stars)
}

buildTri(10);

Thank you sir! That's a great way of explaining the undefined issue. Thanks for the code clean up as well. I'll remember those tips from now on. — Sahil Bagga, Feb 05 '18 at 04:42

JavaScript triangle with single function

2 Answers2