JavaScript
Completed
-
Section 1: Getting Started
-
Section 2: Core Syntax and Types
-
Section 3: Strings and Numbers in Depth
-
Section 4: Control Flow
-
Section 5: Functions
-
Section 6: Objects and Arrays
-
Section 7: Maps, Sets, and Symbols
-
Section 8: Asynchronous JavaScript
-
Section 9: Object-Oriented and Prototypes
-
Section 10: The DOM
-
Section 11: Browser APIs
-
Section 12: Modern JavaScript (ES2015-ES2025)
-
Section 13: Functional Programming Patterns
-
Section 14: Error Handling and Debugging
-
Section 15: Testing
-
Section 16: Accessibility for JavaScript Developers
-
Section 17: Internationalization and Localization
-
Section 18: Performance
-
Section 19: Node.js Fundamentals
-
Section 20: Regular Expressions
-
Section 21: Design Patterns in JavaScript
-
Section 22: Security Basics
-
Section 23: Data Structures and Algorithms in JavaScript
-
Section 24: Practical Projects
-
Section 25: More Advanced Async Patterns
-
Section 26: More Object and Class Practice
-
Section 27: Working with Dates and Internationalization
-
Section 28: Web Components
-
Section 29: More DOM and Browser Practice
-
Section 30: Build Tooling for Vanilla JavaScript
-
Section 31: More Practice Projects
-
Section 32: Interview and Algorithm Practice
-
Section 33: Error Objects (MDN Reference)
-
Section 34: TypedArrays and Binary Data
-
Section 35: Reflection and Metaprogramming (MDN Reference)
-
Section 36: More Global Functions (MDN Reference)
203: The Date Object in Depth
Think of the JavaScript Date object not as a calendar, but as a giant, relentless stopwatch that started ticking exactly at midnight on January 1, 1970. This moment is known as the "Unix Epoch." Everything we do with dates in JS is essentially just asking that stopwatch, "Exactly how many milliseconds have passed since that moment?" and then doing some complex math to translate those milliseconds back into something a human can understand, like "Tuesday afternoon in October."
Here is how that analogy maps to the actual code you'll be writing:
- The Stopwatch Total: This is the "timestamp." When you call
Date.now(), you're just looking at the current raw number of milliseconds. - The Display Dial: When you create a
new Date()object, you're putting a "face" on that number, allowing you to ask for the year, month, or day specifically. - Adjusting the Hands: Using methods like
setFullYear()is like manually winding the stopwatch forward or backward to a specific point in time.
Slicing the Time into Pieces
Once you have a Date object, you rarely want the raw millisecond count. You usually want a specific piece of the date. I'll use a common real-world scenario: checking if a user's subscription has expired.
const expiryDate = new Date('2024-12-31T23:59:59');
const today = new Date();
console.log(expiryDate.getFullYear()); // 2024
console.log(expiryDate.getDate()); // 31 (The day of the month)
console.log(expiryDate.getDay()); // 3 (The day of the week, where 0 is Sunday)
Notice the difference between getDate() and getDay(). I've seen plenty of juniors mix these up. getDate() is the number on the calendar; getDay() is the index of the week. If you use the wrong one, your logic for "Weekend Specials" is going to be very broken.
The Zero-Indexed Month Headache
Here is the part of the Date object that drives everyone crazy: months are zero-indexed. January is 0, February is 1, and December is 11. I don't know why it was designed this way, but you just have to accept it. If you're building a date picker and you forget to add 1 to the month value before displaying it to the user, your users will think they've traveled back in time one month.
const event = new Date(2024, 9, 15); // This is OCTOBER 15, not September.
console.log(event.getMonth()); // 9
Calculating Time Gaps
Since everything boils down to milliseconds, the easiest way to find the difference between two dates is to subtract them. When you subtract one Date object from another, JavaScript automatically converts them to their raw millisecond timestamps.
Let's say you're building a "Days until launch" counter. You can't just subtract the "day" numbers because months have different lengths. Instead, subtract the whole objects:
const launchDate = new Date('2025-01-01');
const now = new Date();
const diffInMs = launchDate - now;
const diffInDays = Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
console.log(`Only ${diffInDays} days left until the big release!`);
I always use Math.ceil() here because if there are 2.1 days left, it's technically the 3rd day of the countdown. It's a small detail, but it makes the UI feel more intuitive.
📋 Practical Task
Build a Trial Period Expiry Calculator
You are building a feature for a SaaS application. Your task is to create a script that calculates when a user's 14-day free trial expires based on the date they signed up.
Requirements:
- Create a constant
signupDateusing a specific date (e.g.,new Date('2023-11-10')). - Create a second Date object called
expiryDatethat is exactly 14 days after the signup date. (Hint: UsegetDate()to find the current day andsetDate()to add 14 to it). - Log a message to the console in this exact format:
"Your trial started on [Month] [Day] and will expire on [Month] [Day]." - Crucial: Ensure the months are displayed as human-readable numbers (1-12), not zero-indexed (0-11).
There are no comments for now.