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
– Carcigenicate, Commented Feb 5, 2018 at 1:47

Stephen Quan · Accepted Answer · 2018-02-05 03:04:48Z

0

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

edited Feb 5, 2018 at 3:04

answered Feb 5, 2018 at 2:57

Stephen Quan

28k4 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sahil Bagga Over a year ago

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.

Lewix · Accepted Answer · 2018-02-05 22:16:15Z

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 5, 2018 at 22:16

answered Feb 5, 2018 at 2:49

Lewix

1,0291 gold badge11 silver badges11 bronze badges

2 Comments

Lewix Over a year ago

@Carcigenicate the point was to show that he should explicitly return depending on his context - if he does not want to see undefined

Lewix Over a year ago

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.

Collectives™ on Stack Overflow

JavaScript triangle with single function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related