Intermediate JavaScript: A Comprehensive Guide

Welcome back to Hatribytes! Now that you've mastered the basics of JavaScript, it's time to dive into some intermediate-level concepts. This guide will help you enhance your JavaScript skills with more advanced techniques.

1. Advanced Functions

Functions are a fundamental part of JavaScript. Let's explore some advanced concepts, such as arrow functions, default parameters, and rest parameters.

Arrow Functions:

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

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

Default Parameters:

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!
        

Rest Parameters:

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22
        

2. Objects and Object-Oriented Programming

JavaScript supports object-oriented programming. Let's explore object creation, classes, and inheritance.

Creating Objects:

// Using object literal
const person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet(); // Hello, my name is John
        

Classes and Inheritance:

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.
        

3. Asynchronous JavaScript

Asynchronous programming allows you to perform tasks without blocking the main thread. Let's explore callbacks, promises, and async/await.

Callbacks:

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Data fetched
});
        

Promises:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data); // Data fetched
});
        

Async/Await:

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 2000);
    });
}

async function getData() {
    const data = await fetchData();
    console.log(data); // Data fetched
}

getData();
        

4. Fetch API

The Fetch API provides an easy way to make HTTP requests. Let's see how to use it to fetch data from an API.

Fetching Data:

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
        

Async/Await with Fetch:

async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();
        

5. Handling Errors

It's important to handle errors in your code to prevent unexpected crashes. Let's see how to handle errors with try/catch blocks and promise catch methods.

Error Handling with Try/Catch:

function parseJSON(jsonString) {
    try {
        const data = JSON.parse(jsonString);
        console.log(data);
    } catch (error) {
        console.error('Error parsing JSON:', error);
    }
}

parseJSON('{"name":"John"}'); // { name: 'John' }
parseJSON('Invalid JSON'); // Error parsing JSON: SyntaxError: Unexpected token I in JSON at position 0
        

Error Handling with Promises:

fetch('https://jsonplaceholder.typicode.com/posts/invalid')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));
        

6. Conclusion

You've now learned some intermediate JavaScript techniques that will help you create more advanced and responsive web applications. Keep practicing and experimenting with these concepts to enhance your JavaScript skills further.

If you have any questions or need further assistance, feel free to leave a comment below. Happy coding!