CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Speichern der benötigten Informationen — Variablen - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="Storing the information you need — Variables" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="en"/><link rel="alternate" title="Almacenando la información que necesitas - Variables" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="es"/><link rel="alternate" title="Stocker les informations nécessaires — les variables" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="fr"/><link rel="alternate" title="必要な情報を保管する — 変数" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="ja"/><link rel="alternate" title="필요한 정보를 저장하기 - 변수" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="ko"/><link rel="alternate" title="Armazenando as informações que você precisa — Variáveis" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="pt"/><link rel="alternate" title="Переменные - место хранения необходимой информации" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="ru"/><link rel="alternate" title="如何存储你需要的信息——变量" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="zh"/><link rel="alternate" title="存儲你需要的資訊 - 變數" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="zh-Hant"/><link rel="alternate" title="Speichern der benötigten Informationen — Variablen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Variables" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptmerkmale auf hoher Ebene aussehen. In diesem Artikel gehen wir auf die wirklichen Grundlagen ein und betrachten, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Variables"/><meta property="og:title" content="Speichern der benötigten Informationen — Variablen - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptmerkmale auf hoher Ebene aussehen. In diesem Artikel gehen wir auf die wirklichen Grundlagen ein und betrachten, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Variables"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FVariables" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FVariables" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Kern-Lernmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Scripting" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Dynamisches Skripting mit JavaScript</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Scripting/Variables" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Speichern der benötigten Informationen — Variablen</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Scripting/Variables" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#benötigte_werkzeuge">Benötigte Werkzeuge</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_eine_variable">Was ist eine Variable?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#deklarieren_einer_variablen">Deklarieren einer Variablen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#initialisieren_einer_variablen">Initialisieren einer Variablen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_anmerkung_zu_var">Eine Anmerkung zu var</a></li><li class="document-toc-item "><a class="document-toc-link" href="#aktualisieren_einer_variablen">Aktualisieren einer Variablen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#variablentypen">Variablentypen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamische_typisierung">Dynamische Typisierung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#konstanten_in_javascript">Konstanten in JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wann_const_und_wann_let_verwenden">Wann <code>const</code> und wann <code>let</code> verwenden</a></li><li class="document-toc-item "><a class="document-toc-link" href="#testen_sie_ihre_fähigkeiten!">Testen Sie Ihre Fähigkeiten!</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><em><a href="/de/docs/Learn_web_development/Core/Scripting/Variables" aria-current="page">Speichern der benötigten Informationen — Variablen</a></em></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#benötigte_werkzeuge">Benötigte Werkzeuge</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_eine_variable">Was ist eine Variable?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#deklarieren_einer_variablen">Deklarieren einer Variablen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#initialisieren_einer_variablen">Initialisieren einer Variablen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_anmerkung_zu_var">Eine Anmerkung zu var</a></li><li class="document-toc-item "><a class="document-toc-link" href="#aktualisieren_einer_variablen">Aktualisieren einer Variablen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#variablentypen">Variablentypen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamische_typisierung">Dynamische Typisierung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#konstanten_in_javascript">Konstanten in JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wann_const_und_wann_let_verwenden">Wann <code>const</code> und wann <code>let</code> verwenden</a></li><li class="document-toc-item "><a class="document-toc-link" href="#testen_sie_ihre_fähigkeiten!">Testen Sie Ihre Fähigkeiten!</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>Speichern der benötigten Informationen — Variablen</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/Math"><span class="button-wrap"> Weiter </span></a></li></ul> <p>Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptmerkmale auf hoher Ebene aussehen. In diesem Artikel gehen wir auf die wirklichen Grundlagen ein und betrachten, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td>Ein Verständnis von <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a> und den <a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen von CSS</a>.</td> </tr> <tr> <th scope="row">Lernergebnisse:</th> <td> <ul> <li>Was Variablen sind und warum sie so wichtig sind.</li> <li>Deklaration von Variablen mit <code>let</code>, Initialisierung mit Werten und Zuweisung neuer Werte.</li> <li>Erstellen von Konstanten mit <code>const</code>.</li> <li>Der Unterschied zwischen Variablen und Konstanten und wann Sie welche verwenden sollten.</li> <li>Best Practices für die Benennung von Variablen.</li> <li>Die verschiedenen Arten von Werten, die in Variablen gespeichert werden können — Strings, Zahlen, Booleans, Arrays und Objekte.</li> </ul> </td> </tr> </tbody> </table></figure></div><section aria-labelledby="benötigte_werkzeuge"><h2 id="benötigte_werkzeuge"><a href="#benötigte_werkzeuge">Benötigte Werkzeuge</a></h2><div class="section-content"><p>Während dieses Artikels werden Sie aufgefordert, Codezeilen einzugeben, um Ihr Verständnis des Inhalts zu testen. Wenn Sie einen Desktop-Browser verwenden, ist der beste Ort dafür die JavaScript-Konsole Ihres Browsers (siehe <a href="/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools">Was sind Browser-Entwicklertools</a> für weitere Informationen, wie Sie auf dieses Tool zugreifen).</p></div></section><section aria-labelledby="was_ist_eine_variable"><h2 id="was_ist_eine_variable"><a href="#was_ist_eine_variable">Was ist eine Variable?</a></h2><div class="section-content"><p>Eine Variable ist ein Behälter für einen Wert, wie eine Zahl, die wir in einer Berechnung verwenden könnten, oder ein String, den wir als Teil eines Satzes verwenden könnten.</p></div></section><section aria-labelledby="beispiel_für_eine_variable"><h3 id="beispiel_für_eine_variable"><a href="#beispiel_für_eine_variable">Beispiel für eine Variable</a></h3><div class="section-content"><p>Schauen wir uns ein Beispiel an:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><button id="button_A">Press me</button> <h3 id="heading_A"></h3> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const buttonA = document.querySelector("#button_A"); const headingA = document.querySelector("#heading_A"); let count = 1; buttonA.onclick = () => { buttonA.textContent = "Try again!"; headingA.textContent = `${count} clicks so far`; count += 1; }; </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Variable example sample" id="frame_variable_example" width="100%" height="120" src="about:blank" data-live-path="/de/docs/Learn_web_development/Core/Scripting/Variables/" data-live-id="variable_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>In diesem Beispiel führt das Drücken des Buttons dazu, dass ein Code ausgeführt wird. Erstens wird der Text auf dem Button selbst geändert. Zweitens zeigt es eine Nachricht, wie oft der Button gedrückt wurde. Die Zahl wird in einer Variablen gespeichert. Jedes Mal, wenn der Benutzer den Button drückt, wird die Zahl in der Variablen um eins erhöht.</p></div></section><section aria-labelledby="ohne_eine_variable"><h3 id="ohne_eine_variable"><a href="#ohne_eine_variable">Ohne eine Variable</a></h3><div class="section-content"><p>Um zu verstehen, warum dies so nützlich ist, überlegen wir, wie wir dieses Beispiel schreiben würden, ohne eine Variable zu verwenden, um den Zähler zu speichern. Es würde am Ende ungefähr so aussehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html example-bad notranslate"><code><button id="button_B">Press me</button> <h3 id="heading_B"></h3> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const buttonB = document.querySelector("#button_B"); const headingB = document.querySelector("#heading_B"); buttonB.onclick = () => { buttonB.textContent = "Try again!"; headingB.textContent = "1 click so far"; }; </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Without a variable sample" id="frame_without_a_variable" width="100%" height="120" src="about:blank" data-live-path="/de/docs/Learn_web_development/Core/Scripting/Variables/" data-live-id="without_a_variable" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Sie verstehen möglicherweise (noch) nicht vollständig die Syntax, die wir verwenden, aber Sie sollten die Idee nachvollziehen können. Ohne eine Variable haben wir keine Möglichkeit zu wissen, wie oft der Button geklickt wurde. Die Nachricht an den Benutzer wird schnell irrelevant, wenn keine Information gemerkt werden kann.</p> <p>Variablen ergeben einfach Sinn, und wenn Sie mehr über JavaScript lernen, werden sie Ihnen in Fleisch und Blut übergehen.</p> <p>Eine besondere Sache an Variablen ist, dass sie fast alles enthalten können — nicht nur Strings und Zahlen. Variablen können auch komplexe Daten und sogar ganze Funktionen enthalten, um erstaunliche Dinge zu tun. Sie werden mehr darüber lernen, wenn Sie weiter vorankommen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wir sagen, Variablen enthalten Werte. Dies ist ein wichtiger Unterschied. Variablen sind nicht die Werte selbst; sie sind Behälter für Werte. Sie können sich diese wie kleine Pappschachteln vorstellen, in die Sie Dinge legen können.</p> </div> <p><img src="/de/docs/Learn_web_development/Core/Scripting/Variables/boxes.png" alt="Ein Screenshot von drei 3D-Pappschachteln, die Beispiele für JavaScript-Variablen demonstrieren. Jede Schachtel enthält hypothetische Werte, die verschiedene JavaScript-Datentypen darstellen. Die Beispielwerte sind "Bob", true und 35." width="1052" height="436" loading="lazy"></p></div></section><section aria-labelledby="deklarieren_einer_variablen"><h2 id="deklarieren_einer_variablen"><a href="#deklarieren_einer_variablen">Deklarieren einer Variablen</a></h2><div class="section-content"><p>Um eine Variable zu verwenden, müssen Sie sie zuerst erstellen — genauer gesagt, nennen wir dies das Deklarieren der Variablen. Dazu geben wir das Schlüsselwort <code>let</code> gefolgt von dem Namen ein, den Sie Ihrer Variablen geben möchten:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myName; let myAge; </code></pre></div> <p>Hier erstellen wir zwei Variablen namens <code>myName</code> und <code>myAge</code>. Versuchen Sie, diese Zeilen in die Konsole Ihres Webbrowsers einzugeben. Danach versuchen Sie, eine (oder zwei) Variable(n) mit Ihren eigenen Namenswahlen zu erstellen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> In JavaScript sollten alle Codeanweisungen mit einem Semikolon (<code>;</code>) enden — Ihr Code könnte für einzelne Zeilen korrekt funktionieren, aber wahrscheinlich nicht, wenn Sie mehrere Codezeilen zusammen schreiben. Versuchen Sie, sich anzugewöhnen, es einzuschließen.</p> </div> <p>Sie können testen, ob diese Werte jetzt in der Ausführungsumgebung vorhanden sind, indem Sie einfach den Namen der Variablen eingeben, z.B.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName; myAge; </code></pre></div> <p>Sie haben derzeit keinen Wert; sie sind leere Behälter. Wenn Sie die Variablennamen eingeben, sollten Sie einen Wert von <code>undefined</code> zurückbekommen. Wenn sie nicht existieren, erhalten Sie eine Fehlermeldung — versuchen Sie es, indem Sie</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>scoobyDoo; </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Verwechseln Sie nicht eine Variable, die existiert, aber keinen definierten Wert hat, mit einer Variable, die überhaupt nicht existiert — das sind sehr unterschiedliche Dinge. In der obigen Analogie mit den Boxen würde nicht existieren bedeuten, dass es keine Box (Variable) für einen Wert gibt. Kein definierter Wert würde bedeuten, dass es eine Box gibt, aber sie hat keinen Wert darin.</p> </div></div></section><section aria-labelledby="initialisieren_einer_variablen"><h2 id="initialisieren_einer_variablen"><a href="#initialisieren_einer_variablen">Initialisieren einer Variablen</a></h2><div class="section-content"><p>Sobald Sie eine Variable deklariert haben, können Sie ihr einen Wert zuweisen. Dies tun Sie, indem Sie den Variablennamen eingeben, gefolgt von einem Gleichheitszeichen (<code>=</code>), gefolgt von dem Wert, den Sie ihr geben möchten. Beispielsweise:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName = "Chris"; myAge = 37; </code></pre></div> <p>Versuchen Sie, jetzt zurück zur Konsole zu gehen und diese Zeilen einzugeben. Sie sollten in der Konsole in jedem Fall den Wert sehen, den Sie der Variablen zugewiesen haben. Sie können wieder Ihre Variablenwerte zurückgeben, indem Sie ihren Namen in die Konsole eingeben — versuchen Sie dies erneut:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName; myAge; </code></pre></div> <p>Sie können eine Variable gleichzeitig deklarieren und initialisieren, so:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myDog = "Rover"; </code></pre></div> <p>Dies ist wahrscheinlich das, was Sie die meiste Zeit tun werden, da es schneller ist, als die beiden Aktionen in zwei separaten Zeilen zu machen.</p></div></section><section aria-labelledby="eine_anmerkung_zu_var"><h2 id="eine_anmerkung_zu_var"><a href="#eine_anmerkung_zu_var">Eine Anmerkung zu var</a></h2><div class="section-content"><p>Sie werden wahrscheinlich auch eine andere Möglichkeit sehen, Variablen zu deklarieren, indem Sie das Schlüsselwort <code>var</code> verwenden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>var myName; var myAge; </code></pre></div> <p>Als JavaScript erstmals entwickelt wurde, war dies der einzige Weg, um Variablen zu deklarieren. Das Design von <code>var</code> ist verwirrend und fehleranfällig. Daher wurde in modernen Versionen von JavaScript <code>let</code> eingeführt, ein neues Schlüsselwort zur Erstellung von Variablen, das etwas anders funktioniert als <code>var</code> und dabei seine Probleme behebt.</p> <p>Ein paar einfache Unterschiede werden unten erklärt. Wir werden jetzt nicht auf alle Unterschiede eingehen, aber Sie werden sie anfangen zu entdecken, während Sie mehr über JavaScript lernen (wenn Sie wirklich jetzt darüber lesen möchten, können Sie gerne unsere <a href="/de/docs/Web/JavaScript/Reference/Statements/let">Referenzseite zu let</a> ansehen).</p> <p>Für den Anfang, wenn Sie ein mehrzeiliges JavaScript-Programm schreiben, das eine Variable deklariert und initialisiert, können Sie tatsächlich eine Variable mit <code>var</code> deklarieren, nachdem Sie sie initialisiert haben, und es wird trotzdem funktionieren. Beispielsweise:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName = "Chris"; function logName() { console.log(myName); } logName(); var myName; </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Dies funktioniert nicht, wenn Sie einzelne Zeilen in eine JavaScript-Konsole eingeben, sondern nur, wenn Sie mehrere Zeilen JavaScript in einem Web-Dokument ausführen.</p> </div> <p>Dies funktioniert aufgrund von <strong>Hoisting</strong> — lesen Sie <a href="/de/docs/Web/JavaScript/Reference/Statements/var#hoisting">var hoisting</a> für mehr Details zum Thema.</p> <p>Hoisting funktioniert nicht mehr mit <code>let</code>. Wenn wir im obigen Beispiel <code>var</code> durch <code>let</code> ersetzen würden, würde es mit einem Fehler fehlschlagen. Das ist eine gute Sache — indem man eine Variable deklariert, nachdem man sie initialisiert hat, führt das zu verwirrendem, schwerer verständlichem Code.</p> <p>Zweitens, wenn Sie <code>var</code> verwenden, können Sie dieselbe Variable so oft deklarieren, wie Sie möchten, aber mit <code>let</code> können Sie es nicht. Folgendes würde funktionieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>var myName = "Chris"; var myName = "Bob"; </code></pre></div> <p>Aber das Folgende würde bei der zweiten Zeile einen Fehler verursachen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>let myName = "Chris"; let myName = "Bob"; </code></pre></div> <p>Sie müssten stattdessen dies tun:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myName = "Chris"; myName = "Bob"; </code></pre></div> <p>Auch dies ist eine vernünftige Entscheidung der Sprache. Es gibt keinen Grund, Variablen erneut zu deklarieren — es macht die Dinge nur verwirrender.</p> <p>Aus diesen und anderen Gründen empfehlen wir, <code>let</code> in Ihrem Code zu verwenden, anstatt <code>var</code>. Es sei denn, Sie schreiben explizit Unterstützung für alte Browser, gibt es keinen Grund mehr, <code>var</code> zu verwenden, da alle modernen Browser seit 2015 <code>let</code> unterstützen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie diesen Code in der Konsole Ihres Browsers ausprobieren, bevorzugen Sie das Kopieren und Einfügen jedes Codeblocks hier als Ganzes. Es gibt eine <a href="https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9" class="external" target="_blank">Funktion in der Chrome-Konsole</a>, bei der Variablendeklarationen mit <code>let</code> und <code>const</code> erlaubt sind:</p> <pre class="brush: plain notranslate">> let myName = "Chris"; let myName = "Bob"; // Als eine Eingabe: SyntaxError: Identifier 'myName' has already been declared > let myName = "Chris"; > let myName = "Bob"; // Als zwei Eingaben: beide erfolgreich </pre> </div></div></section><section aria-labelledby="aktualisieren_einer_variablen"><h2 id="aktualisieren_einer_variablen"><a href="#aktualisieren_einer_variablen">Aktualisieren einer Variablen</a></h2><div class="section-content"><p>Sobald eine Variable mit einem Wert initialisiert wurde, können Sie diesen Wert durch Zuweisung eines anderen Wertes ändern (oder aktualisieren). Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName = "Bob"; myAge = 40; </code></pre></div></div></section><section aria-labelledby="eine_randbemerkung_zu_variablennamensregeln"><h3 id="eine_randbemerkung_zu_variablennamensregeln"><a href="#eine_randbemerkung_zu_variablennamensregeln">Eine Randbemerkung zu Variablennamensregeln</a></h3><div class="section-content"><p>Sie können eine Variable fast nennen, wie Sie möchten, aber es gibt Einschränkungen. Allgemein sollten Sie nur lateinische Zeichen (0-9, a-z, A-Z) und den Unterstrich verwenden.</p> <ul> <li>Sie sollten keine anderen Zeichen verwenden, da sie Fehler verursachen oder für ein internationales Publikum schwer verständlich sein könnten.</li> <li>Verwenden Sie keine Unterstriche am Anfang von Variablennamen — das wird in bestimmten JavaScript-Konstrukten verwendet, um bestimmte Dinge zu bedeuten und könnte verwirrend werden.</li> <li>Verwenden Sie keine Zahlen am Anfang von Variablen. Das ist nicht erlaubt und verursacht einen Fehler.</li> <li>Eine sichere Konvention ist <a href="/de/docs/Glossary/Camel_case">lower camel case</a>, bei der Sie mehrere Wörter miteinander verbinden, wobei das ganze erste Wort klein geschrieben ist und die nachfolgenden Wörter groß geschrieben werden. Wir haben dies bisher für unsere Variablennamen im Artikel verwendet.</li> <li>Machen Sie Variablennamen intuitiv, sodass sie die enthaltenen Daten beschreiben. Verwenden Sie keine einzelnen Buchstaben/Zahlen oder lange Phrasen.</li> <li>Variablen sind case-sensitiv — also ist <code>myage</code> eine andere Variable als <code>myAge</code>.</li> <li>Ein letzter Punkt: Sie müssen auch vermeiden, JavaScript reservierte Wörter als Variablennamen zu verwenden — damit meinen wir die Wörter, die die tatsächliche Syntax von JavaScript ausmachen! Sie können also keine Wörter wie <code>var</code>, <code>function</code>, <code>let</code> und <code>for</code> als Variablennamen verwenden. Browser erkennen sie als verschiedene Codeelemente, und daher werden Sie Fehler bekommen.</li> </ul> <div class="notecard note"> <p><strong>Hinweis:</strong> Eine ziemlich vollständige Liste von reservierten Schlüsselwörtern, die vermieden werden sollten, finden Sie unter <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">Lexikalische Grammatik — Schlüsselwörter</a>.</p> </div> <p>Gute Namensbeispiele:</p> <pre class="brush: plain example-good notranslate">age myAge init initialColor finalOutputValue audio1 audio2 </pre> <p>Schlechte Namensbeispiele:</p> <pre class="brush: plain example-bad notranslate">1 a _12 myage MYAGE var Document skjfndskjfnbdskjfb thisisareallylongvariablenameman </pre> <p>Versuchen Sie jetzt, einige weitere Variablen mit den oben genannten Hinweisen zu erstellen.</p></div></section><section aria-labelledby="variablentypen"><h2 id="variablentypen"><a href="#variablentypen">Variablentypen</a></h2><div class="section-content"><p>Es gibt einige verschiedene Datentypen, die wir in Variablen speichern können. In diesem Abschnitt beschreiben wir diese kurz; in zukünftigen Artikeln werden Sie mehr darüber im Detail lernen.</p></div></section><section aria-labelledby="zahlen"><h3 id="zahlen"><a href="#zahlen">Zahlen</a></h3><div class="section-content"><p>Sie können Zahlen in Variablen speichern, entweder ganze Zahlen wie 30 (auch als Integer bezeichnet) oder Dezimalzahlen wie 2.456 (auch als Fließkommazahlen oder Floats bezeichnet). Sie müssen keine Variablentypen in JavaScript deklarieren, im Gegensatz zu einigen anderen Programmiersprachen. Wenn Sie einer Variablen einen Zahlenwert zuweisen, schließen Sie keine Anführungszeichen ein:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myAge = 17; </code></pre></div></div></section><section aria-labelledby="strings"><h3 id="strings"><a href="#strings">Strings</a></h3><div class="section-content"><p>Strings sind Textstücke. Wenn Sie einer Variablen einen Stringwert zuweisen, müssen Sie ihn in einfache oder doppelte Anführungszeichen setzen; ansonsten versucht JavaScript, es als anderen Variablennamen zu interpretieren.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let dolphinGoodbye = "So long and thanks for all the fish"; </code></pre></div></div></section><section aria-labelledby="booleans"><h3 id="booleans"><a href="#booleans">Booleans</a></h3><div class="section-content"><p>Booleans sind true/false-Werte — sie können zwei Werte haben, <code>true</code> oder <code>false</code>. Diese werden im Allgemeinen verwendet, um eine Bedingung zu testen, nach der der Code entsprechend ausgeführt wird. Ein einfacher Fall könnte also sein:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let iAmAlive = true; </code></pre></div> <p>In Wirklichkeit würde es jedoch eher so verwendet werden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let test = 6 < 3; </code></pre></div> <p>Dies verwendet den "Kleiner als"-Operator (<code><</code>), um zu testen, ob 6 kleiner als 3 ist. Wie Sie vielleicht erwarten, gibt dies <code>false</code> zurück, da 6 nicht kleiner als 3 ist! Sie werden später im Kurs viel mehr über solche Operatoren lernen.</p></div></section><section aria-labelledby="arrays"><h3 id="arrays"><a href="#arrays">Arrays</a></h3><div class="section-content"><p>Ein Array ist ein einzelnes Objekt, das mehrere Werte enthält, die in eckige Klammern eingeschlossen und durch Kommas getrennt sind. Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myNameArray = ["Chris", "Bob", "Jim"]; let myNumberArray = [10, 15, 40]; </code></pre></div> <p>Sobald diese Arrays definiert sind, können Sie auf jeden Wert an ihrer Position im Array zugreifen. Versuchen Sie diese Zeilen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myNameArray[0]; // should return 'Chris' myNumberArray[2]; // should return 40 </code></pre></div> <p>Die eckigen Klammern geben einen Indexwert an, der der Position des Wertes entspricht, den Sie zurückgegeben bekommen möchten. Sie haben möglicherweise bemerkt, dass Arrays in JavaScript nullbasiert sind: Das erste Element befindet sich an Index 0.</p></div></section><section aria-labelledby="objekte"><h3 id="objekte"><a href="#objekte">Objekte</a></h3><div class="section-content"><p>In der Programmierung ist ein Objekt eine Struktur aus Code, die ein echtes Objekt modelliert. Sie können ein Objekt haben, das eine Box darstellt und Informationen über ihre Breite, Länge und Höhe enthält, oder Sie könnten ein Objekt haben, das eine Person darstellt und Daten über ihren Namen, ihre Größe, ihr Gewicht, welche Sprache sie sprechen, wie man sie begrüßt und mehr enthält.</p> <p>Versuchen Sie, die folgende Zeile in Ihre Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let dog = { name: "Spot", breed: "Dalmatian" }; </code></pre></div> <p>Um die im Objekt gespeicherten Informationen abzurufen, können Sie die folgende Syntax verwenden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>dog.name; </code></pre></div></div></section><section aria-labelledby="dynamische_typisierung"><h2 id="dynamische_typisierung"><a href="#dynamische_typisierung">Dynamische Typisierung</a></h2><div class="section-content"><p>JavaScript ist eine "dynamisch typisierte Sprache", was bedeutet, dass Sie im Gegensatz zu einigen anderen Sprachen nicht festlegen müssen, welchen Datentyp eine Variable enthalten wird (Zahlen, Strings, Arrays usw.).</p> <p>Wenn Sie zum Beispiel eine Variable deklarieren und ihr einen Wert in Anführungszeichen geben, behandelt der Browser die Variable als String:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myString = "Hello"; </code></pre></div> <p>Selbst wenn der in Anführungszeichen eingeschlossene Wert nur Ziffern sind, ist es immer noch ein String — keine Zahl — also seien Sie vorsichtig:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myNumber = "500"; // oops, this is still a string typeof myNumber; myNumber = 500; // much better — now this is a number typeof myNumber; </code></pre></div> <p>Versuchen Sie, die vier obigen Zeilen nacheinander in Ihre Konsole einzugeben und sehen Sie, welche Ergebnisse Sie erhalten. Ihnen wird auffallen, dass wir einen speziellen Operator namens <a href="/de/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a> verwenden — dieser gibt den Datentyp der Variablen zurück, die Sie danach eingeben. Das erste Mal, dass er aufgerufen wird, sollte er <code>string</code> zurückgeben, da zu diesem Zeitpunkt die Variable <code>myNumber</code> einen String, <code>'500'</code>, enthält. Schauen Sie, was er das zweite Mal zurückgibt, wenn Sie ihn aufrufen.</p></div></section><section aria-labelledby="konstanten_in_javascript"><h2 id="konstanten_in_javascript"><a href="#konstanten_in_javascript">Konstanten in JavaScript</a></h2><div class="section-content"><p>Neben Variablen können Sie Konstanten deklarieren. Diese sind wie Variablen, außer dass:</p> <ul> <li>Sie sie beim Deklarieren initialisieren müssen</li> <li>Sie ihnen nach der Initialisierung keinen neuen Wert zuweisen können.</li> </ul> <p>Zum Beispiel können Sie mit <code>let</code> eine Variable ohne Initialisierung deklarieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let count; </code></pre></div> <p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, werden Sie einen Fehler sehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const count; </code></pre></div> <p>Ebenso können Sie mit <code>let</code> eine Variable initialisieren und ihr dann einen neuen Wert zuweisen (dies wird auch <em>Umzuweisung</em> der Variablen genannt):</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let count = 1; count = 2; </code></pre></div> <p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, werden Sie einen Fehler sehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const count = 1; count = 2; </code></pre></div> <p>Beachten Sie, dass, obwohl eine Konstante in JavaScript immer denselben Wert benennen muss, Sie den Inhalt des Wertes ändern können, den sie benennt. Dies ist kein nützlicher Unterschied für einfache Typen wie Zahlen oder Booleans, aber betrachten Sie ein Objekt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const bird = { species: "Kestrel" }; console.log(bird.species); // "Kestrel" </code></pre></div> <p>Sie können die Eigenschaften eines Objekts, das mit <code>const</code> deklariert wurde, aktualisieren, hinzufügen oder entfernen, da die Konstante immer noch auf dasselbe Objekt verweist, obwohl sich der Inhalt des Objekts geändert hat:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>bird.species = "Striated Caracara"; console.log(bird.species); // "Striated Caracara" </code></pre></div></div></section><section aria-labelledby="wann_const_und_wann_let_verwenden"><h2 id="wann_const_und_wann_let_verwenden"><a href="#wann_const_und_wann_let_verwenden">Wann <code>const</code> und wann <code>let</code> verwenden</a></h2><div class="section-content"><p>Wenn Sie mit <code>const</code> nicht so viel machen können wie mit <code>let</code>, warum sollten Sie dann lieber <code>const</code> anstelle von <code>let</code> verwenden? Tatsächlich ist <code>const</code> sehr nützlich. Wenn Sie <code>const</code> verwenden, um einen Wert zu benennen, sagt es jedem, der Ihren Code ansieht, dass dieser Name niemals einem anderen Wert zugewiesen wird. Jedes Mal, wenn sie diesen Namen sehen, werden sie wissen, worauf er sich bezieht.</p> <p>In diesem Kurs verwenden wir folgendes Prinzip darüber, wann man <code>let</code> und wann <code>const</code> verwendet:</p> <p><em>Verwenden Sie <code>const</code>, wenn Sie können, und <code>let</code>, wenn Sie müssen.</em></p> <p>Das bedeutet, dass, wenn Sie eine Variable beim Deklarieren initialisieren können und sie später nicht erneut zuweisen müssen, machen Sie sie zu einer Konstante.</p></div></section><section aria-labelledby="testen_sie_ihre_fähigkeiten!"><h2 id="testen_sie_ihre_fähigkeiten!"><a href="#testen_sie_ihre_fähigkeiten!">Testen Sie Ihre Fähigkeiten!</a></h2><div class="section-content"><p>Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe <a href="/de/docs/Learn_web_development/Core/Scripting/Test_your_skills:_variables">Testen Sie Ihre Fähigkeiten: Variablen</a>.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Bis jetzt sollten Sie ein gutes Verständnis von JavaScript-Variablen und deren Erstellung haben. Im nächsten Artikel konzentrieren wir uns detaillierter auf Zahlen und darauf, wie man in JavaScript grundlegende Mathematik betreibt.</p> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/Math"><span class="button-wrap"> Weiter </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/scripting/variables/index.md?plain=1" title="Folder: de/learn_web_development/core/scripting/variables (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FVariables&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn_web_development%2Fcore%2Fscripting%2Fvariables%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FVariables%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fcore%2Fscripting%2Fvariables%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn_web_development/Core/Scripting/Variables","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/Math\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>\n<p>Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptmerkmale auf hoher Ebene aussehen. In diesem Artikel gehen wir auf die wirklichen Grundlagen ein und betrachten, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>Ein Verständnis von <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">HTML</a> und den <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen von CSS</a>.</td>\n </tr>\n <tr>\n <th scope=\"row\">Lernergebnisse:</th>\n <td>\n <ul>\n <li>Was Variablen sind und warum sie so wichtig sind.</li>\n <li>Deklaration von Variablen mit <code>let</code>, Initialisierung mit Werten und Zuweisung neuer Werte.</li>\n <li>Erstellen von Konstanten mit <code>const</code>.</li>\n <li>Der Unterschied zwischen Variablen und Konstanten und wann Sie welche verwenden sollten.</li>\n <li>Best Practices für die Benennung von Variablen.</li>\n <li>Die verschiedenen Arten von Werten, die in Variablen gespeichert werden können — Strings, Zahlen, Booleans, Arrays und Objekte.</li>\n </ul>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"benötigte_werkzeuge","title":"Benötigte Werkzeuge","isH3":false,"content":"<p>Während dieses Artikels werden Sie aufgefordert, Codezeilen einzugeben, um Ihr Verständnis des Inhalts zu testen. Wenn Sie einen Desktop-Browser verwenden, ist der beste Ort dafür die JavaScript-Konsole Ihres Browsers (siehe <a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools\">Was sind Browser-Entwicklertools</a> für weitere Informationen, wie Sie auf dieses Tool zugreifen).</p>"}},{"type":"prose","value":{"id":"was_ist_eine_variable","title":"Was ist eine Variable?","isH3":false,"content":"<p>Eine Variable ist ein Behälter für einen Wert, wie eine Zahl, die wir in einer Berechnung verwenden könnten, oder ein String, den wir als Teil eines Satzes verwenden könnten.</p>"}},{"type":"prose","value":{"id":"beispiel_für_eine_variable","title":"Beispiel für eine Variable","isH3":true,"content":"<p>Schauen wir uns ein Beispiel an:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><button id=\"button_A\">Press me</button>\n<h3 id=\"heading_A\"></h3>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const buttonA = document.querySelector(\"#button_A\");\nconst headingA = document.querySelector(\"#heading_A\");\n\nlet count = 1;\n\nbuttonA.onclick = () => {\n buttonA.textContent = \"Try again!\";\n headingA.textContent = `${count} clicks so far`;\n count += 1;\n};\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Variable example sample\" id=\"frame_variable_example\" width=\"100%\" height=\"120\" src=\"about:blank\" data-live-path=\"/de/docs/Learn_web_development/Core/Scripting/Variables/\" data-live-id=\"variable_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>In diesem Beispiel führt das Drücken des Buttons dazu, dass ein Code ausgeführt wird. Erstens wird der Text auf dem Button selbst geändert. Zweitens zeigt es eine Nachricht, wie oft der Button gedrückt wurde. Die Zahl wird in einer Variablen gespeichert. Jedes Mal, wenn der Benutzer den Button drückt, wird die Zahl in der Variablen um eins erhöht.</p>"}},{"type":"prose","value":{"id":"ohne_eine_variable","title":"Ohne eine Variable","isH3":true,"content":"<p>Um zu verstehen, warum dies so nützlich ist, überlegen wir, wie wir dieses Beispiel schreiben würden, ohne eine Variable zu verwenden, um den Zähler zu speichern. Es würde am Ende ungefähr so aussehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><button id=\"button_B\">Press me</button>\n<h3 id=\"heading_B\"></h3>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const buttonB = document.querySelector(\"#button_B\");\nconst headingB = document.querySelector(\"#heading_B\");\n\nbuttonB.onclick = () => {\n buttonB.textContent = \"Try again!\";\n headingB.textContent = \"1 click so far\";\n};\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Without a variable sample\" id=\"frame_without_a_variable\" width=\"100%\" height=\"120\" src=\"about:blank\" data-live-path=\"/de/docs/Learn_web_development/Core/Scripting/Variables/\" data-live-id=\"without_a_variable\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Sie verstehen möglicherweise (noch) nicht vollständig die Syntax, die wir verwenden, aber Sie sollten die Idee nachvollziehen können. Ohne eine Variable haben wir keine Möglichkeit zu wissen, wie oft der Button geklickt wurde. Die Nachricht an den Benutzer wird schnell irrelevant, wenn keine Information gemerkt werden kann.</p>\n<p>Variablen ergeben einfach Sinn, und wenn Sie mehr über JavaScript lernen, werden sie Ihnen in Fleisch und Blut übergehen.</p>\n<p>Eine besondere Sache an Variablen ist, dass sie fast alles enthalten können — nicht nur Strings und Zahlen. Variablen können auch komplexe Daten und sogar ganze Funktionen enthalten, um erstaunliche Dinge zu tun. Sie werden mehr darüber lernen, wenn Sie weiter vorankommen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWir sagen, Variablen enthalten Werte. Dies ist ein wichtiger Unterschied. Variablen sind nicht die Werte selbst; sie sind Behälter für Werte. Sie können sich diese wie kleine Pappschachteln vorstellen, in die Sie Dinge legen können.</p>\n</div>\n<p><img src=\"/de/docs/Learn_web_development/Core/Scripting/Variables/boxes.png\" alt=\"Ein Screenshot von drei 3D-Pappschachteln, die Beispiele für JavaScript-Variablen demonstrieren. Jede Schachtel enthält hypothetische Werte, die verschiedene JavaScript-Datentypen darstellen. Die Beispielwerte sind "Bob", true und 35.\" width=\"1052\" height=\"436\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"deklarieren_einer_variablen","title":"Deklarieren einer Variablen","isH3":false,"content":"<p>Um eine Variable zu verwenden, müssen Sie sie zuerst erstellen — genauer gesagt, nennen wir dies das Deklarieren der Variablen. Dazu geben wir das Schlüsselwort <code>let</code> gefolgt von dem Namen ein, den Sie Ihrer Variablen geben möchten:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myName;\nlet myAge;\n</code></pre></div>\n<p>Hier erstellen wir zwei Variablen namens <code>myName</code> und <code>myAge</code>. Versuchen Sie, diese Zeilen in die Konsole Ihres Webbrowsers einzugeben. Danach versuchen Sie, eine (oder zwei) Variable(n) mit Ihren eigenen Namenswahlen zu erstellen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nIn JavaScript sollten alle Codeanweisungen mit einem Semikolon (<code>;</code>) enden — Ihr Code könnte für einzelne Zeilen korrekt funktionieren, aber wahrscheinlich nicht, wenn Sie mehrere Codezeilen zusammen schreiben. Versuchen Sie, sich anzugewöhnen, es einzuschließen.</p>\n</div>\n<p>Sie können testen, ob diese Werte jetzt in der Ausführungsumgebung vorhanden sind, indem Sie einfach den Namen der Variablen eingeben, z.B.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName;\nmyAge;\n</code></pre></div>\n<p>Sie haben derzeit keinen Wert; sie sind leere Behälter. Wenn Sie die Variablennamen eingeben, sollten Sie einen Wert von <code>undefined</code> zurückbekommen. Wenn sie nicht existieren, erhalten Sie eine Fehlermeldung — versuchen Sie es, indem Sie</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>scoobyDoo;\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nVerwechseln Sie nicht eine Variable, die existiert, aber keinen definierten Wert hat, mit einer Variable, die überhaupt nicht existiert — das sind sehr unterschiedliche Dinge. In der obigen Analogie mit den Boxen würde nicht existieren bedeuten, dass es keine Box (Variable) für einen Wert gibt. Kein definierter Wert würde bedeuten, dass es eine Box gibt, aber sie hat keinen Wert darin.</p>\n</div>"}},{"type":"prose","value":{"id":"initialisieren_einer_variablen","title":"Initialisieren einer Variablen","isH3":false,"content":"<p>Sobald Sie eine Variable deklariert haben, können Sie ihr einen Wert zuweisen. Dies tun Sie, indem Sie den Variablennamen eingeben, gefolgt von einem Gleichheitszeichen (<code>=</code>), gefolgt von dem Wert, den Sie ihr geben möchten. Beispielsweise:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName = \"Chris\";\nmyAge = 37;\n</code></pre></div>\n<p>Versuchen Sie, jetzt zurück zur Konsole zu gehen und diese Zeilen einzugeben. Sie sollten in der Konsole in jedem Fall den Wert sehen, den Sie der Variablen zugewiesen haben. Sie können wieder Ihre Variablenwerte zurückgeben, indem Sie ihren Namen in die Konsole eingeben — versuchen Sie dies erneut:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName;\nmyAge;\n</code></pre></div>\n<p>Sie können eine Variable gleichzeitig deklarieren und initialisieren, so:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myDog = \"Rover\";\n</code></pre></div>\n<p>Dies ist wahrscheinlich das, was Sie die meiste Zeit tun werden, da es schneller ist, als die beiden Aktionen in zwei separaten Zeilen zu machen.</p>"}},{"type":"prose","value":{"id":"eine_anmerkung_zu_var","title":"Eine Anmerkung zu var","isH3":false,"content":"<p>Sie werden wahrscheinlich auch eine andere Möglichkeit sehen, Variablen zu deklarieren, indem Sie das Schlüsselwort <code>var</code> verwenden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>var myName;\nvar myAge;\n</code></pre></div>\n<p>Als JavaScript erstmals entwickelt wurde, war dies der einzige Weg, um Variablen zu deklarieren. Das Design von <code>var</code> ist verwirrend und fehleranfällig. Daher wurde in modernen Versionen von JavaScript <code>let</code> eingeführt, ein neues Schlüsselwort zur Erstellung von Variablen, das etwas anders funktioniert als <code>var</code> und dabei seine Probleme behebt.</p>\n<p>Ein paar einfache Unterschiede werden unten erklärt. Wir werden jetzt nicht auf alle Unterschiede eingehen, aber Sie werden sie anfangen zu entdecken, während Sie mehr über JavaScript lernen (wenn Sie wirklich jetzt darüber lesen möchten, können Sie gerne unsere <a href=\"/de/docs/Web/JavaScript/Reference/Statements/let\">Referenzseite zu let</a> ansehen).</p>\n<p>Für den Anfang, wenn Sie ein mehrzeiliges JavaScript-Programm schreiben, das eine Variable deklariert und initialisiert, können Sie tatsächlich eine Variable mit <code>var</code> deklarieren, nachdem Sie sie initialisiert haben, und es wird trotzdem funktionieren. Beispielsweise:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName = \"Chris\";\n\nfunction logName() {\n console.log(myName);\n}\n\nlogName();\n\nvar myName;\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDies funktioniert nicht, wenn Sie einzelne Zeilen in eine JavaScript-Konsole eingeben, sondern nur, wenn Sie mehrere Zeilen JavaScript in einem Web-Dokument ausführen.</p>\n</div>\n<p>Dies funktioniert aufgrund von <strong>Hoisting</strong> — lesen Sie <a href=\"/de/docs/Web/JavaScript/Reference/Statements/var#hoisting\">var hoisting</a> für mehr Details zum Thema.</p>\n<p>Hoisting funktioniert nicht mehr mit <code>let</code>. Wenn wir im obigen Beispiel <code>var</code> durch <code>let</code> ersetzen würden, würde es mit einem Fehler fehlschlagen. Das ist eine gute Sache — indem man eine Variable deklariert, nachdem man sie initialisiert hat, führt das zu verwirrendem, schwerer verständlichem Code.</p>\n<p>Zweitens, wenn Sie <code>var</code> verwenden, können Sie dieselbe Variable so oft deklarieren, wie Sie möchten, aber mit <code>let</code> können Sie es nicht. Folgendes würde funktionieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>var myName = \"Chris\";\nvar myName = \"Bob\";\n</code></pre></div>\n<p>Aber das Folgende würde bei der zweiten Zeile einen Fehler verursachen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>let myName = \"Chris\";\nlet myName = \"Bob\";\n</code></pre></div>\n<p>Sie müssten stattdessen dies tun:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myName = \"Chris\";\nmyName = \"Bob\";\n</code></pre></div>\n<p>Auch dies ist eine vernünftige Entscheidung der Sprache. Es gibt keinen Grund, Variablen erneut zu deklarieren — es macht die Dinge nur verwirrender.</p>\n<p>Aus diesen und anderen Gründen empfehlen wir, <code>let</code> in Ihrem Code zu verwenden, anstatt <code>var</code>. Es sei denn, Sie schreiben explizit Unterstützung für alte Browser, gibt es keinen Grund mehr, <code>var</code> zu verwenden, da alle modernen Browser seit 2015 <code>let</code> unterstützen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie diesen Code in der Konsole Ihres Browsers ausprobieren, bevorzugen Sie das Kopieren und Einfügen jedes Codeblocks hier als Ganzes. Es gibt eine <a href=\"https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9\" class=\"external\" target=\"_blank\">Funktion in der Chrome-Konsole</a>, bei der Variablendeklarationen mit <code>let</code> und <code>const</code> erlaubt sind:</p>\n<pre class=\"brush: plain notranslate\">> let myName = \"Chris\";\n let myName = \"Bob\";\n// Als eine Eingabe: SyntaxError: Identifier 'myName' has already been declared\n\n> let myName = \"Chris\";\n> let myName = \"Bob\";\n// Als zwei Eingaben: beide erfolgreich\n</pre>\n</div>"}},{"type":"prose","value":{"id":"aktualisieren_einer_variablen","title":"Aktualisieren einer Variablen","isH3":false,"content":"<p>Sobald eine Variable mit einem Wert initialisiert wurde, können Sie diesen Wert durch Zuweisung eines anderen Wertes ändern (oder aktualisieren). Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName = \"Bob\";\nmyAge = 40;\n</code></pre></div>"}},{"type":"prose","value":{"id":"eine_randbemerkung_zu_variablennamensregeln","title":"Eine Randbemerkung zu Variablennamensregeln","isH3":true,"content":"<p>Sie können eine Variable fast nennen, wie Sie möchten, aber es gibt Einschränkungen. Allgemein sollten Sie nur lateinische Zeichen (0-9, a-z, A-Z) und den Unterstrich verwenden.</p>\n<ul>\n<li>Sie sollten keine anderen Zeichen verwenden, da sie Fehler verursachen oder für ein internationales Publikum schwer verständlich sein könnten.</li>\n<li>Verwenden Sie keine Unterstriche am Anfang von Variablennamen — das wird in bestimmten JavaScript-Konstrukten verwendet, um bestimmte Dinge zu bedeuten und könnte verwirrend werden.</li>\n<li>Verwenden Sie keine Zahlen am Anfang von Variablen. Das ist nicht erlaubt und verursacht einen Fehler.</li>\n<li>Eine sichere Konvention ist <a href=\"/de/docs/Glossary/Camel_case\">lower camel case</a>, bei der Sie mehrere Wörter miteinander verbinden, wobei das ganze erste Wort klein geschrieben ist und die nachfolgenden Wörter groß geschrieben werden. Wir haben dies bisher für unsere Variablennamen im Artikel verwendet.</li>\n<li>Machen Sie Variablennamen intuitiv, sodass sie die enthaltenen Daten beschreiben. Verwenden Sie keine einzelnen Buchstaben/Zahlen oder lange Phrasen.</li>\n<li>Variablen sind case-sensitiv — also ist <code>myage</code> eine andere Variable als <code>myAge</code>.</li>\n<li>Ein letzter Punkt: Sie müssen auch vermeiden, JavaScript reservierte Wörter als Variablennamen zu verwenden — damit meinen wir die Wörter, die die tatsächliche Syntax von JavaScript ausmachen! Sie können also keine Wörter wie <code>var</code>, <code>function</code>, <code>let</code> und <code>for</code> als Variablennamen verwenden. Browser erkennen sie als verschiedene Codeelemente, und daher werden Sie Fehler bekommen.</li>\n</ul>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEine ziemlich vollständige Liste von reservierten Schlüsselwörtern, die vermieden werden sollten, finden Sie unter <a href=\"/de/docs/Web/JavaScript/Reference/Lexical_grammar#keywords\">Lexikalische Grammatik — Schlüsselwörter</a>.</p>\n</div>\n<p>Gute Namensbeispiele:</p>\n<pre class=\"brush: plain example-good notranslate\">age\nmyAge\ninit\ninitialColor\nfinalOutputValue\naudio1\naudio2\n</pre>\n<p>Schlechte Namensbeispiele:</p>\n<pre class=\"brush: plain example-bad notranslate\">1\na\n_12\nmyage\nMYAGE\nvar\nDocument\nskjfndskjfnbdskjfb\nthisisareallylongvariablenameman\n</pre>\n<p>Versuchen Sie jetzt, einige weitere Variablen mit den oben genannten Hinweisen zu erstellen.</p>"}},{"type":"prose","value":{"id":"variablentypen","title":"Variablentypen","isH3":false,"content":"<p>Es gibt einige verschiedene Datentypen, die wir in Variablen speichern können. In diesem Abschnitt beschreiben wir diese kurz; in zukünftigen Artikeln werden Sie mehr darüber im Detail lernen.</p>"}},{"type":"prose","value":{"id":"zahlen","title":"Zahlen","isH3":true,"content":"<p>Sie können Zahlen in Variablen speichern, entweder ganze Zahlen wie 30 (auch als Integer bezeichnet) oder Dezimalzahlen wie 2.456 (auch als Fließkommazahlen oder Floats bezeichnet). Sie müssen keine Variablentypen in JavaScript deklarieren, im Gegensatz zu einigen anderen Programmiersprachen. Wenn Sie einer Variablen einen Zahlenwert zuweisen, schließen Sie keine Anführungszeichen ein:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myAge = 17;\n</code></pre></div>"}},{"type":"prose","value":{"id":"strings","title":"Strings","isH3":true,"content":"<p>Strings sind Textstücke. Wenn Sie einer Variablen einen Stringwert zuweisen, müssen Sie ihn in einfache oder doppelte Anführungszeichen setzen; ansonsten versucht JavaScript, es als anderen Variablennamen zu interpretieren.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let dolphinGoodbye = \"So long and thanks for all the fish\";\n</code></pre></div>"}},{"type":"prose","value":{"id":"booleans","title":"Booleans","isH3":true,"content":"<p>Booleans sind true/false-Werte — sie können zwei Werte haben, <code>true</code> oder <code>false</code>. Diese werden im Allgemeinen verwendet, um eine Bedingung zu testen, nach der der Code entsprechend ausgeführt wird. Ein einfacher Fall könnte also sein:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let iAmAlive = true;\n</code></pre></div>\n<p>In Wirklichkeit würde es jedoch eher so verwendet werden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let test = 6 < 3;\n</code></pre></div>\n<p>Dies verwendet den \"Kleiner als\"-Operator (<code><</code>), um zu testen, ob 6 kleiner als 3 ist. Wie Sie vielleicht erwarten, gibt dies <code>false</code> zurück, da 6 nicht kleiner als 3 ist! Sie werden später im Kurs viel mehr über solche Operatoren lernen.</p>"}},{"type":"prose","value":{"id":"arrays","title":"Arrays","isH3":true,"content":"<p>Ein Array ist ein einzelnes Objekt, das mehrere Werte enthält, die in eckige Klammern eingeschlossen und durch Kommas getrennt sind. Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myNameArray = [\"Chris\", \"Bob\", \"Jim\"];\nlet myNumberArray = [10, 15, 40];\n</code></pre></div>\n<p>Sobald diese Arrays definiert sind, können Sie auf jeden Wert an ihrer Position im Array zugreifen. Versuchen Sie diese Zeilen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myNameArray[0]; // should return 'Chris'\nmyNumberArray[2]; // should return 40\n</code></pre></div>\n<p>Die eckigen Klammern geben einen Indexwert an, der der Position des Wertes entspricht, den Sie zurückgegeben bekommen möchten. Sie haben möglicherweise bemerkt, dass Arrays in JavaScript nullbasiert sind: Das erste Element befindet sich an Index 0.</p>"}},{"type":"prose","value":{"id":"objekte","title":"Objekte","isH3":true,"content":"<p>In der Programmierung ist ein Objekt eine Struktur aus Code, die ein echtes Objekt modelliert. Sie können ein Objekt haben, das eine Box darstellt und Informationen über ihre Breite, Länge und Höhe enthält, oder Sie könnten ein Objekt haben, das eine Person darstellt und Daten über ihren Namen, ihre Größe, ihr Gewicht, welche Sprache sie sprechen, wie man sie begrüßt und mehr enthält.</p>\n<p>Versuchen Sie, die folgende Zeile in Ihre Konsole einzugeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let dog = { name: \"Spot\", breed: \"Dalmatian\" };\n</code></pre></div>\n<p>Um die im Objekt gespeicherten Informationen abzurufen, können Sie die folgende Syntax verwenden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>dog.name;\n</code></pre></div>"}},{"type":"prose","value":{"id":"dynamische_typisierung","title":"Dynamische Typisierung","isH3":false,"content":"<p>JavaScript ist eine \"dynamisch typisierte Sprache\", was bedeutet, dass Sie im Gegensatz zu einigen anderen Sprachen nicht festlegen müssen, welchen Datentyp eine Variable enthalten wird (Zahlen, Strings, Arrays usw.).</p>\n<p>Wenn Sie zum Beispiel eine Variable deklarieren und ihr einen Wert in Anführungszeichen geben, behandelt der Browser die Variable als String:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myString = \"Hello\";\n</code></pre></div>\n<p>Selbst wenn der in Anführungszeichen eingeschlossene Wert nur Ziffern sind, ist es immer noch ein String — keine Zahl — also seien Sie vorsichtig:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myNumber = \"500\"; // oops, this is still a string\ntypeof myNumber;\nmyNumber = 500; // much better — now this is a number\ntypeof myNumber;\n</code></pre></div>\n<p>Versuchen Sie, die vier obigen Zeilen nacheinander in Ihre Konsole einzugeben und sehen Sie, welche Ergebnisse Sie erhalten. Ihnen wird auffallen, dass wir einen speziellen Operator namens <a href=\"/de/docs/Web/JavaScript/Reference/Operators/typeof\"><code>typeof</code></a> verwenden — dieser gibt den Datentyp der Variablen zurück, die Sie danach eingeben. Das erste Mal, dass er aufgerufen wird, sollte er <code>string</code> zurückgeben, da zu diesem Zeitpunkt die Variable <code>myNumber</code> einen String, <code>'500'</code>, enthält. Schauen Sie, was er das zweite Mal zurückgibt, wenn Sie ihn aufrufen.</p>"}},{"type":"prose","value":{"id":"konstanten_in_javascript","title":"Konstanten in JavaScript","isH3":false,"content":"<p>Neben Variablen können Sie Konstanten deklarieren. Diese sind wie Variablen, außer dass:</p>\n<ul>\n<li>Sie sie beim Deklarieren initialisieren müssen</li>\n<li>Sie ihnen nach der Initialisierung keinen neuen Wert zuweisen können.</li>\n</ul>\n<p>Zum Beispiel können Sie mit <code>let</code> eine Variable ohne Initialisierung deklarieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let count;\n</code></pre></div>\n<p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, werden Sie einen Fehler sehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const count;\n</code></pre></div>\n<p>Ebenso können Sie mit <code>let</code> eine Variable initialisieren und ihr dann einen neuen Wert zuweisen (dies wird auch <em>Umzuweisung</em> der Variablen genannt):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let count = 1;\ncount = 2;\n</code></pre></div>\n<p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, werden Sie einen Fehler sehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const count = 1;\ncount = 2;\n</code></pre></div>\n<p>Beachten Sie, dass, obwohl eine Konstante in JavaScript immer denselben Wert benennen muss, Sie den Inhalt des Wertes ändern können, den sie benennt. Dies ist kein nützlicher Unterschied für einfache Typen wie Zahlen oder Booleans, aber betrachten Sie ein Objekt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const bird = { species: \"Kestrel\" };\nconsole.log(bird.species); // \"Kestrel\"\n</code></pre></div>\n<p>Sie können die Eigenschaften eines Objekts, das mit <code>const</code> deklariert wurde, aktualisieren, hinzufügen oder entfernen, da die Konstante immer noch auf dasselbe Objekt verweist, obwohl sich der Inhalt des Objekts geändert hat:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>bird.species = \"Striated Caracara\";\nconsole.log(bird.species); // \"Striated Caracara\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"wann_const_und_wann_let_verwenden","title":"Wann <code>const</code> und wann <code>let</code> verwenden","isH3":false,"content":"<p>Wenn Sie mit <code>const</code> nicht so viel machen können wie mit <code>let</code>, warum sollten Sie dann lieber <code>const</code> anstelle von <code>let</code> verwenden? Tatsächlich ist <code>const</code> sehr nützlich. Wenn Sie <code>const</code> verwenden, um einen Wert zu benennen, sagt es jedem, der Ihren Code ansieht, dass dieser Name niemals einem anderen Wert zugewiesen wird. Jedes Mal, wenn sie diesen Namen sehen, werden sie wissen, worauf er sich bezieht.</p>\n<p>In diesem Kurs verwenden wir folgendes Prinzip darüber, wann man <code>let</code> und wann <code>const</code> verwendet:</p>\n<p><em>Verwenden Sie <code>const</code>, wenn Sie können, und <code>let</code>, wenn Sie müssen.</em></p>\n<p>Das bedeutet, dass, wenn Sie eine Variable beim Deklarieren initialisieren können und sie später nicht erneut zuweisen müssen, machen Sie sie zu einer Konstante.</p>"}},{"type":"prose","value":{"id":"testen_sie_ihre_fähigkeiten!","title":"Testen Sie Ihre Fähigkeiten!","isH3":false,"content":"<p>Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe <a href=\"/de/docs/Learn_web_development/Core/Scripting/Test_your_skills:_variables\">Testen Sie Ihre Fähigkeiten: Variablen</a>.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Bis jetzt sollten Sie ein gutes Verständnis von JavaScript-Variablen und deren Erstellung haben. Im nächsten Artikel konzentrieren wir uns detaillierter auf Zahlen und darauf, wie man in JavaScript grundlegende Mathematik betreibt.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/Math\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Core/Scripting/Variables","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Storing the information you need — Variables","native":"English (US)"},{"locale":"es","title":"Almacenando la información que necesitas - Variables","native":"Español"},{"locale":"fr","title":"Stocker les informations nécessaires — les variables","native":"Français"},{"locale":"ja","title":"必要な情報を保管する — 変数","native":"日本語"},{"locale":"ko","title":"필요한 정보를 저장하기 - 변수","native":"한국어"},{"locale":"pt-BR","title":"Armazenando as informações que você precisa — Variáveis","native":"Português (do Brasil)"},{"locale":"ru","title":"Переменные - место хранения необходимой информации","native":"Русский"},{"locale":"zh-CN","title":"如何存储你需要的信息——变量","native":"中文 (简体)"},{"locale":"zh-TW","title":"存儲你需要的資訊 - 變數","native":"正體中文 (繁體)"}],"pageTitle":"Speichern der benötigten Informationen — Variablen - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Core","title":"Kern-Lernmodule"},{"uri":"/de/docs/Learn_web_development/Core/Scripting","title":"Dynamisches Skripting mit JavaScript"},{"uri":"/de/docs/Learn_web_development/Core/Scripting/Variables","title":"Speichern der benötigten Informationen — Variablen"}],"popularity":null,"short_title":"Speichern der benötigten Informationen — Variablen","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><em><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\" aria-current=\"page\">Speichern der benötigten Informationen — Variablen</a></em></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/core/scripting/variables","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/scripting/variables/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptmerkmale auf hoher Ebene aussehen. In diesem Artikel gehen wir auf die wirklichen Grundlagen ein und betrachten, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.","title":"Speichern der benötigten Informationen — Variablen","toc":[{"text":"Benötigte Werkzeuge","id":"benötigte_werkzeuge"},{"text":"Was ist eine Variable?","id":"was_ist_eine_variable"},{"text":"Deklarieren einer Variablen","id":"deklarieren_einer_variablen"},{"text":"Initialisieren einer Variablen","id":"initialisieren_einer_variablen"},{"text":"Eine Anmerkung zu var","id":"eine_anmerkung_zu_var"},{"text":"Aktualisieren einer Variablen","id":"aktualisieren_einer_variablen"},{"text":"Variablentypen","id":"variablentypen"},{"text":"Dynamische Typisierung","id":"dynamische_typisierung"},{"text":"Konstanten in JavaScript","id":"konstanten_in_javascript"},{"text":"Wann <code>const</code> und wann <code>let</code> verwenden","id":"wann_const_und_wann_let_verwenden"},{"text":"Testen Sie Ihre Fähigkeiten!","id":"testen_sie_ihre_fähigkeiten!"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>