Javascript Function returns undefined after for-loop runs the first time

Question

I have a basic question about for-loops and variables. I have the following code:

function fiveLine(s){
  let trim=s.trim()
  let fulltrim;

  for (let i=1; i<=5; i++){
  fulltrim+="\n"+trim.repeat(i)
  
  }
  return fulltrim
}

When invoked, with fiveLine('a') it prints

undefined
aaa
aaaaaa
aaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaaaaaa

Besides the output 'undefined' it works perfectly like I want it to. I understand that the variable fulltrim is accessed and returned before it is updated by the for-loop, but I don't understand why. In other words, I don't understand why the output is not

aaa
aaaaaa
aaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaaaaaa

For me, the variable fulltrim is already updated by the for-loop when returned for the first time, thus it shouldn't be undefined anymore. Thanks for reading!

The code doesn't initialise fulltrim. Use let fulltrim = "";. — Andrew Morton
– Andrew Morton, Commented Jun 21, 2020 at 12:44

Yousaf · Accepted Answer · 2020-06-21 14:06:48Z

3

fulltrim is undefined when i is 1, that's why it prints undefined.

initialize fulltrim with an empty string

let fulltrim = '';

function fiveLine(s) {
  let trim = s.trim()
  let fulltrim = '';

  for (let i = 1; i <= 5; i++) {
    fulltrim += "\n" + trim.repeat(i)

  }
  return fulltrim
}

console.log(fiveLine('a'))

To prevent printing an empty line when i is equal to 1, you can append an empty string instead of \n to fulltrim

function fiveLine(s) {
  let trim = s.trim()
  let fulltrim = '';

  for (let i = 1; i <= 5; i++) {
    fulltrim += (i == 1 ? '' : "\n") + trim.repeat(i);
  }
  return fulltrim
}

console.log(fiveLine('a'))

Edit:

To understand what's really happening in your code, see the following demonstration of how value of fulltrim is updated in each iteration of the loop

// i = 1
"undefined
a"

// i = 2
"undefined
a
aa"

// i = 3
"undefined
a
aa
aaa"

// i = 4
"undefined
a
aa
aaa
aaaa"

// i = 5
"undefined
a
aa
aaa
aaaa
aaaaa"

edited Jun 21, 2020 at 14:06

answered Jun 21, 2020 at 12:45

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

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

3 Comments

Jenny Over a year ago

So basically, first the value 'fulltrim' is not initialized which is why it returns 'undefined'. But after that fulltrim is initialized with the value 'undefined' and thus it works as intended afterwards? Just trying to really understand what s going on you know. Thanks so far and to everyone else!

Yousaf Over a year ago

see the updated answer for details of how fulltrim is updated in each iteration

Jenny Over a year ago

So basically 'fulltrim' gets the value 'undefined' after the first try when initializing failed. Thus the value is initialized because it has a value of 'undefined' by now? Subsequently it works as intended. I absolutely understand everything else, but wonder why the for-loop works after all. Hope you can follow my thoughts.

Skander Ben Khelil · Accepted Answer · 2020-06-21 12:45:31Z

0

You need to initialize fulltrim.

 function fiveLine(s){
      let trim=s.trim()
      let fulltrim= "";
    
      for (let i=1; i<=5; i++){
      fulltrim+="\n"+trim.repeat(i)
      
      }
      return fulltrim
    }

answered Jun 21, 2020 at 12:45

Skander Ben Khelil

1251 gold badge3 silver badges8 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2020-06-21 12:56:43Z

0

fulltrim; is not set to any value therefore JS treats it as undefined.
To prevent the first empty line caused by the first \n concatenation - use fulltrim = [] and fulltrim.push(s.repeat(i)) instead.
Finally return fulltrim.join("\n");

function fiveLine(s){
  s = s.trim();
  const fulltrim = [];
  for (let i=1; i<=5; i++) fulltrim.push(s.repeat(i));
  return fulltrim.join("\n");
}

console.log(fiveLine("a"));

Here's another similar version:

const strRepeat = (s, t) => {
  s = s.trim();
  return [...Array(t)].reduce((a, o, i) => (a.push(s.repeat(i+1)), a), []).join("\n");
}

console.log(strRepeat("a", 5));

edited Jun 21, 2020 at 12:56

answered Jun 21, 2020 at 12:50

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

Javascript Function returns undefined after for-loop runs the first time

3 Answers 3

Edit:

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit:

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related