JavaScript Fundamentals – Day 1: Core Building Blocks
1. What is JavaScript (Short Context)
JavaScript is a programming language that makes web pages and applications dynamic — meaning they can respond to user actions, process data, and handle logic.
We’ll skip the web side for now and focus purely on the programming side: variables, data, loops, arrays, and objects.
2. Variables
What are Variables?
Variables are containers that hold data — like boxes that store values. You can change what's inside a box, or sometimes keep it constant.
Declaring Variables
There are three main ways to declare a variable:
var name = "Natnel"; // old style (avoid)
let age = 20; // modern, can change
const country = "Ethiopia"; // constant, cannot change
The Difference Between var , let , and const
Keyword Can Reassign Scope Notes
var Yes Function-scoped Avoid using
let Yes Block-scoped Use this for variables that change
Use for constants (doesn’t
const No Block-scoped
change)
Examples
let score = 10;
score = 15; // allowed
const pi = 3.14;
// pi = 3.1415; // error
3. Data Types
Every variable in JS has a data type . Here are the main ones:
Type Example Description
String "hello" Text
Number 25 , 3.14 Integers or decimals
Boolean true / false Logical values
Array [1, 2, 3] List of items
Object {name: "Natnel", age: 21} Key-value pairs
variable declared but not
Undefined
assigned
Null intentionally empty value
Type Example Description
Examples
let name = "Natnel"; // String
let age = 21; // Number
let isStudent = true; // Boolean
let hobbies = ["code", "football", "music"]; // Array
let person = { name: "Natnel", age: 21 }; // Object
let data; // Undefined
let nothing = null; // Null
4. Operators
Operators perform actions on variables and values.
Arithmetic Operators
Operator Example Result
+ 5 + 3 8
- 5 - 3 2
* 5 * 3 15
/ 10 / 2 5
% 10 % 3 1
** 2 ** 3 8
Comparison Operators
Operator Example Result
== 5 == "5" true
=== 5 === "5" false
!= 5 != 3 true
> 10 > 5 true
< 10 < 5 false
Always use === (strict equality) to avoid confusing results.
Logical Operators
Operator Meaning Example
&& and a && b
` ` or `a b`
!true →
! not
false
5. Arrays (Lists)
An array stores multiple values in one variable.
Creating an Array
let numbers = [1, 2, 3, 4];
let fruits = ["apple", "banana", "mango"];
Accessing Elements
[Link](fruits[0]); // apple
[Link](fruits[2]); // mango
Modifying Arrays
fruits[1] = "orange";
[Link](fruits); // ["apple", "orange", "mango"]
Adding and Removing
[Link]("kiwi"); // add at end
[Link]("grape"); // add at start
[Link](); // remove from end
[Link](); // remove from start
Sorting Arrays
By default, .sort() sorts alphabetically.
let nums = [10, 2, 30];
[Link](); // ["10", "2", "30"] (wrong)
[Link]((a, b) => a - b); // [2, 10, 30] (correct)
Looping Through Arrays
let colors = ["red", "green", "blue"];
for (let i = 0; i < [Link]; i++) {
[Link](colors[i]);
}
Or shorter:
[Link](color => [Link](color));
6. Objects (Dictionaries)
Objects store data as key-value pairs — useful for representing things with properties.
Creating an Object
let student = {
name: "Natnel",
age: 21,
country: "Ethiopia"
};
Accessing and Changing
[Link]([Link]); // Natnel
[Link] = 22;
[Link] = "CS"; // add new key
Looping Through Objects
for (let key in student) {
[Link](key + ": " + student[key]);
}
7. Loops
Loops help repeat code without rewriting it.
For Loop
for (let i = 1; i <= 5; i++) {
[Link]("Count: " + i);
}
While Loop
let i = 1;
while (i <= 5) {
[Link](i);
i++;
}
For...of Loop (for arrays)
let cars = ["BMW", "Audi", "Tesla"];
for (let car of cars) {
[Link](car);
}
For...in Loop (for objects)
let user = { name: "Natnel", age: 21 };
for (let key in user) {
[Link](key + ": " + user[key]);
}
8. Common Beginner Mistakes
1. Forgetting to declare variables
x = 10; // BAD
let x = 10; // GOOD
2. Using var instead of let or const
3. Using == instead of ===
[Link](5 == "5"); // true (wrong idea)
[Link](5 === "5"); // false (correct)
4. Misunderstanding array sorting
Always use compare functions when sorting numbers.
5. Accessing properties that don’t exist
let obj = {};
[Link]([Link]); // undefined, not error — but useless
6. Mixing data types in arrays
let data = [1, "two", true]; // works, but confusing
7. Forgetting return values in functions (covered later)
9. Golden Rules to Follow
Use const by default; use let only when the value changes.
Avoid global variables unless necessary.
Always write readable variable names ( totalScore , not ts ).
Test small parts of your code often in the console.
Keep your indentation clean — JS ignores it, but humans don’t.
Comment briefly to explain logic when necessary.
Don’t copy-paste — retype examples to build muscle memory.
Try using [Link]() everywhere when learning — it’s your debugger.
10. Practice Tasks
Task 1: Variables and Types
Create variables for your name, age, and hobby. Print them using one [Link]() statement.
Task 2: Array Operations
1. Create an array of 5 fruits.
2. Add a new fruit at the end.
3. Sort it.
4. Remove the first fruit.
5. Print all using a loop.
Task 3: Object Practice
Create an object car with brand , model , and year . Update the year and print all key-value pairs.
Task 4: Simple Loop
Write a for loop that prints numbers from 1 to 10 but skips 5 .
Summary
By the end of this part, you should be able to:
Declare variables properly with let and const
Work with all major data types
Understand arrays and objects
Use loops effectively
Avoid beginner mistakes