Master JavaScript – From Beginner to Professional

JSCR

Master JavaScript

From Beginner to Professional

Build Your Web Development Career

Authored by William H. Simmons
Founder of A Few Bad Newbies LLC

JavaScript Professional Development Course

Module 1: JavaScript Basics

Chapter 1: Introduction to JavaScript

JavaScript is a programming language that adds interactivity to websites, running in the browser to manipulate HTML and CSS.

// Simple JavaScript statement
console.log("Hello, World!");

Common Mistakes

Forgetting semicolons at statement ends
Misspelling variable/function names
Using == instead of ===

Practice logging a message:

console.log("Your Name");

Chapter 2: Variables and Data Types

Variables store data values. JavaScript has several data types:

let name = "John"; // String
const age = 30; // Number
let isStudent = true; // Boolean
let hobbies = ["coding"]; // Array
let person = {name: "John"}; // Object

Pro Tip

Use const by default, let for reassignable variables, and avoid var.

Practice declaring a variable:

let greeting = "Hello, JS!";
console.log(greeting);

Chapter 3: Operators and Expressions

JavaScript supports various operators:

let sum = 10 + 5;
let isEqual = 10 === 10;
let isAdult = age > 18 && true;

Common Mistakes

Using = instead of ===
Mixing data types in operations

Practice an operator:

let x = 5;
console.log(x * 2);

Module 2: Control Flow

Chapter 1: Conditional Statements

Control execution with conditionals:

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

Pro Tip

Use === for strict equality to avoid type coercion.

Practice a conditional:

let score = 90;
if (score >= 80) {
    console.log("Pass");
}

Chapter 2: Switch Statements

Switch statements handle multiple conditions:

let day = "Monday";
switch (day) {
    case "Monday":
        console.log("Work week start");
        break;
    default:
        console.log("Other day");
}

Common Mistakes

Forgetting break statements
Not including a default case

Practice a switch:

let grade = "A";
switch (grade) {
    case "A":
        console.log("Great!");
        break;
}

Chapter 3: Loops

Loops execute code repeatedly:

for (let i = 0; i < 3; i++) {
    console.log(i);
}
let j = 0;
while (j < 3) {
    console.log(j);
    j++;
}

Pro Tip

Use for…of for arrays to simplify iteration.

Practice a loop:

for (let i = 0; i < 2; i++) {
    console.log("Loop");
}

Module 3: Functions

Chapter 1: Function Basics

Functions are reusable code blocks:

function greet(name) {
    return `Hello, ${name}!`;
}
const greetArrow = name => `Hello, ${name}!`;

Pro Tip

Arrow functions are concise and preserve lexical this.

Practice a function:

function sayHi() {
    console.log("Hi!");
}
sayHi();

Chapter 2: Parameters and Arguments

Functions can take parameters and return values:

function add(a, b = 0) {
    return a + b;
}
console.log(add(5));

Common Mistakes

Forgetting to return values
Misusing default parameters

Practice a default parameter:

function welcome(name = "Guest") {
    console.log(`Hi, ${name}!`);
}
welcome();

Chapter 3: Scope and Closures

Scope controls variable access; closures allow inner functions to access outer scope:

function outer() {
    let x = 10;
    return function() {
        console.log(x);
    };
}
const inner = outer();
inner();

Common Mistakes

Misunderstanding scope
Closure memory leaks

Practice a closure:

function counter() {
    let count = 0;
    return () => count++;
}
const inc = counter();
console.log(inc());

Module 4: Arrays and Objects

Chapter 1: Working with Arrays

Arrays are ordered collections with useful methods:

let arr = [1, 2];
arr.push(3);
let doubled = arr.map(x => x * 2);

Pro Tip

Use map and filter for functional programming.

Practice an array method:

let nums = [1, 2];
let evens = nums.filter(x => x % 2 === 0);
console.log(evens);

Chapter 2: Working with Objects

Objects store key-value pairs:

let person = {
    name: "Alice",
    age: 25
};
person.job = "Dev";
console.log(person.name);

Common Mistakes

Accessing undefined properties
Missing commas in object literals

Practice object manipulation:

let obj = {key: "value"};
console.log(obj.key);

Chapter 3: Destructuring and Spread

Destructuring and spread simplify data handling:

let [a, b] = [1, 2];
let obj = {x: 1};
let newObj = { ...obj, y: 2 };

Common Mistakes

Incorrect destructuring syntax
Using spread on non-iterables

Practice destructuring:

let {x} = {x: 5};
console.log(x);

Module 5: DOM Manipulation

Chapter 1: Selecting Elements

The DOM allows JavaScript to interact with HTML:

const elem = document.querySelector(".class");
const elems = document.querySelectorAll("div");

Pro Tip

Use querySelector for flexible CSS selector-based queries.

Practice selecting:

const div = document.querySelector("div");
console.log(div);

Chapter 2: Modifying Elements

Modify DOM elements’ content and styles:

const elem = document.querySelector("div");
elem.textContent = "New text";
elem.style.color = "blue";

Common Mistakes

Using innerHTML unsafely
Using hyphenated CSS properties

Practice modifying:

const p = document.querySelector("p");
p.textContent = "Updated";

Chapter 3: Event Handling

Handle user interactions with events:

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
    console.log("Clicked");
});

Common Mistakes

Not removing unused listeners
Using inline event handlers

Practice an event:

const btn = document.querySelector("button");
btn.addEventListener("click", () => console.log("Click"));

Module 6: Asynchronous JavaScript

Chapter 1: Callbacks

Callbacks handle async operations:

function fetchData(cb) {
    setTimeout(() => cb("Data"), 1000);
}
fetchData(data => console.log(data));

Common Mistakes

Callback hell (nested callbacks)
Not invoking callbacks

Practice a callback:

function process(cb) {
    cb("Done");
}
process(result => console.log(result));

Chapter 2: Promises

Promises simplify async handling:

const promise = new Promise((resolve) => {
    setTimeout(() => resolve("Data"), 1000);
});
promise.then(data => console.log(data));

Pro Tip

Always use catch to handle Promise errors.

Practice a Promise:

const p = new Promise((resolve) => resolve("OK"));
p.then(res => console.log(res));

Chapter 3: Async/Await

Async/await makes async code readable:

async function getData() {
    const data = await new Promise(r => r("Data"));
    console.log(data);
}
getData();

Common Mistakes

Forgetting await
Not using try/catch

Practice async/await:

async function fetch() {
    const res = await new Promise(r => r("Done"));
    console.log(res);
}
fetch();

Module 7: ES6+ Features

Chapter 1: Let and Const

let and const improve variable scoping:

let x = 1;
const y = 2;
if (true) {
    let x = 3; // Separate scope
}

Pro Tip

Use const for constants, let for variables.

Practice const:

const MAX = 100;
console.log(MAX);

Chapter 2: Template Literals

Template literals simplify string creation:

let name = "Bob";
let greeting = `Hi, ${name}!`;

Common Mistakes

Using quotes instead of backticks
Incorrect ${} syntax

Practice a template literal:

let user = "Alice";
console.log(`Hello, ${user}!`);

Chapter 3: Modules

ES6 modules organize code:

export const add = (a, b) => a + b;
import { add } from './math.js';

Common Mistakes

Missing type="module"
Incorrect import/export syntax

Practice an export:

export const say = () => "Hi";

Module 8: Error Handling

Chapter 1: Try/Catch

Handle errors with try/catch:

try {
    throw new Error("Fail");
} catch (e) {
    console.error(e.message);
}

Pro Tip

Use finally for cleanup code.

Practice try/catch:

try {
    let x = undefined.prop;
} catch (e) {
    console.log("Error");
}

Chapter 2: Custom Errors

Create custom error types:

class CustomError extends Error {
    constructor(msg) {
        super(msg);
        this.name = "CustomError";
    }
}
throw new CustomError("Fail");

Common Mistakes

Not setting error name
Throwing strings instead of Errors

Practice a custom error:

class MyError extends Error {
    constructor(msg) {
        super(msg);
    }
}
throw new MyError("Test");

Chapter 3: Error Handling Patterns

Effective error handling strategies:

function validate(data) {
    if (!data) throw new Error("Invalid");
}

Common Mistakes

Empty catch blocks
Vague error messages

Practice an error pattern:

try {
    validate(null);
} catch (e) {
    console.log("Caught");
}

Module 9: Functional Programming

Chapter 1: Pure Functions

Pure functions have no side effects:

function add(a, b) {
    return a + b;
}

Pro Tip

Pure functions are easier to test and debug.

Practice a pure function:

function multiply(x, y) {
    return x * y;
}
console.log(multiply(2, 3));

Chapter 2: Higher-Order Functions

Higher-order functions take/return functions:

function times(n) {
    return x => x * n;
}
const double = times(2);

Common Mistakes

Not returning functions
Mutating external state

Practice a higher-order function:

function addBy(n) {
    return x => x + n;
}
const add3 = addBy(3);
console.log(add3(5));

Chapter 3: Immutability

Immutability avoids modifying data in place:

const arr = [1, 2];
const newArr = [...arr, 3];

Common Mistakes

Accidental mutations
Misusing mutating methods

Practice immutability:

const obj = {a: 1};
const newObj = { ...obj, b: 2 };
console.log(newObj);

Module 10: Modern JavaScript Patterns

Chapter 1: Classes and OOP

Classes provide OOP in JavaScript:

class Person {
    constructor(name) {
        this.name = name;
    }
}

Pro Tip

Favor composition over deep inheritance.

Practice a class:

class Car {
    constructor(brand) {
        this.brand = brand;
    }
}
const car = new Car("Ford");
console.log(car.brand);

Chapter 2: Design Patterns

Common design patterns solve recurring issues:

const module = (function() {
    let x = 0;
    return { getX: () => x };
})();

Common Mistakes

Overusing patterns
Ignoring pattern trade-offs

Practice a module pattern:

const mod = (function() {
    let val = 1;
    return { get: () => val };
})();
console.log(mod.get());

Chapter 3: Performance Optimization

Optimize JavaScript performance:

function debounce(fn, delay) {
    let id;
    return () => {
        clearTimeout(id);
        id = setTimeout(fn, delay);
    };
}

Common Mistakes

Premature optimization
Not using requestAnimationFrame

Practice debouncing:

function log() { console.log("Log"); }
const debounced = debounce(log, 1000);
debounced();

JavaScript Career Paths

Front-End Developer

Build UIs with JavaScript and frameworks like React.

Salary Range: $70,000 – $140,000

Full-Stack Developer

Work on both front-end and back-end (Node.js) development.

Salary Range: $80,000 – $150,000

JavaScript Engineer

Specialize in complex JavaScript applications and architecture.

Salary Range: $90,000 – $160,000

Freelance Developer

Build websites and apps independently for clients.

Earnings Potential: $60,000 – $250,000+

Complete all modules and pass the final test!

Total Airdrop Points: 0

JavaScript Professional Development Course

Module 1: JavaScript Basics

Chapter 1: Introduction to JavaScript

Common Mistakes

Chapter 2: Variables and Data Types

Pro Tip

Chapter 3: Operators and Expressions

Common Mistakes

Module 2: Control Flow

Chapter 1: Conditional Statements

Pro Tip

Chapter 2: Switch Statements

Common Mistakes

Chapter 3: Loops

Pro Tip

Module 3: Functions

Chapter 1: Function Basics

Pro Tip

Chapter 2: Parameters and Arguments

Common Mistakes

Chapter 3: Scope and Closures

Common Mistakes

Module 4: Arrays and Objects

Chapter 1: Working with Arrays

Pro Tip

Chapter 2: Working with Objects

Common Mistakes

Chapter 3: Destructuring and Spread

Common Mistakes

Module 5: DOM Manipulation

Chapter 1: Selecting Elements

Pro Tip

Chapter 2: Modifying Elements

Common Mistakes

Chapter 3: Event Handling

Common Mistakes

Module 6: Asynchronous JavaScript

Chapter 1: Callbacks

Common Mistakes

Chapter 2: Promises

Pro Tip

Chapter 3: Async/Await

Common Mistakes

Module 7: ES6+ Features

Chapter 1: Let and Const

Pro Tip

Chapter 2: Template Literals

Common Mistakes

Chapter 3: Modules

Common Mistakes

Module 8: Error Handling

Chapter 1: Try/Catch

Pro Tip

Chapter 2: Custom Errors

Common Mistakes

Chapter 3: Error Handling Patterns

Common Mistakes

Module 9: Functional Programming

Chapter 1: Pure Functions

Pro Tip

Chapter 2: Higher-Order Functions

Common Mistakes

Chapter 3: Immutability

Common Mistakes

Module 10: Modern JavaScript Patterns

Chapter 1: Classes and OOP

Pro Tip

Chapter 2: Design Patterns

Common Mistakes

Chapter 3: Performance Optimization

Common Mistakes

JavaScript Career Paths

Front-End Developer

Full-Stack Developer

JavaScript Engineer

Freelance Developer

JavaScript Module Quiz

Quiz Results

JavaScript Certification Test

Certification Test Results