JavaScript Foundations — Quick Reference

📌 Golden Rules of JavaScript

Use const by default; switch to let only when a value must change. Never use var.
Always load external scripts at the end of the body (right before </body>).
Anything wrapped in quotes is a string. Numbers have no quotes. "25" ≠ 25.
Always use strict equality === and !==. Never use ==.
Never let JS guess types for math — explicitly convert using Number() or String().
console.log() is your primary debugger — press F12 to view the Console.

1. The Script Tag

Pattern	Code	Notes
External (preferred)	`<script src="script.js"></script>`	Clean separation of concerns. Put just before `</body>`.
Inline	`<script> console.log("hi"); </script>`	For quick experiments only.

⚠️ Placement Rule Putting <script> at the end of <body> ensures all HTML elements are parsed and accessible before JavaScript tries to manipulate them.

2. Variables (Storing Data)

Keyword	Reassignable?	Scope	When to Use
`const` ✅	❌ No	Block `{}`	Default choice. Prevents accidental reassignment.
`let`	✅ Yes	Block `{}`	Counters, scores, accumulators, re-assigned variables.
`var` ❌	✅ Yes	Function / Global	Never. Outdated 1995 behavior causes scope bugs.

3. Primitive Data Types

Type	Example	Description & Key Behavior
String	`"hello"`, `'hello'`, `hello`	Text wrapped in quotes. Immutable. Joined with `+`.
Number	`42`, `3.14`, `-7`	Integers and floats. No quotes. Math operators apply.
Boolean	`true`, `false`	Yes/no switch. Powers conditional logic.
Null	`null`	Intentional empty value ("nothing on purpose").
Undefined	`undefined`	Unassigned variable ("default unset state").

String vs Number & typeof Null Gotchas

• "25" + "25" → "2525" (strings join)
• 25 + 25 → 50 (numbers add)
• "5" - 3 → 2 (subtraction coerces string to number)
• typeof null → "object" (famous 1995 JS bug — memorize it!)

4. Explicit Type Conversion

Function	Input Example	Output	Type
`Number(val)`	`Number("42")`	`42`	`"number"`
`Number(val)`	`Number("hello")`	`NaN` (Not a Number)	`"number"`
`String(val)`	`String(95)`	`"95"`	`"string"`
`Boolean(val)`	`Boolean(0)`, `Boolean("")`	`false` (Falsy)	`"boolean"`
`Boolean(val)`	`Boolean("hi")`, `Boolean(42)`	`true` (Truthy)	`"boolean"`

5. Arithmetic & Comparison Operators

Operator	Category	Example	Result
`+`, `-`, `*`, `/`	Arithmetic	`10 % 3`	`1` (Remainder/Modulo)
`===`	Strict Equal	`5 === 5` vs `"5" === 5`	`true` vs `false`
`!==`	Strict Not Equal	`5 !== 3`	`true`
`>`, `<`, `>=`, `<=`	Relational	`20 >= 18`	`true`

6. Logical Operators

Operator	Name	Rule	Example
`&&`	AND	All conditions must be `true`	`age >= 18 && hasID`
`\|\|`	OR	At least one condition must be `true`	`isMember \|\| paidEntry`
`!`	NOT	Flips `true` ↔ `false`	`!isBanned`

7. Conditionals (if / else if / else)

if-else pattern

const score = 85;

if (score >= 90) {
  console.log("Grade A");
} else if (score >= 80) {
  console.log("Grade B");  // ← First true condition wins, rest skipped
} else {
  console.log("Keep practicing");
}

8. Essential String Methods

Property / Method	Purpose	Example	Output
`.length`	Character count (property)	`"Altamash".length`	`8`
`.toUpperCase()`	Convert to ALL CAPS	`"hi".toUpperCase()`	`"HI"`
`.toLowerCase()`	Convert to lowercase	`"HI".toLowerCase()`	`"hi"`
`.includes(sub)`	Check if contains text	`"Altamash".includes("tam")`	`true`
`.slice(start, end)`	Extract portion of text	`"Altamash".slice(0, 4)`	`"Alta"`
`.trim()`	Strip outer whitespace	`" hi ".trim()`	`"hi"`

9. Modern DOM Injection Pattern

Build HTML strings dynamically with template literals and inject into the DOM:

data → template → inject

// 1. Data
const name = "Altamash";
const projects = 8;

// 2. Template Literal
const card = `
  
    ${name}
    Completed ${projects} lessons
  
`;

// 3. Inject
document.getElementById("profile").innerHTML = card;

Glossary — Terms to Memorize

Variable

A named container for storing data (const or let).

Template Literal

Backtick string ` ` with ${var} interpolation.

Coercion

JS automatically converting one type to another during operations.

Strict Equality

=== checks both value AND type without coercion.

Immutable

Strings cannot be modified directly; methods return a new string.

Code Block

Code grouped inside curly braces { }.

Console

DevTools panel (F12) where console.log() outputs.

camelCase

Standard JS variable naming convention: userAge.

💡 Practice Reopen Lesson 9 and use the live JS playground. Write code from memory to build durable storage strength.

Printed from the Professional Full Stack Learning workspace.