title: Uncaught SyntaxError: Missing initializer in const declaration
body: <p>I am new to learning Javascript and making a sample project to test password strength based on the input that a user provides.</p>
  <p>But along the way, I see an error message showing up as follows:</p>
  <blockquote>
  <p>Uncaught SyntaxError: Missing initializer in const declaration</p>
  </blockquote>
  <p>I researched on a similar link to this exact query here:
  <a href="https://stackoverflow.com/questions/57158884/syntaxerror-missing-initializer-in-const-declaration">SyntaxError: Missing initializer in const declaration</a></p>
  <p>but it's related to <em>react</em> and I don't understand much.</p>
  <p>Here, is my Javascript code with the function in particular that throws error:</p>
  <pre><code>function updateStrengthMeter() {
    const weaknesses = calculatePasswordStrength(passwordInput.value);
    let strength = 100;
    reasonsContainer.innerHTML = &quot;&quot;;
    weaknesses.forEach((weakness) =&gt; {
      if (weakness == null) return;
      strength -= weakness.deduction;
  
      const messageElement.innerText = weakness.message;
      reasonsContainer.appendChild(messageElement);
    });
    strengthMeter.style.setProperty(&quot;--strength&quot;, strength);
  }
  </code></pre>
  <p>What I discovered is that the error is related to const declaration at this line here:</p>
  <pre><code>const messageElement.innerText = weakness.message;
  </code></pre>
  <p>On internet research, I found this happens if you declare a const with no assignment. But, I wonder why it occurs for me because I have assigned value to it.</p>
  <p>Now, I may be asking this question again but this time it's with a perspective of why the error occurs in a vanilla Javascript codebase.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const strengthMeter = document.getElementById("strength-meter");
  const passwordInput = document.getElementById("password-input");
  const reasonsContainer = document.getElementById("reasons");
  
  passwordInput.addEventListener("input", updateStrengthMeter);
  updateStrengthMeter();
  
  function updateStrengthMeter() {
      const weaknesses = calculatePasswordStrength(passwordInput.value);
      let strength = 100;
      reasonsContainer.innerHTML = "";
      weaknesses.forEach((weakness) =&gt; {
          if (weakness == null) return;
          strength -= weakness.deduction;
  
          const messageElement.innerText = weakness.message;
          reasonsContainer.appendChild(messageElement);
      });
      strengthMeter.style.setProperty("--strength", strength);
  }
  
  function calculatePasswordStrength(password) {
      const weaknesses = [];
      weaknesses.push(lengthWeakness(password));
      return weaknesses;
  }
  
  function lengthWeakness(password) {
      const length = password.length;
  
      if (length &lt;= 5) {
          return {
              message: "Your password is too short",
              deduction: 40,
          };
      }
  
      if (length &lt;= 10) {
          return {
              message: "Your password could be longer",
              deduction: 15,
          };
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*::before,
  *::after,
  * {
      box-sizing: border-box;
  }
  
  body {
      background-color: hsl(261, 88%, 17%);
      color: hsl(261, 88%, 90%);
      text-align: center;
  }
  
  .strength-meter {
      position: relative;
      height: 2rem;
      width: 90%;
      border: 3px solid hsl(261, 88%, 57%);
      border-radius: 1rem;
      margin: 0 auto;
      overflow: hidden;
  }
  
  .strength-meter::before {
      content: "";
      position: absolute;
      left: 0;
      height: 100%;
      width: calc(1% * var(--strength, 0));
      background-color: hsl(261, 88%, 67%);
      transition: width 200ms;
  }
  
  .password-input {
      margin-top: 1rem;
      width: 90%;
      padding: 0.25rem 0.75rem;
      background-color: hsl(261, 88%, 25%);
      color: white;
      border: 1px solid hsl(261, 88%, 57%);
      outline: none;
      text-align: center;
      border-radius: 0.3rem;
  }
  
  .password-input:focus {
      border-color: hsl(261, 88%, 70%);
  }
  
  .reasons &gt; * {
      margin-top: 0.5rem;
      color: hsl(261, 88%, 80%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
          &lt;title&gt;Password Strength&lt;/title&gt;
          &lt;script src="script.js" defer&gt;&lt;/script&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;h1&gt;Password Strength Test&lt;/h1&gt;
          &lt;div class="strength-meter" id="strength-meter"&gt;&lt;/div&gt;
          &lt;input class="password-input" id="password-input" value="password" type="text" autofocus aria-labelledby="password" /&gt;
          &lt;div id="reasons" class="reasons"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>