Block Scope und Local Scope Unterschiede in JavaScript?

Hallo zsm,

könnte mir jmd kurz, knapp und einfach (verständlich) erklären, was der Unterschied zwischen Block Scope und Local Scope ist (JAVASCRIPT) ? Ich habe schon überall darüber recherchiert aber ohne Erfolg... Dankeschön im Voraus!

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programm, IT, Webseite

19.11.2023, 15:00

Variablen, die via let/const deklariert werden, sind nur in dem Codeblock bekannt, in dem sie kreiert wurden (block scope).

Beispiel:

function doSomething() {
  let value = 1;

  if (value == 1) {
    let otherValue = 2;
  }
}

doSomething();

Die Variable value ist im gesamten Funktionsblock bekannt. Sobald die Funktion durchlaufen wurde, wird sie wieder gelöscht.
Die Variable otherValue ist nur innerhalb des if-Körpers bekannt. Sobald dieser durchlaufen wurde, wird sie wieder gelöscht.

Da sie nur für einen begrenzten Kontext verfügbar sind, gehören block scope-Variablen zu der Gruppe der lokalen Variablen (Variablen mit local scope).

Eine weitere Untergruppe sind Variablen, die nur innerhalb von Funktionen bekannt sind (function scope).

Ähnliche Beiträge

Javascript Fragen?

Hallo,

wir haben heute JS angefangen, aber ich habe ein paar Sachen nicht ganz verstanden.

Wann benutzt man "var" und wann "const" und gerne mit Beispielen bitte
Was sind Interpolation und Concatenation? Und wann benutzt man sie? Hier auch bitte mit Beispielen.

Ich habe schon darüber recherchiert, aber die Antworten sind dort zu komplex und unverständlich. Ich hoffe auf eure verständliche und nützliche Fragen!

Dankesschön im Voraus!

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zum Beitrag

Programieren lernen (Tipps)?

Also ich habe mich entschieden, einen komplett neuen Berufsweg einzuschlagen und Programmiererin zu werden.

Ich habe mich immer für so etwas interessiert und in Mathe war ich auch immer gut bis sehr gut, aber ich habe mich nie getraut, Programmierung zu lernen, weil ich immer dachte, dass man ein Computerfreak sein und gefühlt schon mit fünf Jahren mehrere Programme geschrieben haben muss, um Chancen in der IT-Welt zu haben.

Jetzt die Fragen!

Ich habe mich für JavaScript entschieden.

Ist es eine gute Idee, mit JavaScript anzufangen?

Ich will erst zwei Sachen schaffen. Erst einmal Hallo Welt und einen Taschenrechner programmiereren. Wie lange dauert es, bis man die beiden Sachen drauf hat?

Und wie geht man vor? So lange ich mein Fachabi nachhole, will ich mir in meiner Freizeit das Programmieren ein bisschen selbst beibringen. Wie würdet ihr vorgehen, wenn heute euer erster Tag wäre und ihr komplett bei 0 starten würdet?

Kann man dann nach einem Jahr schon ein bisschen programmieren (wenn man jeden Tag ca. drei Stunden lernt)?

Wenn ihr mir auch raten würdet, mit JavaScript anzufangen: Welches Buch würdet ihr mir empfehlen, wenn ihr nur eins zu Auswahl hättet?

Vielen Dank schon einmal!

...zum Beitrag

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Welches Betriebssystem, wenns nur um Programmieren geht?

Nur programmierung, nichts anderes

...zum Beitrag

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zum Beitrag

Welche Programmiersprache ist schnell und einfach zu lernen?

...zum Beitrag

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zum Beitrag

Html css und php zusammen?

Hi ich bin dabei eine Seite zu erstellen und habe grade das login und registrations design mit Css und Html fertig gestellt. Nun bräuchte ich noch eine art system dahinter. Ich habe geschaut und denke man nutzt Php für dieses System mit Datenbank etc. Nun meine Frage: Kann ich ein Php login system mit meiner html css login seite kombinieren? oder ist das nicht möglich? Sorry wenn die Frage dumm ist :/

...zum Beitrag

kann man programmieren?

wenn man alles nur von yt kopiert

...zum Beitrag

Politik Halbkreis selber erstellen? Welche(s) Programm(iersprache)?

Ich bin sehr Politik interessiert und vor allem Sitzverteilungen und Koalitionen interessieren mich.

Ich versuche seit Ewigkeiten immer wieder so einen Halbkreis zu machen - siehe Bild (hier Österreich als Bsp.)

Habe es schon mit HTML und CSS probiert, bin aber an der Form gescheitert und um das alles (Code und Webseite) zu verbinden.

Weiß da jemand mehr bzw. kann mir jemand helfen und mich glücklich machen?

egal ob YT Video, oder sonst was.

Danke schonmal im Voraus

...zum Beitrag

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zum Beitrag

HTML/CSS: Wie kann ich den Text neben dem zweiten Symbol zentrieren?

Hallo,

ich brauche Hilfe. Ich möchte den Text „Announcements“ so verschieben, dass es neben dem zweiten Symbol zentriert ist (siehe erster Text „My courses“).

Dankeschön.

Es wäre nett, wenn ihr antworten würdet.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen