Programming in the Small 2: Working with Functions, Loops, and Arrays in JavaScript
A hands-on continuation of “Getting Started with JavaScript Using Node.js or Bun,” diving deeper into functions, loops, and arrays — the real building blocks of programming logic.
dogunfx
In the first post, “Getting Started with JavaScript Using Node.js or Bun”, we learned how to run JavaScript outside the browser and explored variables, data types, and basic syntax.
Now, we’ll move one level deeper — understanding how to organize code into functions, repeat actions using loops, and work with arrays to store and process lists of data.
These three skills form the foundation of logic in every program you’ll ever write.
1. Functions — Reusable Building Blocks
Functions let you group instructions into reusable actions.
Defining a Function
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Dogunfx");
Output:
Hello, Dogunfx!
Returning Values
Functions can also return data instead of just printing it.
function add(a, b) {
return a + b;
}
let sum = add(10, 5);
console.log(sum); // 15
Arrow Functions (Modern Syntax)
const multiply = (x, y) => x * y;
console.log(multiply(4, 3)); // 12
Arrow functions are concise and common in modern JavaScript — especially when working with arrays and callbacks.
Default Parameters
You can give default values to parameters:
function welcome(name = "Guest") {
console.log(`Welcome, ${name}!`);
}
welcome(); // Welcome, Guest!
2. Loops — Repeating Actions
Loops allow you to perform an action multiple times without writing duplicate code.
For Loop
for (let i = 1; i <= 5; i++) {
console.log("Count:", i);
}
Output:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
While Loop
let count = 0;
while (count < 3) {
console.log("Hello", count);
count++;
}
For...of Loop (Perfect for Arrays)
const names = ["Ada", "Linus", "Grace"];
for (const n of names) {
console.log("Hi,", n);
}
For...in Loop (For Object Keys)
const user = { name: "Dogunfx", role: "Developer", age: 25 };
for (const key in user) {
console.log(key, "=", user[key]);
}
3. Arrays — Managing Lists of Data
Arrays store multiple values in a single variable.
Creating Arrays
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple
Adding or Removing Items
fruits.push("Orange"); // Add to end
fruits.unshift("Pineapple"); // Add to start
fruits.pop(); // Remove last
fruits.shift(); // Remove first
console.log(fruits);
Looping Over Arrays
const numbers = [1, 2, 3, 4, 5];
for (let n of numbers) {
console.log(n * 2);
}
Using forEach()
numbers.forEach((n) => console.log(n * 3));
Transforming with map()
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
Filtering with filter()
const even = numbers.filter((n) => n % 2 === 0);
console.log(even); // [2, 4]
Summing with reduce()
const total = numbers.reduce((sum, n) => sum + n, 0);
console.log(total); // 15
4. Combining It All Together
Let’s build a small script that calculates the average score of students.
function average(scores) {
const total = scores.reduce((sum, s) => sum + s, 0);
return total / scores.length;
}
const students = ["Ada", "Linus", "Grace"];
const scores = [90, 85, 95];
for (let i = 0; i < students.length; i++) {
console.log(`${students[i]} scored ${scores[i]}`);
}
console.log("Class Average:", average(scores));
Output:
Ada scored 90
Linus scored 85
Grace scored 95
Class Average: 90
5. Why This Matters
Functions, loops, and arrays are the core logic tools of every language — not just JavaScript.
- Functions = reusable actions
- Loops = repetition without duplication
- Arrays = structure for data
Understanding these well will make it easy to learn more advanced topics like objects, callbacks, asynchronous code, and APIs later on.
6. Practice Challenge 💪
Try this small challenge on your own:
Task: Write a program that prints all even numbers from 1 to 20 and stores them in an array.
Bonus: Calculate their total sum using reduce().
7. Next Up
In the next post, we’ll explore objects, JSON, and APIs — learning how data moves between your frontend, backend, and database.
📘 References:
Programming in the Small 3: Objects, JSON, and APIs in JavaScript
A practical guide to JavaScript objects, working with JSON, and calling APIs (Node.js/Bun) — how data flows between frontend, backend, and a database.
React vs Vue: The Battle for the Frontend
A deep dive into the two most popular JavaScript frontend libraries—React and Vue. We’ll explore their philosophies, ecosystems, and why both continue to dominate modern web development.