DEV Community

Tanay D Kubade
Tanay D Kubade

Posted on

JavaScript Variables and Data Types

By @tanaykubade

📝 Mastering JavaScript Variables & Data Types: A Professional Guide

1. What Are Variables?

Variables act as named storage boxes in JavaScript, holding data that can be referenced and manipulated later (Medium). Declared using var, let, or const, they help you write readable, maintainable code:

let age = 25;
const PI = 3.14;
Enter fullscreen mode Exit fullscreen mode

Naming rules:

  • Must begin with a letter, underscore (_), or dollar sign ($)
  • Can include letters, numbers, underscores, $
  • Case-sensitive and cannot use reserved words (Medium, codingissimple.com)

Best practice: Use descriptive, camelCase variables like userProfile or itemCount .

2. var, let & const: Key Differences

Keyword Scope Hoisting Re-declaration Re-assignment
var Function Hoisted, initialized as undefined Yes Yes
let Block Hoisted but in Temporal Dead Zone No Yes
const Block Same as let No No (immutable binding) (Guvi, Medium)
  • var: function-scoped; use sparingly due to hoisting quirks (Medium).
  • let: block-scoped and safer for variables that change (w3resource).
  • const: block-scoped, must be initialized immediately; bindings are immutable but object contents can change (GeeksforGeeks).

Pro tip: Adopt this rule—const by default, let if needed, avoid var in modern code .

3. JavaScript Data Types

JavaScript supports both primitive and reference types:

Primitive types (immutable):

  • string, number, boolean, null, undefined, BigInt, Symbol (W3Schools)

Reference types (objects):

  • Objects, arrays, functions, dates, maps, sets, etc.

Quick examples: 

let name = "Alice";           // string
let score = 95.5;            // number
const isAdmin = true;        // boolean
let data = null;             // explicitly empty
let pending;                 // undefined (default)
let big = 9007199254740991n; // BigInt
const id = Symbol("id");     // Symbol

const user = { name, score };     // object
const list = [1, 2, 3];           // array
function greet() { console.log("Hi"); } // function
Enter fullscreen mode Exit fullscreen mode

4. Dynamic Typing & Type Coercion

Variables in JavaScript can change types at runtime :

let x;
x = 5;          // number
x = "hello";    // now string
Enter fullscreen mode Exit fullscreen mode

Type coercion occurs when operations mix types:

5 + "5"     // "55" (number coerced to string)
"10" - 2    // 8   (string coerced to number) :contentReference[oaicite:28]{index=28}
Enter fullscreen mode Exit fullscreen mode

5. Primitive vs Reference Assignment

  • Primitives are copied by value: 
let a = 10;
let b = a;
b = 20;
console.log(a); // remains 10
Enter fullscreen mode Exit fullscreen mode
  • Objects are copied by reference: 
const obj1 = { x: 1 };
const obj2 = obj1;
obj2.x = 2;
console.log(obj1.x); // becomes 2 :contentReference[oaicite:31]{index=31}
Enter fullscreen mode Exit fullscreen mode

6. Best Practices & Community Insights

“Never use ‘var’…” — use let/const for safer, block-scoped behavior (Reddit)
“Functions just like a hash map… give good names…” — adopt meaningful naming, comment sparingly, and write single-responsibility functions (Reddit)

Pro tips:

  • Declare variables close to their use to improve readability .
  • Use camelCase consistently.
  • Use null to signal deliberate absence of data; avoid manually assigning undefined (Reddit, FreeCodeCamp).
  • Be mindful of special numeric values: NaN, Infinity, -Infinity (FreeCodeCamp).

7. Example: Declaring Variables & Data Types 

// User profile
const userName = "Alice";          // string
let userScore = 42;                // number
const isActive = true;             // boolean
let lastLogin = null;              // no login recorded yet
let debugMode;                     // undefined

// Update state
userScore += 8;                    // arithmetic
lastLogin = new Date();           // assign a date object
Enter fullscreen mode Exit fullscreen mode

🏁 Final Thoughts

Understanding variables and data types sets the stage for clean, bug-free code. By using let/const, applying clear naming, knowing how data types behave, and writing code with scope in mind, you're building a strong foundation.

Curious to explore type-checking with TypeScript, deep-dive object mutation, or destructuring? Just ask—I can craft a follow-up!

Top comments (0)