Learn JavaScript

JavaScript Fundamentals

Welcome to the foundational JavaScript lesson! JavaScript is a versatile and powerful programming language that enables you to create dynamic and interactive web content. Let's dive into the core concepts.

1. Variables: Storing Information

Variables are like containers that hold data. In JavaScript, you declare variables using var, let, or const.

• var: Declared variables are globally scoped or function scoped.
• let: Declared variables are block scoped. They can be reassigned.
• const: Declared variables are block scoped and cannot be reassigned (though their properties can be changed if they are objects).

let name = "Alice";
const age = 30;
var isStudent = true;

name = "Bob"; // allowed with let
// age = 31; // This would cause an error with const
            

2. Data Types: The Kind of Data

JavaScript has several built-in data types:

• String: Textual data, enclosed in single or double quotes. "Hello", 'World'
• Number: Numeric values, integers or decimals. 42, 3.14
• Boolean: Represents true or false values. true, false
• Null: Represents the intentional absence of any object value. null
• Undefined: Represents a variable that has been declared but not yet assigned a value. undefined
• Object: A collection of key-value pairs. { key: 'value' }
• Symbol: A unique and immutable primitive value. Symbol('id')
• BigInt: For integers larger than the maximum safe integer. 1234567890123456789012345678901234567890n

3. Operators: Performing Actions

Operators are symbols that perform operations on values and variables.

• Arithmetic Operators: +, -, *, /, % (remainder)
• Assignment Operators: =, +=, -=, *=, /=
• Comparison Operators: ==, === (strict equality), !=, !==, >, <, >=, <=
• Logical Operators: && (AND), || (OR), ! (NOT)

let x = 10;
let y = 5;
let sum = x + y; // sum is 15
let isGreater = x > y; // isGreater is true
let isEqual = (x === 10); // isEqual is true
            

4. Control Flow: Making Decisions

Control flow statements allow you to execute code based on certain conditions.

• if...else: Executes a block of code if a condition is true, and another block if it's false.
• switch: Selects one of many code blocks to be executed.
• for loop: Executes a block of code a specified number of times.
• while loop: Executes a block of code as long as a condition is true.

let hour = 14;
if (hour < 12) {
    console.log("Good morning!");
} else if (hour < 18) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}

for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}
            

5. Functions: Reusable Blocks of Code

Functions are blocks of code designed to perform a particular task. They make your code more organized and reusable.

function greet(userName) {
    return "Hello, " + userName + "!";
}

let message = greet("Charlie");
console.log(message); // Output: Hello, Charlie!
            

6. Arrays: Ordered Lists

Arrays are special variables that can hold multiple values in a single variable. They are ordered and can contain different data types.

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple

fruits.push("Date"); // Adds "Date" to the end
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Date"]

console.log(fruits.length); // Output: 4
            

7. Objects: Key-Value Pairs

Objects are collections of properties, where each property is a key-value pair. Keys are usually strings, and values can be any data type, including other objects or functions.

let person = {
    firstName: "Jane",
    lastName: "Doe",
    age: 25,
    isEmployed: false,
    greet: function() {
        return "Hi, I'm " + this.firstName + " " + this.lastName;
    }
};

console.log(person.firstName); // Output: Jane
console.log(person['lastName']); // Output: Doe
console.log(person.greet()); // Output: Hi, I'm Jane Doe