MODULE 2: Variables, Data Types & Operators

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 2: Variables, Data Types & Operators - SitesByYogi

JavaScript Foundations • StreetGeek Academy

🧠 MODULE 2: Variables, Data Types & Operators

Learn how to store information, work with numbers and strings, and use operators to perform calculations and logic — skills you’ll use constantly as you build interactivity into your portfolio.

1) What Is a Variable?

A variable is a named container that stores data so you can reuse or change it later. Think of it like a labeled box for information.

// Variables
let name = "Yogi";
let age = 30;
let isDeveloper = true;

console.log(name); // "Yogi"

2) Declaring Variables

There are three ways to declare variables in modern JavaScript:

Keyword	Can Reassign?	Scope	Use For
let	✅ Yes	Block	Most variables
const	❌ No	Block	Constants or config values
var	✅ Yes	Function	Legacy (avoid)

let city = "Richmond";
const country = "USA";

💡 Tip: Use const by default, and only use let when you need to reassign.

3) Naming Rules & Conventions

✅ Must start with a letter, _, or $
✅ Case-sensitive (userName ≠ username)
❌ No spaces or special characters
Use camelCase for readability

let favoriteColor = "blue";

4) JavaScript Data Types

Type	Example	Description
String	`"Hello"`	Text
Number	`42`	Integer or decimal
Boolean	`true / false`	Logic flags
Null	`null`	Intentional empty value
Undefined	`undefined`	Declared but not assigned
Object	`{ key: value }`	Grouped data
Array	`[1, 2, 3]`	List of values

let score = 95;
let user = "Yogi";
let isOnline = true;
console.log(typeof score); // "number"
console.log(typeof user); // "string"
console.log(typeof isOnline); // "boolean"

5) Operators

Operators perform actions on values.

Arithmetic Operators

Operator	Meaning	Example
`+`	Addition	`10 + 5 // 15`
`-`	Subtraction	`10 - 5 // 5`
`*`	Multiplication	`10 * 5 // 50`
`/`	Division	`10 / 2 // 5`
`%`	Modulus (remainder)	`10 % 3 // 1`
`**`	Exponent	`2 ** 3 // 8`

String Concatenation & Template Literals

// Concatenation
let first = "Street";
let second = "Geek";
let brand = first + second; // "StreetGeek"

// Template literals (preferred)
let brand2 = `${first} ${second}`; // "Street Geek"

Comparison Operators

Operator	Meaning	Example
`==`	Equal (loose)	`5 == "5" // true`
`===`	Strict equal	`5 === "5" // false`
`!=`	Not equal	`3 != 2 // true`
`!==`	Strict not equal	`3 !== "3" // true`
`> < >= <=`	Comparisons	`10 > 5 // true`

✅ Always use === for accuracy — it compares both value and type.

Logical Operators

// AND
true && false // false

// OR
true || false // true

// NOT
!true // false

6) Mini-Project: “Portfolio Status” Console Program

let siteName = "StreetGeek Portfolio";
let version = 1.0;
let isLive = false;

console.log(`Site: ${siteName}`);
console.log(`Version: ${version}`);
console.log(`Status: ${isLive ? "Online" : "Offline"}`);

💡 Ternary Operator — shorthand for simple if conditions:
condition ? valueIfTrue : valueIfFalse

7) Hands-On Practice

Exercise 1: Simple Calculator

let subtotal = 200;
let taxRate = 0.07;
let total = subtotal + (subtotal * taxRate);
console.log(`Total: $${total.toFixed(2)}`); // Expected: "Total: $214.00"

Exercise 2: Display Visitor Info

<h2 id="visitor-msg"></h2>

const visitorMsg = document.getElementById("visitor-msg");
let visitorName = "Student";
let lessonsCompleted = 2;
visitorMsg.textContent = `Welcome back, ${visitorName}! You’ve completed ${lessonsCompleted} lessons so far.`;

Exercise 3 (Challenge): Dynamic Badge

<span id="badge"></span>

const badge = document.getElementById("badge");
let score = 85;
let badgeName = score >= 90 ? "Gold" : score >= 75 ? "Silver" : "Bronze";
badge.textContent = `You’ve earned the ${badgeName} badge! 🏅`;

8) Quick Debugging Tip

console.table({ name, age, city });

Great for seeing structured data in the console.

9) Quiz Time

Show/Hide Questions

1) What’s the difference between let and const?

2) What type does "42" have?

3) What’s the output of 5 + "5"?

4) Which operator compares both value and type?

5) What’s the result of 10 % 3?

🚀 Challenge Task: Dynamic Portfolio Summary Widget

<p id="summary"></p>

const summary = document.getElementById("summary");
let projects = 6;
let followers = 142;
let isPublic = true;

summary.textContent =
  `You have ${projects} projects and ${followers} followers. ` +
  `Portfolio is currently ${isPublic ? "Public 🌐" : "Private 🔒"}.`;

🏁 Module 2 Summary

Declare variables with let and const
Identify and use JavaScript data types
Use arithmetic, comparison, and logical operators
Combine strings and variables with template literals
Add dynamic logic to your site with conditions

Next up → MODULE 3: Control Flow – Making Decisions with Logic