CodeWithAbdessamad

Syntax And Variables

Syntax and Variables 🚀

JavaScript’s variable declarations form the bedrock of every program you’ll build. Understanding how variables work—especially the differences between var, let, and const—is crucial for writing clean, predictable code. In this section, we’ll dive deep into variable syntax, naming conventions, and the subtle but critical concept of hoisting. Let’s get started!

var

var is JavaScript’s oldest variable declaration keyword. It has function scope (not block scope), meaning variables declared with var are accessible within the function they’re declared in or globally. This behavior leads to a well-known issue called hoisting (which we’ll cover in detail later), but it’s still used in legacy code and certain contexts.

Here’s how it works in practice:

<code class="language-javascript">// Global variable (accessed anywhere)
<p>var globalVar = "I'm global!";</p>

<p>function exampleVar() {</p>
<p>  // Function-scoped variable</p>
<p>  var funcVar = "I'm inside the function!";</p>
<p>  console.log(funcVar); // "I'm inside the function!"</p>
<p>}</p>
<p>exampleVar();</p>
<p>console.log(globalVar); // "I'm global!"</code>

Key behavior: var variables are hoisted to the top of their scope (function or global) but initialized to undefined until the code runs. This means you can reference them before declaration without errors (though they’ll be undefined).

Example showing hoisting in action:

<code class="language-javascript">function varHoisting() {
<p>  console.log(a); // Outputs "undefined" (hoisted but not initialized)</p>
<p>  var a = 10;</p>
<p>  console.log(a); // Outputs "10"</p>
<p>}</p>
<p>varHoisting();</code>

⚠️ Warning: var is discouraged in modern JavaScript due to its quirks. We’ll show cleaner alternatives in the next sections.

let

let introduces block scope (available in ES6+). Unlike var, variables declared with let are confined to the nearest enclosing block (e.g., if, for, or {}). This prevents variable leakage and makes code more predictable.

Core features:

  • Block-scoped (no hoisting)
  • Cannot be redeclared in the same scope
  • Can be reassigned

Here’s a practical example:

<code class="language-javascript">// Block-scoped variable (accessible only inside the if block)
<p>if (true) {</p>
<p>  let blockScopedVar = "This is block-scoped!";</p>
<p>  console.log(blockScopedVar); // "This is block-scoped!"</p>
<p>}</p>
<p>console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined</code>

Reassignment example:

<code class="language-javascript">let reassignableVar = 20;
<p>reassignableVar = 30; // Valid reassignment</p>
<p>console.log(reassignableVar); // 30</code>

Why it matters: Block scoping eliminates common bugs like accidentally overriding variables in loops or conditionals. This is especially powerful when working with complex logic.

const

const is JavaScript’s block-scoped constant declaration (ES6+). Once declared, variables cannot be reassignable. However, the value of a const can be reconfigured if it’s an object or array (but not a primitive).

Core features:

  • Block-scoped (like let)
  • Cannot be redeclared
  • Cannot be reassigned (but object properties can be modified)

Practical examples:

<code class="language-javascript">// Primitive value (immutable)
<p>const primitiveConst = 42;</p>
<p>primitiveConst = 100; // TypeError: Assignment to constant variable</code>

<code class="language-javascript">// Object (mutable properties)
<p>const mutableObject = { name: "Alice" };</p>
<p>mutableObject.name = "Bob"; // Valid (modifies property)</p>
<p>console.log(mutableObject); // { name: "Bob" }</code>

Key difference from let: const is ideal for values you never want to change (e.g., configuration constants, API endpoints), while let suits values that need updates during runtime.

Naming Rules

JavaScript variables follow specific naming conventions to ensure clarity and avoid conflicts. Here’s what you need to know:

  1. Valid characters: Variables can start with a letter (a-z, A-Z), underscore (_), or dollar sign ($). Subsequent characters can be letters, digits (0-9), underscores, or dollar signs.
  2. Reserved keywords: Cannot use JavaScript keywords (e.g., var, let, const, if, function).
  3. Case sensitivity: myVar ≠ MyVar ≠ MY_VAR.
  4. No spaces or special characters: Hyphens (-), spaces, and symbols like @ are invalid.
Valid Name Example Invalid Name Example Reason
userCount 123user Starts with digit
_tempVariable var Reserved keyword
$apiKey user-name Contains hyphen
myVariable my variable Contains space

Pro tip: Use camelCase for variables (e.g., userCount) and PascalCase for class names (e.g., UserCount). Avoid camelCase for constants (use UPPERSNAKECASE).

Hoisting

Hoisting is JavaScript’s process of moving variable and function declarations to the top of their scope before execution. This behavior only applies to var (not let or const). Understanding hoisting is critical to avoiding subtle bugs.

How it works with var

<code class="language-javascript">console.log(a); // "undefined" (hoisted to top)
<p>var a = 10;</p>
<p>console.log(a); // 10</code>

  • var variables are hoisted but initialized to undefined at runtime.
  • This means you can reference them before declaration without errors (but they’ll be undefined).

Why let/const don’t hoist like var

<code class="language-javascript">console.log(b); // ReferenceError: b is not defined
<p>let b = 20;</code>

  • let and const variables are not hoisted to the top of their scope.
  • They’re temporarily undefined until the code executes (a “temporal dead zone”).

Real-world example: Loop scoping

<code class="language-javascript">for (let i = 0; i < 3; i++) {
<p>  console.log(i); // 0, 1, 2</p>
<p>}</p>
<p>console.log(i); // ReferenceError: i is not defined (i is block-scoped)</code>

Why hoisting matters

Hoisting can cause unexpected behavior when variables are used early in code. Always prefer let/const over var for modern JavaScript to avoid these pitfalls.

Summary

Keyword Scope Reassignable Hoisting Best Use Case
var Function/global Yes Yes Legacy code (avoid in new projects)
let Block Yes No Mutable variables needing updates
const Block No No Immutable values (primitives)

Key takeaways:

  1. Prefer let and const over var for modern JavaScript.
  2. Always use block scoping (let/const) to prevent variable leaks.
  3. Follow naming rules (camelCase, no reserved keywords).
  4. Hoisting affects var only—never use let/const before declaration.

By mastering these concepts, you’ll write more robust, maintainable code that avoids common pitfalls. Remember: clarity and predictability are your greatest allies in JavaScript! âś…