Verständnisfrage Rekursion

[sebjel]

Hallo,
ich habe vor kurzem damit begonnen, Javascript zu lernen und hänge gerade etwas an einer Übungsaufgabe zur Rekursion. Dabei geht es darum, ein Dreieck zu zeichnen:

"use strict";

const triangle = height => buildTriangle(height, 0, "*");

const buildTriangle = (height, topLineWidth, character) =>
  topLineWidth === height
  ? ""
  : line(topLineWidth, character) + "\n"
  + buildTriangle(height, topLineWidth + 1, character);

const line = (length, character) =>
  length === 0
  ? ""
  : character + line(length - 1, character);

console.log(triangle(10));

Kann mir jemand in eigenen Worten erklären, wie die Funktion buildTriangle funktioniert? Vor allem hänge ich an der Bedingung "topLineWidth === height", warum ist diese notwendig? Und warum wurde einmal die Funktion triangle und einmal buildTriangle verwendet, gibt es dazu keine elegantere Lösung?

Im Buch selbst steht leider keine Erklärung, vielen Dank vorab!

 

[Tronjer]

Zum Thema Recursion vorab diesen Artikel lesen:
https://www.sitepoint.com/recursion-functional-javascript

Zum Beispiel:
Der Autor verwendet ES6 mit Phat Arrow Syntax und einen Ternären Operator, das macht es schwerer zu lesen. Du kannst die Funktion alternativ auch so schreiben:

var buildTriangle = function(height, topLineWidth, character) {
  if (topLineWidth === height) {
    return "";
  } else {
    return line(topLineWidth, character) + "\n" + buildTriangle(height, topLineWidth + 1, character);
  }
}

topLineWidth === height ist die Abbruchbedingung. Solange beide Werte nicht identisch sind, wird die Funktion rekursiv aufgerufen. Dass hier drei Funktionen verschachtelt sind, macht das Beispiel noch komplexer. Du musst das als Einsteiger nicht vollständig verstehen. Fange lieber mit einem Framework wie jQuery an.

 

[sebjel]

Danke für den Artikel!

Die Schreibweise ist gar nicht so sehr das Problem, die kann ich durchaus nachvollziehen, so sehr bin ich doch nicht Einsteiger. =)

Ich wundere mich nur über den Inhalt, wieso muss beim Zeichnen eines Dreiecks die topLineWidth gleich der Höhe sein, damit die Zeichnung fertiggestellt wird? Gibt es da keine Möglichkeit, das Dreieck zu beenden, sobald die Länge der letzten line-Funktion gleich 0 ist?