Warum Sie Werte in JavaScript nicht neu zuweisen sollten

In JavaScript können Sie Variablen, mit denen Sie deklariert haben, Werte neu zuweisen let oder var.

Früher habe ich viele Werte neu zugewiesen. Aber als ich mit JavaScript besser wurde, wurde mir klar, dass Sie Werte nicht neu zuweisen sollten, wenn Sie können. Das ist weil:

  1. Sie können den externen Status versehentlich ändern, wenn Sie Werte neu zuweisen
  2. Sie erstellen komplexeren Code, wenn Sie Werte neu zuweisen

Sie können den externen Status versehentlich ändern, wenn Sie Werte neu zuweisen

Wenn Sie einer Variablen einen neuen Wert zuweisen, schreiben Sie den Variablennamen gefolgt von =gefolgt von Ihrem neuen Wert.

// Declaring a variable
let name="Zell" // Reassigning a variable
name="Vincy"

Es scheint auf den ersten Blick in Ordnung zu sein, Werte neu zuzuweisen, ist es aber nicht. Das Problem tritt auf, wenn Sie sich die Bereiche ansehen.

Nehmen wir an, Sie haben eine Variable namens name im globalen Kontext.

Nehmen wir auch an, Sie haben eine Funktion namens erstellt sayName. sayName protokolliert das übergebene Argument. Aber bevor Sie das Argument protokollieren, ändern Sie die name Variable.

let name="Zell" function sayName (arg) { name = arg console.log(name)
}

Wenn du anrufst sayNameändern Sie den Wert von name bis in alle Ewigkeit. Es hat den Zustand außerhalb der Funktion geändert.

sayName('Vincy') // Vincy
console.log(name) // Vincy

Jetzt denken Sie vielleicht, dass dieses Beispiel dumm klingt, und Sie werden niemals so einen dummen Code schreiben.

Die Frage ist, können Sie garantieren, dass Sie diesen Fehler nie machen werden, selbst wenn Sie mitten im Geschehen sind?

Ich kann nicht.

Machen Sie es sich zur Gewohnheit, Variablen nicht neu zuzuweisen.

Ich empfehle immer, Variablen mit dem zu erstellen const Stichwort. Dies liegt daran, dass Variablen, die mit a erstellt wurden const Schlüsselwort kann nicht neu zugewiesen werden. Sie erhalten eine Fehlermeldung, wenn Sie versuchen, ihnen einen neuen Wert zuzuweisen.

const name="Zell" function sayName (arg) { name = arg console.log(name)
} sayName('Vincy') // TypeError: invalid assignment to const `name'

Sie erstellen komplexen Code, wenn Sie Werte neu zuweisen

Stellen Sie sich vor, eine Kollegin von Ihnen ändert jeden Tag ihre Frisur. Sie kommt ins Büro mit:

  1. Knall am Montag
  2. Zöpfe am Dienstag
  3. Kurze Haare am Mittwoch
  4. Lange Haare am Donnerstag
  5. Hellrosa Haare am Freitag

Es wird Ihnen schwer fallen, sie zu erkennen.

Wenn Sie eine Variable mit erstellen let, weiß Ihr Gehirn, dass sich die Variable ändern wird. Es übt mehr Energie aus, um die Änderungen auf der Straße im Auge zu behalten.

Lassen Sie uns ein Beispiel durchgehen und Sie werden sehen, wie das funktioniert.

let hair if (today === 'Monday') { hair="bangs"
} else { hair="something else"
}

Hier geht dein Gehirn:

  1. Es gibt eine Variable namens hair.
  2. Der Wert von hair wird sich später ändern. Den Wert kenne ich jetzt nicht. (Das ist unangenehm).
  3. Später…
  4. today ist Montag.
  5. Haare werden bangs

Vergleichen Sie nun diesen Denkprozess mit einem, bei dem Sie ternäre Operatoren verwenden.

const hair = today === 'Monday' ? 'bangs' : 'something else'

Hier geht dein Gehirn:

  1. Es gibt eine Variable namens Haar.
  2. today ist Montag.
  3. Haare werden bangs.

Mit dem ternären Operatorcode gibt es keine Wartezeiten. Ihr Gehirn leistet weniger Arbeit, da es nicht „abwarten“ muss.

Es ist so, als würde man entscheiden, was man zu Mittag isst. Sie werden keine Energie damit verschwenden, darüber nachzudenken, was Sie essen sollen, wenn Sie sich vorher entschieden haben.

Arbeiten mit vielen Niederlassungen

Ternäre Operatoren funktionieren nur, wenn Sie einfach haben if/else Aussagen. Was ist, wenn Sie mehr Filialen benötigen?

let hair if (today === 'Monday') { hair="bangs"
} else if (today === 'Tuesday') { hair="braids"
} else if (today === 'Wednesday') { hair="short hair"
} else if (today === 'Thursday') { hair="long hair"
} else if (today === 'Friday') { hair="bright pink hair"
}

Der beste Weg, mit vielen umzugehen if/else Aussagen (oder sogar eine switch)-Anweisung soll die enthalten if/else Logik in einer Funktion.

Hier ist ein Anfang (wobei wir einfach eine Funktion um den obigen Code wickeln):

function getHairType (today) { let hair if (today === 'Monday') { hair="bangs" } else if (today === 'Tuesday') { hair="braids" } else if (today === 'Wednesday') { hair="short hair" } else if (today === 'Thursday') { hair="long hair" } else if (today === 'Friday') { hair="bright pink hair" } return hair
}

Wenn du anrufst getHairType, es ist dir egal, wie es funktioniert. Alles, was Sie interessiert, ist der Wert, den Sie zurückbekommen getHairType. Dadurch können Sie besser verstehen, wie Ihr Code ausgeführt wird.

// Using the function
const hair = getHairType('Wednesday') // short hair

Der nächste Schritt wird die Verbesserung sein getHairType. Hier können Sie eine verwenden vorzeitige Rückkehr.

Eine frühe Rückgabe bedeutet, dass Sie einen Wert zurückgeben, bevor die Ausführung der Funktion abgeschlossen ist. Wenn Sie dies tun, müssen Sie nicht einmal eine erstellen hair Variable. Sie können den Wert von zurückgeben hair direkt.

function getHairType (today) { if (today === 'Monday') return 'bangs' if (today === 'Tuesday') return 'braids' if (today === 'Wednesday') return 'short hair' if (today === 'Thursday') return 'long hair' if (today === 'Friday') return 'bright pink hair'
}

Es ist jetzt viel einfacher zu lesen, nicht wahr?

Einpacken

Sie möchten vermeiden, Variablen Werte neu zuzuweisen, weil:

  1. Sie können den externen Status versehentlich ändern, wenn Sie Werte neu zuweisen
  2. Sie erstellen komplexeren Code, wenn Sie Werte neu zuweisen

Anstatt Werte neu zuzuweisen, versuchen Sie es mit ternären Operatoren und frühen Rückgaben. Sie können Ihren Code prägnanter und leichter lesbar machen.

Wenn Ihnen diese Lektion geholfen hat, vielleicht viel Spaß JavaScript lernen, wo Sie lernen, wie Sie alles, was Sie wollen, von Grund auf neu erstellen können. Die Anmeldung für Learn JavaScript beginnt im Juli 2018 (in drei Wochen!).

Danke fürs Lesen. Dieser Artikel wurde ursprünglich auf veröffentlicht mein Blog. Melden Sie sich an für mein Newsletter wenn Sie weitere Artikel wünschen, die Ihnen dabei helfen, ein besserer Frontend-Entwickler zu werden.

Similar Posts

Leave a Reply

Your email address will not be published.