DEV Community: Pranav Tech

Comprehensive JavaScript Study Plan (80-20 Rule)

Pranav Tech — Mon, 27 Jan 2025 15:28:25 +0000

Focus on the 20% of concepts that power 80% of real-world projects. Master these fundamentals first, then expand through projects.

Core Learning (2 Weeks)

Daily Structure:

Morning: Study concepts (1–2 hours).
Afternoon: Practice exercises (1–2 hours).
Evening: Reflect, debug, and review (30 mins).

Week 1: Foundations

Day 1: Basics

Topics: Variables (let, const), data types (strings, numbers, booleans), operators (+, ===, !).
Resources: MDN JavaScript Basics, freeCodeCamp’s JS Syntax course.
Practice: Write code to calculate BMI or convert Celsius to Fahrenheit.

Day 2: Control Flow

Topics: Conditionals (if/else, switch), loops (for, while).
Resources: JavaScript.info Conditionals and Loops.
Practice: Solve FizzBuzz, print prime numbers.

Day 3: Functions

Topics: Function declarations, parameters, return, arrow functions, scope.
Resources: MDN Functions Guide.
Practice: Create a function to reverse a string or calculate factorials.

Day 4: DOM Manipulation

Topics: Select elements (querySelector), modify content (textContent, innerHTML), styles (classList).
Resources: freeCodeCamp DOM Manipulation Tutorial.
Practice: Build a button that changes page background color.

Day 5: Events

Topics: Event listeners (click, submit), event objects, preventDefault().
Resources: JavaScript.info Introduction to Events.
Practice: Create a toggle button for dark/light mode.

Day 6: Arrays

Topics: Array methods (push, pop, map, filter, forEach).
Resources: MDN Array Guide.
Practice: Filter even numbers from an array or sort names alphabetically.

Day 7: Review & Mini-Project

Review: Rebuild earlier exercises without referencing code.
Mini-Project: Simple counter app (increment/decrement buttons).

Week 2: Intermediate Concepts

Day 8: Objects

Topics: Object literals, methods, this keyword, destructuring.
Resources: JavaScript.info Objects Basics.
Practice: Create a user object with methods to update profile data.

Day 9: Asynchronous JS

Topics: Callbacks, promises, async/await, fetch().
Resources: MDN Asynchronous JavaScript.
Practice: Fetch data from JSONPlaceholder API and display titles.

Day 10: Error Handling

Topics: try/catch, throwing errors, debugging with console.
Resources: JavaScript.info Error Handling.
Practice: Add error handling to your API fetch code.

Day 11: ES6+ Features

Topics: Template literals, spread/rest operators, modules (import/export).
Resources: ES6 for Everyone (free course).
Practice: Refactor old code using ES6 syntax.

Day 12: Local Storage

Topics: localStorage, JSON.stringify(), JSON.parse().
Resources: MDN Web Storage API.
Practice: Save and retrieve user preferences (e.g., dark mode).

Day 13: Closures & Callbacks

Topics: Lexical scope, closure examples, higher-order functions.
Resources: MDN Closures.
Practice: Create a function factory (e.g., multiplier functions).

Day 14: Final Review & Prep for Projects

Review: Build a small app combining DOM, events, and localStorage.
Prep: Set up a project folder with HTML/CSS/JS files.

5 Projects to Apply & Expand Knowledge

Build these in order, increasing complexity and autonomy. Use documentation and Google to solve roadblocks.

1. To-Do List (Beginner)

Description: Add, delete, and mark tasks as complete.
Key Concepts:
- DOM manipulation (rendering tasks dynamically).
- Event handling (form submission, click events).
- Array methods (filter for deleting tasks).
- Local storage (persist tasks on reload).

2. Weather App (Intermediate)

Description: Fetch real-time weather data from an API (e.g., OpenWeatherMap).
Key Concepts:
- fetch() and async/await.
- Working with JSON data.
- Error handling for API failures.
- Dynamic DOM updates based on user input (city search).

3. Quiz Game (Intermediate+)

Description: Timed quiz with multiple-choice questions and a scoreboard.
Key Concepts:
- Object-oriented design (quiz and question classes).
- setInterval for timers.
- State management (tracking current question, score).
- Event delegation for answer buttons.

4. Budget Tracker (Advanced)

Description: Track income/expenses with charts (use Chart.js).
Key Concepts:
- Complex state (transactions, balance, categories).
- Integration with third-party libraries (Chart.js).
- Form validation and error feedback.
- Local storage for data persistence.

5. Full-Stack Bookstore (Advanced+)

Description: CRUD app with a Node.js/Express backend and vanilla JS frontend.
Key Concepts:
- REST API design (GET, POST, DELETE).
- Advanced async operations (frontend-backend communication).
- Modular code (separate API service module).
- Deployment basics (DigitalOcean, Netlify).

Tips for Success

Code Daily: Even 30 minutes reinforces muscle memory.
Break Problems Down: Use pseudocode to plan projects step-by-step.
Embrace Debugging: Learn to use console.log() and Chrome DevTools.
Refactor Ruthlessly: Improve code readability and efficiency after getting it working.

This plan balances structured learning with creative problem-solving. Start small, iterate often, and celebrate progress! 🚀

Javascript Hoisting

Pranav Tech — Sun, 12 Jan 2025 07:00:52 +0000

In JavaScript, you can use a variable before declaring it. This is called "hoisting". The declaration is moved to the top, so the variable is recognized even if it's used earlier.

In JavaScript, there are two types of hoisting:

Function Hoisting: Functions declared using the function keyword are "hoisted" to the top of their scope, allowing them to be called before they're defined.
Variable Hoisting: Variables declared using var are also "hoisted" to the top of their scope, but only the declaration is hoisted, not the assignment.

NOTE:

let and const variables are not hoisted in the same way as var variables. They are still hoisted, but they are not initialized until they are declared, so trying to access them before they are declared will result in a ReferenceError.

Function hoisting in JavaScript only works for:
Function declarations: Functions declared using the function keyword, like this: function myFunction() { ... }
It does not work for:
Function expressions: Functions assigned to a variable, like this: var myFunction = function() { ... }
Arrow functions: Functions declared using the arrow syntax, like this: var myFunction = () => { ... }
So, only plain function declarations are hoisted in JavaScript.

Variabel Hoisting Example:

// Using the variable before declaring it
console.log(x);  // Output: undefined

// Declaring the variable
var x = 10;

In this example, even though x is used before it's declared, the code doesn't throw an error. Instead, x is logged as undefined. This is because the variable declaration is hoisted to the top.

Function Hoisting Example:

// Calling the function before it's declared
myFunction();

// Declaring the function
function myFunction() {
console.log("Hello, world!");
}

// Output: "Hello, world!"

In this example, even though we call myFunction() before it's declared, the code still works because the function declaration is "hoisted" to the top of the scope.

then give me "Could include a quick "best practices" section" for it

Best Practices for Handling Hoisting in JavaScript

Declare Variables at the Top
Always declare variables at the beginning of their scope
Improves code readability
Prevents unexpected behavior from hoisting

function example() {
    // Recommended approach
    let x, y, z;

    // Rest of your code
}

Prefer let and const Over var
Use let and const for more predictable variable behavior
They have block scope and aren't hoisted in the same way as var
Helps prevent unintended variable access

// Recommended
let count = 10;
const MAX_SIZE = 100;

// Avoid
var unpredictableVariable;

Avoid Relying on Hoisting
Don't write code that depends on hoisting mechanics
Declare functions and variables before using them
Makes your code more explicit and easier to understand

// Good: Clear and predictable
function calculateTotal() {
    // Function logic
}

calculateTotal();

// Avoid: Relies on hoisting
calculateTotal(); // Risky

function calculateTotal() {
    // Function logic
}

Use Strict Mode
Enable 'use strict' to catch potential hoisting-related errors
Helps identify and prevent problematic code patterns

'use strict';

// Strict mode will throw errors for certain hoisting scenarios

Be Consistent with Function Declarations
Stick to function declarations for better predictability
Avoid mixing function declaration and expression styles

// Consistent and clear
function mainFunction() {
    function helperFunction() {
        // Logic
    }
}

Pro Tips

Always aim for code clarity

Understand hoisting, but don't rely on it as a coding technique

Write code that is self-explanatory and predictable