JavaScript Fundamentals: Getting Started

// JavaScript can be embedded in HTML
<script>
  console.log("Hello, JavaScript!");
</script>

// Or in separate .js files
// script.js
console.log("Hello from external file!");

JavaScript can be written inline in HTML using <script> tags or in separate .js files. The console.log() function outputs messages to the browser console.

// Using const (preferred for values that don't change)
const name = "Alice";
const age = 30;
// name = "Bob"; // ❌ Error: Cannot reassign const

// Using let (for values that change)
let count = 0;
count = 1; // ✅ OK
count = count + 1; // ✅ OK

// Using var (avoid in modern JavaScript)
var oldWay = "Don't use this";
// var is function-scoped, not block-scoped

// Variable naming
const firstName = "John"; // ✅ Good: camelCase, descriptive
const x = 5; // ❌ Bad: not descriptive
const user_name = "Jane"; // ❌ Bad: use camelCase, not snake_case

Use const for values that don't change, let for values that do change. Avoid var. Use descriptive, camelCase names for variables.

// String
const name = "Alice";
const greeting = 'Hello';
const template = `Hello, ${name}!`; // Template literal

// Number
const age = 30;
const price = 19.99;
const negative = -5;

// Boolean
const isActive = true;
const isComplete = false;

// Undefined
let value; // undefined
console.log(value); // undefined

// Null
const empty = null; // Explicitly empty

// Type checking
console.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isActive); // "boolean"
console.log(typeof value); // "undefined"
console.log(typeof empty); // "object" (quirk of JavaScript)

// Type conversion
const numString = "42";
const num = Number(numString); // Convert to number
const str = String(42); // Convert to string
const bool = Boolean(1); // Convert to boolean (true)

JavaScript has several data types. Use typeof to check types. JavaScript automatically converts types in some situations (type coercion).

// Arithmetic operators
const sum = 10 + 5; // 15
const difference = 10 - 5; // 5
const product = 10 * 5; // 50
const quotient = 10 / 5; // 2
const remainder = 10 % 3; // 1
const power = 2 ** 3; // 8

// Comparison operators
console.log(5 == "5"); // true (loose equality)
console.log(5 === "5"); // false (strict equality - preferred)
console.log(5 !== "5"); // true
console.log(10 > 5); // true
console.log(10 < 5); // false

// Logical operators
const isAdult = true;
const hasLicense = false;
console.log(isAdult && hasLicense); // false (both must be true)
console.log(isAdult || hasLicense); // true (either can be true)
console.log(!isAdult); // false (negation)

// Assignment operators
let count = 5;
count += 3; // count = count + 3 (8)
count -= 2; // count = count - 2 (6)
count *= 2; // count = count * 2 (12)
count /= 3; // count = count / 3 (4)

Operators perform operations on values. Use === for strict equality checks. Logical operators combine boolean values. Assignment operators modify variables.

// String creation
const name1 = 'Alice';
const name2 = "Bob";
const name3 = `Charlie`; // Template literal

// String properties and methods
const text = "Hello World";
console.log(text.length); // 11
console.log(text.toUpperCase()); // "HELLO WORLD"
console.log(text.toLowerCase()); // "hello world"
console.log(text.includes("World")); // true
console.log(text.indexOf("World")); // 6
console.log(text.slice(0, 5)); // "Hello"
console.log(text.replace("World", "JavaScript")); // "Hello JavaScript"

// Template literals (ES6+)
const firstName = "Alice";
const age = 30;
const greeting = `Hello, my name is ${firstName} and I am ${age} years old.`;
// "Hello, my name is Alice and I am 30 years old."

// Multi-line strings with template literals
const message = `This is a
multi-line
string`;

Strings can be created with quotes or template literals. Template literals allow interpolation and multi-line strings. Use string methods to manipulate text.

// if/else statements
const age = 20;

if (age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are a minor");
}

// Multiple conditions
const score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

// Logical operators in conditions
const isLoggedIn = true;
const hasPermission = false;

if (isLoggedIn && hasPermission) {
  console.log("Access granted");
} else {
  console.log("Access denied");
}

// switch statement
const day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of work week");
    break;
  case "Friday":
    console.log("End of work week");
    break;
  default:
    console.log("Mid week");
}

// Ternary operator
const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

Use if/else for conditional logic. Switch statements are useful for multiple value comparisons. Ternary operator provides concise conditional expressions.