Concatenation of a string using ternary operator and recursion

Question

I try to understand this one. It is an example from advanced javascript by John Resig.

function yell(n) {
    return n > 0 ? yell(n-1) + "a" : "hiy";
}
alert( yell(4) );

As a beginner I somehow would use a temporary variable to save the string and concatenate it to the final word (here hiyaaaa).

I cannot understand how this advanced example is working. Where the concatenation happens and how? Why is "hiy" before the "a"'s at the end, if it is added last?

Answer 1

This is recursion. The temporary variable is the return value of the call to yell. yell calls itself until n <= 0. The easiest way to understand this may be to intuitively write out the series of calls that will be made to yell.

yell(4) == yell(3) + "a"
yell(3) == yell(2) + "a"
yell(2) == yell(1) + "a"
yell(1) == yell(0) + "a"
yell(0) == "hiy"

Substitute the values and you will get the final value for yell(4).

The Conditional Operator is just a terse way of expressing a conditional statement with two cases. By replacing this usage of the operator with the expand if statement form, it may be easier to conceptualize.

function yell(n) {
    if (n > 0) {
        return yell(n-1) + "a";
    }

    return "hiy";
}

Answer 2

The ternary is just a shortcut for an if statement:

function yell(n) {
    var temp;
    if (n > 0) {
        temp = yell(n-1) + "a";
    } else {
        temp = "hiy";
    }
    return temp;
}

Multiple concatenation is happening because the function calls itself recursively with a smaller value of n. The final call (when n == 0) returns hiy. When each recursive call returns, it appends a to the result and returns that back to the previous caller.

Answer 3

Let's walk through this...

This is just a function declaration and nothing happens when it is reached (besides the function being parsed into memory):

function yell(n){
  return n > 0 ? yell(n-1) + "a" : "hiy";
}

Now, the function is invoked and the number 4 is passed into it:

alert( yell(4) );

The 4 is received as the value of the argument n and then this line:

  return n > 0 ? yell(n-1) + "a" : "hiy";

...first checks n to see if it is greater than 0, which 4 is, so the true part of the ternary expression is carried out:

yell(n-1) + "a"

This makes a recursive call to yell and passes 3 (n - 1) to the function. Note that nothing is returned from the first call to yell yet, because flow control has been passed over to the second occurrence of yell.

The function runs again with 3 as n and again hits the true part of the ternary, causing the number to be reduced by one and then yell is called again.

This will continue until yell is recursively called with 0 as the value passed into it, at which time the false part of the ternary expression is invoked and hiy is returned and the aaaa from the recursive calls is concatenated onto that.

function yell(n){
  return n > 0 ? yell(n-1) + "a" : "hiy";
}
alert( yell(4) );

Answer 4

function yell(n){
  if      (n > 3) {return yell(n-1) + "4"}
  else if (n > 2) {return yell(n-1) + "3"}
  else if (n > 1) {return yell(n-1) + "2"}
  else if (n > 0) {return yell(n-1) + "1"}
  else {return "0"} 
}
alert( yell(4) );

To see the order of each step of concatenation, I tried this. Still confusing, but at least I see how it works.

Thank you all for the useful answers!