JavaScript треугольник с одной функцией

Question

Я играю с созданием треугольников в Javascript, и обычно мне приходится использовать 2 функции, чтобы сделать одну. Недавно я попытался создать одну с одной функцией, и она работала отлично. Но я не уверен, почему или как он начинает новую строку после выполнения цикла for каждый раз, так как я нигде не упоминал " \n " в коде для отдельной функции. Кто-нибудь может объяснить, почему это все еще работает? Благодарю.

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

Вот как я это сделал с 2 функциями

    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)

Есть также строка с повторением "undefined" после выполнения попытки 2 функции, поэтому, если кто-то может это объяснить, я был бы очень благодарен. Еще раз спасибо.

Answer 1

Причина, по которой вы печатаете "undefined", заключается в том, что вы путаете между функцией, которая возвращает строку, и функцией, которая записывает в console.log(). Если вы внимательно изучите горизонтальный (), то увидите, что он пишет в консоль... Возвращаемого значения нет. Однако, если вы внимательно изучите функцию tri(), вы увидите, что она ожидает, что горизонтальный () будет возвращать строку. то есть два предположения расходятся. Итак, поведение, которое вы получаете, - это выходные данные в console.log, а также конкатенация undefined, потому что ваша функция не возвращает никакого значения.

Я сделал следующие исправления:

• Сделал horizontal() вернуть ряд звезд
• Удалить из-за использования var ключевое слово. Ты имел var star везде, и, действительно, вы объявляете это один раз и используете это везде
• Теперь, когда мы возвращаем строки, мне пришлось добавить символ новой строки в строку (до того, как console.log давал вам бесплатную новую строку)
• Я сделал небольшие изменения форматирования и пробелов
• Переименовал вашу переменную из star в 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);

Answer 2

1. Console.log вывести аргумент, который вы передали на каждой итерации
2. Функция возвращает неопределенное значение. console.log явно ничего не возвращает.

Может быть, этот пример поможет.

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

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

Теперь мы явно возвращаем значение.