Chapter 2: The Basics

Welcome back to "Mastering JavaScript"! In Chapter 1, we explored the history and importance of JavaScript and set up our development environment. Now, it's time to dive into the basics of JavaScript.

2.1 Variables and Data Types

Variables are used to store data that can be referenced and manipulated in a program. In JavaScript, you can declare a variable using var, let, or const.

var: This is the old way of declaring variables. It's function-scoped and can lead to issues with hoisting.
let: This is the modern way to declare variables that can be reassigned. It's block-scoped, meaning it's only accessible within the block it's defined in.
const: This is used to declare variables that won't change. It's also block-scoped.

Let's look at some examples:

// Using var
var name = "John";
console.log(name); // Output: John

// Using let
let age = 25;
console.log(age); // Output: 25

// Using const
const country = "USA";
console.log(country); // Output: USA

Data Types in JavaScript include:

String: Text enclosed in quotes (single or double).
Number: Numeric values (integers or floating-point).
Boolean: True or false.
Null: Represents the intentional absence of any value.
Undefined: A variable that has been declared but not assigned a value.
Object: A collection of key-value pairs.
Array: An ordered list of values.

Here's how you can use these data types:

// String
let greeting = "Hello, World!";
console.log(greeting); // Output: Hello, World!

// Number
let price = 19.99;
console.log(price); // Output: 19.99

// Boolean
let isAvailable = true;
console.log(isAvailable); // Output: true

// Null
let emptyValue = null;
console.log(emptyValue); // Output: null

// Undefined
let notAssigned;
console.log(notAssigned); // Output: undefined

// Object
let person = {
    name: "Alice",
    age: 30
};
console.log(person); // Output: { name: 'Alice', age: 30 }

// Array
let colors = ["red", "green", "blue"];
console.log(colors); // Output: ['red', 'green', 'blue']

2.2 Operators and Expressions

Operators are used to perform operations on variables and values. JavaScript supports several types of operators:

Arithmetic Operators: +, -, *, /, %
Assignment Operators: =, +=, -=, *=, /=
Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
Logical Operators: &&, ||, !

Let's see them in action:

// Arithmetic Operators
let x = 10;
let y = 5;
console.log(x + y); // Output: 15
console.log(x - y); // Output: 5
console.log(x * y); // Output: 50
console.log(x / y); // Output: 2
console.log(x % y); // Output: 0

// Assignment Operators
let z = 10;
z += 5; // Equivalent to z = z + 5
console.log(z); // Output: 15

// Comparison Operators
console.log(x == y);  // Output: false
console.log(x === 10); // Output: true
console.log(x != y);  // Output: true
console.log(x > y);  // Output: true

// Logical Operators
let a = true;
let b = false;
console.log(a && b); // Output: false
console.log(a || b); // Output: true
console.log(!a); // Output: false

2.3 Control Flow: Conditionals and Loops

Conditionals allow you to execute code based on certain conditions. The most common conditional statement is if.

let 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: D");
}
// Output: Grade: B

Loops let you repeat code a certain number of times or while a condition is true. Common loops in JavaScript include for, while, and do...while.

// For loop
for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}
// Output: Iteration: 0, Iteration: 1, Iteration: 2, Iteration: 3, Iteration: 4

// While loop
let count = 0;
while (count < 5) {
    console.log("Count: " + count);
    count++;
}
// Output: Count: 0, Count: 1, Count: 2, Count: 3, Count: 4

// Do...while loop
let num = 0;
do {
    console.log("Number: " + num);
    num++;
} while (num < 5);
// Output: Number: 0, Number: 1, Number: 2, Number: 3, Number: 4

In this chapter, we covered the basics of JavaScript, including variables and data types, operators and expressions, and control flow with conditionals and loops. These are the building blocks of JavaScript, and understanding them is crucial as we move forward.

In the next chapter, we'll dive into functions and scope, where you'll learn how to define and use functions, and understand how scope and hoisting work in JavaScript.

Feel free to experiment with the code examples and share your thoughts or questions in the comments.

Happy coding!

Chapter 2: The Basics

Table of contents

2.1 Variables and Data Types

2.2 Operators and Expressions

2.3 Control Flow: Conditionals and Loops