This course covers everything from the basics to advanced JavaScript concepts.

Todo List Application

Weather App

Expense Tracker

Memory Game

Simple Calculator

Form Validation

Real-time Chat Application

Quiz App

Recipe Finder

Portfolio Website

<h1>Introduction to JavaScript</h1><p>JavaScript is a versatile, lightweight, and interpreted programming language, primarily used for web development. It allows you to create dynamic and interactive web content. JavaScript is client-side, but with Node.js, it can also run server-side applications.</p><h2>JavaScript in HTML</h2><p>JavaScript code is written within HTML files using the <code>&lt;script&gt;</code> tag.</p><h2>Basic Example</h2><pre><code class='language-js'>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;h2&gt;JavaScript Example&lt;/h2&gt;
  &lt;p&gt;Click the button to see JavaScript in action!&lt;/p&gt;
  &lt;button onclick="myFunction()"&gt;Click Me!&lt;/button&gt;
  &lt;script&gt;
    function myFunction() {
      alert('Hello, world!');
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h2>Key Features of JavaScript</h2><ul><li><strong>Interpreted Language:</strong> JavaScript does not need a compiler, making it faster to develop and test.</li><li><strong>Event-Driven:</strong> JavaScript can respond to user actions (like mouse clicks or keyboard input).</li><li><strong>Dynamic Typing:</strong> You don't need to declare types; JavaScript determines variable types on the fly.</li></ul>

Introduction to JavaScript

<h1>JavaScript Variables and Data Types</h1><p>Variables in JavaScript store data values, and they can be declared using <code>var</code>, <code>let</code>, or <code>const</code>. Variables can hold different types of values, including numbers, strings, objects, and arrays.</p><h2>Declaring Variables</h2><pre><code class='language-js'>let myNumber = 10; // Number<br>const myString = 'Hello'; // String<br>var myBool = true; // Boolean<br></code></pre><h2>JavaScript Data Types</h2><p>JavaScript supports several data types, broadly categorized into primitive and non-primitive types.</p><h3>Primitive Types:</h3><ul><li><strong>Number:</strong> Represents numeric values. Example: <code>let x = 42;</code></li><li><strong>String:</strong> Represents sequences of characters. Example: <code>let str = 'Hello';</code></li><li><strong>Boolean:</strong> Represents logical true/false. Example: <code>let isTrue = true;</code></li><li><strong>Undefined:</strong> A variable that is declared but not initialized. Example: <code>let a;</code></li><li><strong>Null:</strong> Represents an empty or non-existent value.</li><li><strong>Symbol:</strong> A unique identifier, often used in advanced cases like object property keys.</li></ul><h3>Non-Primitive Types:</h3><ul><li><strong>Objects:</strong> Collections of key-value pairs. Example: <code>let obj = {name: 'John', age: 30};</code></li><li><strong>Arrays:</strong> Lists of values. Example: <code>let arr = [1, 2, 3, 4];</code></li></ul>

JavaScript Variables and Data Types

<h1>JavaScript Functions</h1><p>A JavaScript function is a block of code designed to perform a particular task. Functions are one of the fundamental building blocks of JavaScript applications. They allow code reuse and organization.</p><h2>Defining Functions</h2><p>Functions are defined using the <code>function</code> keyword, followed by a name and parameters in parentheses. The code block to be executed is written within curly braces.</p><pre><code class='language-js'>function greet(name) {
  console.log('Hello ' + name);
}

// Calling the function
 greet('John'); // Output: Hello John</code></pre><h2>Arrow Functions</h2><p>Arrow functions are a more concise way to write functions in JavaScript. They use the <code>=&gt;</code> syntax and do not require the <code>function</code> keyword.</p><pre><code class='language-js'>const greet = (name) => {
  console.log('Hello ' + name);
};

// Calling the arrow function
greet('Sarah'); // Output: Hello Sarah</code></pre><h2>Function Scope</h2><p>Functions can access variables declared in their own scope and in the outer scope (lexical scoping). However, variables declared inside a function are not accessible outside.</p><h3>Example of Function Scope</h3><pre><code class='language-js'>let x = 10; // Global scope

function printX() {
  let y = 5; // Local scope
  console.log(x); // Accessing global variable
  console.log(y); // Accessing local variable
}

printX(); // Output: 10 and 5
console.log(y); // Error: y is not defined</code></pre>

JavaScript Functions

<h1>JavaScript Promises and Async/Await</h1><p>Promises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They allow for better handling of asynchronous code, replacing callback hell.</p><h2>Creating a Promise</h2><pre><code class='language-js'>const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Promise fulfilled!');
    } else {
      reject('Promise rejected!');
    }
  }, 2000);
});</code></pre><h2>Handling Promises with <code>.then()</code> and <code>.catch()</code></h2><pre><code class='language-js'>myPromise.then((result) => {
  console.log(result); // Output: Promise fulfilled!
}).catch((error) => {
  console.log(error); // Output: Promise rejected!
});</code></pre><h2>Async/Await Syntax</h2><p>The <code>async</code> and <code>await</code> keywords make working with promises more readable. An <code>async</code> function returns a promise, and the <code>await</code> keyword is used to wait for a promise to resolve.</p><pre><code class='language-js'>async function fetchData() {
  try {
    const data = await myPromise;
    console.log(data); // Output: Promise fulfilled!
  } catch (error) {
    console.log(error); // Handle error
  }
}
fetchData();</code></pre>

JavaScript Promises and Async/Await

<h1>JavaScript Closures</h1><p>A closure is a function that retains access to variables from its parent scope, even after the parent function has closed. Closures allow for data privacy and can be used to create private variables.</p><h2>Basic Closure Example:</h2><pre><code class='language-javascript'>function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    }
}

const closureExample = outer();
closureExample(); // Output: 1
closureExample(); // Output: 2</code></pre><h2>Why Use Closures?</h2><p>Closures provide encapsulation of variables and prevent external code from modifying private data. This is useful for data hiding and ensuring controlled access to variables.</p><h2>Advanced Use Cases:</h2><ul><li><strong>Callback Functions:</strong> Closures are often used in callback functions, particularly in asynchronous code.</li><li><strong>Module Patterns:</strong> Closures can create modules that expose public methods but keep variables private.</li></ul>

JavaScript Closures

<h1>JavaScript Asynchronous Programming with async/await</h1><p>The <code>async</code> and <code>await</code> keywords make handling asynchronous code more readable and efficient by eliminating the need for chained promises. <code>async</code> functions return a Promise, and <code>await</code> pauses the execution until the Promise is resolved.</p><h2>Basic Example:</h2><pre><code class='language-javascript'>async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}
fetchData();</code></pre><h2>Error Handling with async/await:</h2><p>Error handling in async functions is more intuitive using try/catch blocks compared to traditional promise-based syntax. This results in cleaner and more maintainable code.</p><h2>Combining async/await with Promise.all():</h2><pre><code class='language-javascript'>async function getMultipleData() {
    const [data1, data2] = await Promise.all([
        fetch('https://api.example.com/data1'),
        fetch('https://api.example.com/data2')
    ]);
    console.log(await data1.json(), await data2.json());
}</code></pre>

JavaScript Asynchronous Programming with async/await

<h1>JavaScript Classes</h1><p>JavaScript classes, introduced in ES6, are a blueprint for creating objects. They simplify the creation of complex objects by encapsulating data and methods into a single unit.</p><h2>Basic Syntax:</h2><pre><code class='language-javascript'>class Car {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }
    displayDetails() {
        console.log(`${this.year} ${this.make} ${this.model}`);
    }
}
const myCar = new Car('Toyota', 'Camry', 2021);
myCar.displayDetails(); // Output: 2021 Toyota Camry</code></pre><h2>Inheritance in Classes:</h2><p>JavaScript classes support inheritance, allowing new classes to derive properties and methods from existing ones. This enables code reuse and logical hierarchy.</p><pre><code class='language-javascript'>class ElectricCar extends Car {
    constructor(make, model, year, batteryLife) {
        super(make, model, year);
        this.batteryLife = batteryLife;
    }
    displayBattery() {
        console.log(`Battery Life: ${this.batteryLife} hours`);
    }
}
const tesla = new ElectricCar('Tesla', 'Model S', 2022, 12);
tesla.displayDetails(); // Output: 2022 Tesla Model S
tesla.displayBattery(); // Output: Battery Life: 12 hours</code></pre>

JavaScript Classes

<h1>JavaScript Event Loop and Concurrency</h1><p>JavaScript is single-threaded, meaning it can execute only one task at a time. However, it handles asynchronous operations efficiently using the event loop, allowing for concurrent execution without blocking the main thread.</p><h2>The Event Loop:</h2><p>The event loop is a mechanism that continuously checks if the call stack is empty, then executes tasks from the message queue. This enables asynchronous callbacks like <code>setTimeout()</code> and <code>fetch()</code> to run after synchronous code finishes.</p><h2>Example of Event Loop in Action:</h2><pre><code class='language-javascript'>console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
console.log('End');
// Output:
// Start
// End
// Timeout</code></pre><p>Here, <code>setTimeout</code> is pushed to the event queue and is executed after the synchronous code in the call stack finishes.</p><h2>Understanding Concurrency:</h2><p>JavaScript can perform multiple tasks asynchronously by delegating operations like HTTP requests and timers to the browser, which sends the results back to JavaScript through the event loop.</p>

JavaScript Event Loop and Concurrency

<h1>JavaScript Prototypes and Inheritance</h1><p>JavaScript is a prototype-based language, meaning objects inherit properties and methods from other objects through a chain known as the prototype chain.</p><h2>Prototype Basics:</h2><p>Each JavaScript object has a hidden property called <code>__proto__</code> that points to the prototype of the object's constructor function. This enables inheritance and method sharing among objects.</p><h2>Example of Prototype Inheritance:</h2><pre><code class='language-javascript'>function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John', 25);
john.sayHello();  // Output: Hello, my name is John</code></pre><h2>Understanding the Prototype Chain:</h2><p>In the example above, the <code>sayHello</code> method is not directly attached to the <code>john</code> object, but JavaScript looks up the prototype chain to find it in <code>Person.prototype</code>.</p><h2>ES6 Classes and Prototypes:</h2><p>JavaScript's class syntax is syntactic sugar over prototypes. Even with classes, inheritance still works via prototypes behind the scenes.</p>

JavaScript Prototypes and Inheritance

<h1>JavaScript Higher-Order Functions</h1><p>A higher-order function is a function that either takes another function as an argument or returns a function as its result. Higher-order functions are a powerful tool in JavaScript, allowing for more abstract and flexible code.</p><h2>Examples of Higher-Order Functions:</h2><pre><code class='language-javascript'>function higherOrder(fn) {
    return function(x) {
        return fn(x) * 2;
    };
}

const double = higherOrder(num => num + 1);
console.log(double(5)); // Output: 12</code></pre><h2>Common JavaScript Higher-Order Functions:</h2><ul><li><code>map()</code>: Transforms an array by applying a function to each element.</li><li><code>filter()</code>: Filters elements of an array based on a condition.</li><li><code>reduce()</code>: Accumulates values in an array based on a function.</li></ul><h2>Using Higher-Order Functions in Practice:</h2><pre><code class='language-javascript'>const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const evens = numbers.filter(x => x % 2 === 0);
const sum = numbers.reduce((acc, val) => acc + val, 0);

console.log(doubled);  // Output: [2, 4, 6, 8, 10]
console.log(evens);    // Output: [2, 4]
console.log(sum);      // Output: 15</code></pre>

JavaScript Higher-Order Functions

<h1>JavaScript Modules and Imports</h1><p>Modules in JavaScript allow you to split your code into smaller, reusable chunks. This promotes better organization and separation of concerns. ES6 introduced native support for modules with the <code>import</code> and <code>export</code> syntax.</p><h2>Exporting and Importing:</h2><pre><code class='language-javascript'>// In file math.js
export function add(x, y) {
    return x + y;
}
export const PI = 3.14159;

// In another file
import { add, PI } from './math';
console.log(add(2, 3));  // Output: 5
console.log(PI);         // Output: 3.14159</code></pre><h2>Default Exports:</h2><p>A module can have only one default export, which is useful when the module exports a single entity.</p><pre><code class='language-javascript'>// In file greetings.js
export default function greet(name) {
    console.log(`Hello, ${name}`);
}

// In another file
import greet from './greetings';
greet('John');  // Output: Hello, John</code></pre><h2>Benefits of Modules:</h2><p>Using modules in JavaScript promotes code reusability, easier maintenance, and better scalability. Modules also prevent variable name clashes by encapsulating code within their own scope.</p>

JavaScript Modules and Imports

<h1>JavaScript Error Handling</h1><p>Errors are inevitable in any program, and handling them effectively is crucial for building robust applications. JavaScript provides several mechanisms for error handling, such as <code>try</code>, <code>catch</code>, and <code>finally</code>.</p><h2>Basic Error Handling:</h2><pre><code class='language-javascript'>try {
    const result = someUndefinedFunction();
} catch (error) {
    console.error('An error occurred:', error);
} finally {
    console.log('This block executes no matter what.');
}</code></pre><p>In this example, the code in the <code>try</code> block attempts to execute a function that doesn't exist, triggering the <code>catch</code> block, where the error is logged.</p><h2>Throwing Errors:</h2><p>You can also manually throw errors using the <code>throw</code> keyword.</p><pre><code class='language-javascript'>function divide(a, b) {
    if (b === 0) {
        throw new Error('Division by zero is not allowed');
    }
    return a / b;
}

try {
    divide(4, 0);
} catch (error) {
    console.error(error.message);  // Output: Division by zero is not allowed
}</code></pre><h2>Asynchronous Error Handling:</h2><p>When dealing with asynchronous code, error handling must be done using <code>.catch()</code> with promises or with <code>try</code>/<code>catch</code> in async functions.</p>

JavaScript Error Handling

<h1>JavaScript Destructuring and Spread Operator</h1><p>Destructuring allows us to unpack values from arrays or properties from objects into distinct variables. The spread operator, <code>...</code>, enables us to expand iterable elements like arrays or object properties into individual components.</p><h2>Array Destructuring:</h2><pre><code class='language-javascript'>const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first, second);  // Output: 1 2</code></pre><h2>Object Destructuring:</h2><pre><code class='language-javascript'>const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age);  // Output: Alice 25</code></pre><h2>Spread Operator:</h2><p>The spread operator allows us to clone, merge, or expand elements into new arrays or objects.</p><pre><code class='language-javascript'>const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5];
console.log(array2);  // Output: [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2);  // Output: { a: 1, b: 2, c: 3 }</code></pre><h2>Combining Destructuring and Spread:</h2><pre><code class='language-javascript'>const [firstElement, ...rest] = [10, 20, 30];
console.log(firstElement);  // Output: 10
console.log(rest);  // Output: [20, 30]</code></pre>

JavaScript Destructuring and Spread Operator

<h1>JavaScript Set and Map</h1><p><code>Set</code> and <code>Map</code> are new collections introduced in ES6 that allow for the storage of unique values and key-value pairs, respectively.</p><h2>Working with Set:</h2><p>A <code>Set</code> is a collection of unique values where each value can only occur once.</p><pre><code class='language-javascript'>const mySet = new Set([1, 2, 3, 3]);
mySet.add(4);
mySet.delete(2);
console.log(mySet);  // Output: Set { 1, 3, 4 }</code></pre><h2>Working with Map:</h2><p>A <code>Map</code> holds key-value pairs where keys can be of any type, including objects and functions.</p><pre><code class='language-javascript'>const myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
console.log(myMap.get('name'));  // Output: John
myMap.delete('age');
console.log(myMap);  // Output: Map { 'name' => 'John' }</code></pre><h2>Iterating over Sets and Maps:</h2><pre><code class='language-javascript'>const set = new Set(['a', 'b', 'c']);
set.forEach(value => console.log(value));

const map = new Map([['name', 'Alice'], ['age', 25]]);
map.forEach((value, key) => console.log(`${key}: ${value}`));</code></pre>

JavaScript Set and Map

<h1>JavaScript Generators</h1><p>Generators are special types of functions that can pause execution and later resume from where they left off. They are defined using the <code>function*</code> syntax and yield values instead of returning them.</p><h2>Creating a Generator:</h2><pre><code class='language-javascript'>function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = myGenerator();
console.log(gen.next());  // Output: { value: 1, done: false }
console.log(gen.next());  // Output: { value: 2, done: false }
console.log(gen.next());  // Output: { value: 3, done: false }
console.log(gen.next());  // Output: { value: undefined, done: true }</code></pre><h2>Use Cases for Generators:</h2><p>Generators are useful in managing asynchronous code, creating infinite sequences, and building iterators. They allow more fine-grained control over the function's execution flow.</p><h2>Example: Infinite Generator:</h2><pre><code class='language-javascript'>function* infiniteSequence() {
    let i = 0;
    while (true) {
        yield i++;
    }
}
const infiniteGen = infiniteSequence();
console.log(infiniteGen.next().value);  // Output: 0
console.log(infiniteGen.next().value);  // Output: 1
console.log(infiniteGen.next().value);  // Output: 2</code></pre>

JavaScript Generators

A complete guide to JavaScript for beginners and advanced developers.

LearnCodePro

Master JavaScript from Scratch

Course Highlights

Course Details

Chapter Covered

Course Summary

Enroll Now