JavaScript Fundamentals: A Complete Guide for Beginners

JavaScript is the programming language of the web, powering interactive websites and modern web applications. This comprehensive guide will take you from basic concepts to writing functional JavaScript code.

Table of Contents

1. Variables and Data Types
2. Functions and Scope
3. Objects and Arrays
4. Control Flow
5. Modern JavaScript Features
6. Practical Exercises

1. Variables and Data Types

JavaScript has several data types that you’ll work with regularly:

// Numbers
let age = 25;
const pi = 3.14159;

// Strings
let name = "John";
let greeting = `Hello, ${name}!`;

// Booleans
let isActive = true;
let isLoggedIn = false;

// Arrays
let colors = ["red", "green", "blue"];

// Objects
let user = {
  name: "John",
  age: 25,
  isAdmin: false
};

Variable Declaration

There are three ways to declare variables in JavaScript:

var oldWay = "Don't use this anymore";
let canBeReassigned = "Modern variable declaration";
const cantBeReassigned = "Use this for values that won't change";

2. Functions and Scope

Functions are reusable blocks of code:

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Arrow function
const add = (a, b) => a + b;

// Function with default parameters
function createUser(name, age = 18) {
  return {
    name,
    age
  };
}

3. Objects and Arrays

Working with Objects

const person = {
  name: "Jane",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

// Object methods
console.log(Object.keys(person));
console.log(Object.values(person));

Array Operations

const numbers = [1, 2, 3, 4, 5];

// Map
const doubled = numbers.map(n => n * 2);

// Filter
const evenNumbers = numbers.filter(n => n % 2 === 0);

// Reduce
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

4. Control Flow

Conditional Statements

if (age >= 18) {
  console.log("Adult");
} else if (age >= 13) {
  console.log("Teenager");
} else {
  console.log("Child");
}

// Switch statement
switch (fruit) {
  case "apple":
    console.log("Selected apple");
    break;
  case "banana":
    console.log("Selected banana");
    break;
  default:
    console.log("Unknown fruit");
}

Loops

// For loop
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// For...of loop (arrays)
for (const number of numbers) {
  console.log(number);
}

// For...in loop (objects)
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

5. Modern JavaScript Features

Destructuring

// Array destructuring
const [first, second] = numbers;

// Object destructuring
const { name, age } = person;

Spread Operator

// Array spread
const combined = [...numbers, 6, 7, 8];

// Object spread
const updatedPerson = {
  ...person,
  location: "New York"
};

6. Practical Exercises

Exercise 1: Array Manipulation

Create a function that filters an array of numbers and returns only even numbers:

function getEvenNumbers(numbers) {
  return numbers.filter(n => n % 2 === 0);
}

// Test
console.log(getEvenNumbers([1, 2, 3, 4, 5, 6])); // [2, 4, 6]

Exercise 2: Object Manipulation

Create a function that takes an array of objects and sorts them by a specific property:

function sortByProperty(array, property) {
  return array.sort((a, b) => {
    if (a[property] < b[property]) return -1;
    if (a[property] > b[property]) return 1;
    return 0;
  });
}

// Test
const users = [
  { name: "John", age: 30 },
  { name: "Alice", age: 25 },
  { name: "Bob", age: 35 }
];

console.log(sortByProperty(users, "age"));

Next Steps

Now that you understand the fundamentals, try these challenges:

1. Create a todo list application
2. Build a calculator
3. Implement a search function
4. Create a form validation system

Stay tuned for our next tutorial on Advanced JavaScript Concepts!

Continue to Advanced JavaScript →