Chapter 2: JavaScript Basics and Syntax

In this chapter, we’ll cover the essentials of JavaScript syntax, explore the different data types available, and learn how to declare and use variables. These basics form the foundation for more complex JavaScript programming.

JavaScript Data Types

JavaScript provides several data types for storing different kinds of information. The primary data types include:

Number: Represents both integer and floating-point numbers, e.g., 42 or 3.14.
String: Used for text, enclosed in quotes, e.g., "Hello, World!".
Boolean: Represents logical values, either true or false.
Object: Used to store collections of data and more complex entities.
Array: A list-like object used to store multiple values in a single variable.
Null: Represents an intentional absence of any value.
Undefined: Represents a variable that has been declared but not yet assigned a value.

Declaring Variables

Variables store data values in JavaScript. You can declare variables using var, let, or const:

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

// Using const
const name = "Alice";
console.log(name); // Outputs: Alice

In this example, let allows the value of age to be changed, while const declares a constant variable whose value cannot be altered.

Basic Syntax and Operators

JavaScript syntax includes operators for arithmetic, comparisons, and logical operations:

Arithmetic Operators

Arithmetic operators perform basic math operations:

// Arithmetic operations
let x = 10;
let y = 5;
console.log(x + y);  // Addition, outputs: 15
console.log(x - y);  // Subtraction, outputs: 5
console.log(x * y);  // Multiplication, outputs: 50
console.log(x / y);  // Division, outputs: 2

Comparison Operators

Comparison operators compare values and return a Boolean (true or false):

// Comparison operations
console.log(x > y);   // Greater than, outputs: true
console.log(x < y);   // Less than, outputs: false
console.log(x === y); // Strict equality, outputs: false
console.log(x !== y); // Strict inequality, outputs: true

Logical Operators

Logical operators combine Boolean values and are useful in conditional statements:

// Logical operations
let a = true;
let b = false;
console.log(a && b); // AND, outputs: false
console.log(a || b); // OR, outputs: true
console.log(!a);     // NOT, outputs: false

Writing and Executing JavaScript Code in the Browser

JavaScript code can be embedded directly in HTML or written in an external .js file linked to an HTML document. Here’s an example of including JavaScript within an HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>JavaScript Basics Example</h1>

    <!-- Inline JavaScript -->
    <script>
        let message = "Hello, JavaScript!";
        console.log(message);
    </script>
</body>
</html>

In this example, the JavaScript code is included directly within the HTML using the <script> tag. The console.log() statement outputs the message to the browser’s console.

Summary and Next Steps

In this chapter, we explored JavaScript data types, variables, and basic syntax, including arithmetic, comparison, and logical operators. In the next chapter, we’ll delve into operators and expressions, further building on these foundational concepts to enhance your coding skills.