JavaScript Basics – Extended Notes with Practical
Examples
These notes cover JavaScript basics in depth with real-life and code examples. They are suitable
for beginners who want to understand how to use each concept practically.
1. Variables
Variables are used to store information which can be used later. There are 3 types: let, const, var.
// Example
let studentName = "Ali"; // Can change later
const pi = 3.14; // Cannot change
var age = 20; // Old style
■ Real-life: Like labeling boxes to store info and retrieving it when needed.
2. Data Types
Common data types:
1 String → Text, e.g., 'Hello'
2 Number → Numeric values, e.g., 42, 3.14
3 Boolean → true or false
4 Array → Collection of values, e.g., ['Math', 'CS']
5 Object → Structured data, e.g., {name: 'Ali', age: 20}
6 Null / Undefined → Empty or unassigned values
3. Arrays
Arrays store multiple values in one variable. Useful for lists or collections.
// Create array
let fruits = ["Apple", "Banana", "Mango"];
// Access items
[Link](fruits[0]); // Apple
// Modify items
fruits[1] = "Orange";
// Add items
[Link]("Pineapple");
[Link]("Strawberry"); // Add at start
// Remove items
[Link](); // Remove last
[Link](); // Remove first
// Loop through array
for (let fruit of fruits) {
[Link](fruit);
}
// Array methods
[Link]([Link]); // Number of items
[Link]([Link]("Mango")); // Find position
[Link]([Link]("Banana")); // Check if exists
■ Real-life: Like managing a list of groceries or student names.
4. Objects
Objects store data as key-value pairs. They represent structured real-world data.
// Create object
let student = {
name: "Sara",
age: 19,
courses: ["Math", "CS", "History"],
isGraduated: false
};
// Access values
[Link]([Link]); // Sara
[Link]([Link][1]); // CS
// Modify values
[Link] = 20;
[Link] = true;
// Add new property
[Link] = "A";
// Loop through object keys and values
for (let key in student) {
[Link](key + ": " + student[key]);
}
■ Real-life: A student record with name, age, courses, etc.
5. Operators
// Arithmetic Operators
let x = 10, y = 5;
[Link](x + y); // 15
[Link](x - y); // 5
[Link](x * y); // 50
[Link](x / y); // 2
// Comparison Operators
[Link](x > y); // true
[Link](x <= y); // false
// Logical Operators
[Link](x > 5 && y < 10); // true
[Link](x > 15 || y < 10); // true
[Link](!(x > y)); // false
■ Real-life: Like calculating prices, comparing scores, making decisions.
6. Conditionals
let score = 75;
if (score >= 90) {
[Link]("Grade A");
} else if (score >= 75) {
[Link]("Grade B");
} else if (score >= 50) {
[Link]("Grade C");
} else {
[Link]("Fail");
}
■ Real-life: Grading system or any decision-making scenario.
7. Loops
// For loop
for (let i = 1; i <= 5; i++) {
[Link]("Day " + i);
}
// While loop
let count = 1;
while (count <= 3) {
[Link]("Repeat " + count);
count++;
}
// For-of loop for arrays
let students = ["Ali", "Sara", "Omar"];
for (let student of students) {
[Link](student);
}
■ Real-life: Repeating daily tasks, checking lists, processing arrays.
8. Functions
// Function to greet
function greet(name) {
return "Hello " + name + "!";
}
[Link](greet("Ali"));
// Function with multiple parameters
function add(a, b) {
return a + b;
}
[Link](add(10, 5));
// Function using arrays
function listCourses(courses) {
for (let course of courses) {
[Link](course);
}
}
listCourses(["Math", "CS", "History"]);
■ Real-life: Functions are machines that take input → process → output.
Summary
JavaScript basics include variables, data types, arrays, objects, operators, conditionals, loops, and
functions. - Variables store information. - Arrays store lists and provide methods for easy
management. - Objects group related data in key-value pairs. - Operators help calculate, compare,
and make decisions. - Conditionals and loops allow decision-making and repeated tasks. -
Functions encapsulate reusable code blocks. These concepts form the foundation before moving to
more advanced topics like Objects in depth, DOM manipulation, and ES6 features.
