🔍 How JavaScript REALLY executes your code — a quick breakdown Most of us write JS every day, but rarely think about what happens before our code runs. Here's the journey V8 takes with every JS file: 1. Tokenization — raw text is broken into tokens (keywords, literals, operators) 2. AST Generation — tokens form an Abstract Syntax Tree, a hierarchical map of your code's structure 3. Ignition (Bytecode) — the AST is compiled into bytecode. Code starts running immediately — no need to wait for full machine code compilation 4. TurboFan (Machine Code) — hot functions (called repeatedly) get compiled into optimized native machine code But here's the part that matters for performance 👇 If TurboFan assumes a function always receives a number, and suddenly you pass a string — it deoptimizes. Falls back to the interpreter. Your any types in TypeScript aren't just a code smell — they're a V8 performance problem. And then there's the Event Loop: Call Stack → Microtask Queue → Task Queue Promises resolve before setTimeout, always Microtasks spawning microtasks can starve your render pipeline — real cause of UI freezes you can't explain Small things compound at platform scale. #JavaScript #WebPerformance #FrontendEngineering #StaffEngineer #V8 #PlatformEngineering
V8 JavaScript Execution Breakdown: Tokenization to TurboFan
More Relevant Posts
-
flat vs flatMap flat: 1* Used to "flatten" nested array. 2* By default, .flat() only goes one level deep. Using Infinity it goes to all levels 3* flat(depth) flatMap: 1* It is a combination of .map() followed by .flat(1). 2* It’s more efficient than doing a map and a flat separately because it only iterates through the list once. 3* flatMap(callback) const flatFunc = (list) => { return list.flat(Infinity) }; console.log(flatFunc([1,2,3,[4,[5,[6]]]])); // [ 1, 2, 3, 4, 5, 6 ] const flatMapFunc = (list) => { return list.flatMap((item) => item.split(" ")) } console.log(flatMapFunc(["Hello JavaScript", "Hey TypeScript"])); //[ 'Hello', 'JavaScript', 'Hey', 'TypeScript' ] #JavaScript #WebDev #CodingTips #Frontend #SoftwareEngineering #LearnToCode #JSShorts #Programming #100DaysOfCode #CleanCode #WebDevelopment #JavaScriptDeveloper #TechTips #MaheshCheema
To view or add a comment, sign in
-
-
I once spent hours debugging something that made no sense. The code looked correct. The logic was simple. But the console logs were appearing in a strange order. Something like this: Promise 𝗿𝗲𝘀𝗼𝗹𝘃𝗲𝗱 Then 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁 Then another log I expected earlier. That’s when I discovered something many JavaScript developers overlook: Not all async tasks are treated the same. Some go to the 𝗺𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗾𝘂𝗲𝘂𝗲. Some go to the 𝗺𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗾𝘂𝗲𝘂𝗲. And JavaScript always clears microtasks first before moving to the next macrotask. That’s why: Promises, 𝗾𝘂𝗲𝘂𝗲𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸, 𝗠𝘂𝘁𝗮𝘁𝗶𝗼𝗻𝗢𝗯𝘀𝗲𝗿𝘃𝗲𝗿 run earlier. While things like: 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁, 𝘀𝗲𝘁𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹, 𝗗𝗢𝗠 𝗲𝘃𝗲𝗻𝘁𝘀 wait for the next event loop cycle. Once I understood this, a lot of 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝘀 𝘄𝗲𝗶𝗿𝗱 moments stopped being weird. They were just the event loop doing exactly what it was designed to do. Sometimes the bug isn’t in the code. It’s in our 𝗺𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗲𝗹 of how the runtime works. #JavaScript #EventLoop #FrontendEngineering #SoftwareEngineering
To view or add a comment, sign in
-
Day 8 of “Js in bits series – (datatypes - Objects & Symbols)” Here are a few concepts covered in the article: 🔹 Why objects are the backbone of JavaScript 🔹 How objects store key-value pairs to structure data 🔹 What Symbol is and why it was introduced in ES6 🔹 How symbols help create unique property keys and avoid naming collisions #javascript #webdevelopment #frontend #softwareengineering #coding #learning
To view or add a comment, sign in
-
-
💻 𝗦𝘁𝗶𝗹𝗹 𝘂𝘀𝗶𝗻𝗴 𝗼𝗻𝗹𝘆 𝗰𝗼𝗻𝘀𝗼𝗹𝗲.𝗹𝗼𝗴()? 𝗬𝗼𝘂'𝗿𝗲 𝗱𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝘁𝗵𝗲 𝗵𝗮𝗿𝗱 𝘄𝗮𝘆. Ever struggled with messy logs or figuring out where your function was called from? JavaScript gives you much better tools 👇 🔹 𝗕𝗮𝘀𝗶𝗰 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 console.log(user); console.error("Error occurred"); console.warn("Deprecated API"); 🔹 𝗕𝗲𝘁𝘁𝗲𝗿 𝗩𝗶𝘀𝘂𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 console.table(users); 🔹 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗧𝗿𝗮𝗰𝗸𝗶𝗻𝗴 console.time("API"); // call API console.timeEnd("API"); 🔹 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝗱 𝗟𝗼𝗴𝘀 console.group("User"); console.log(user.name); console.groupEnd(); 🔹 𝗧𝗿𝗮𝗰𝗲 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 console.trace(); 🔥 𝗣𝗿𝗼 𝗧𝗶𝗽: Use console.table() for API responses — it makes debugging 10x cleaner. 🚀 Debug smarter, not harder. 💬 Which console method do you use the most? #JavaScript #WebDevelopment #Debugging #Frontend #CodingTips
To view or add a comment, sign in
-
-
TypeScript beyond the basics — the patterns that actually matter in large codebases. 🔷 Most engineers know types. Fewer know how to design with them. 🧬 Generics are not just "flexible types" They preserve the relationship between input and output. any → tells TypeScript to stop checking T → track this, enforce this, follow it everywhere These are fundamentally different contracts. 🔒 Generic constraints = compile-time safety < function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } > You literally cannot pass a key that doesn't exist on the object. Not a runtime check. A compile-time guarantee. 🛠️ Utility types — type transformers, not just shortcuts ✅ Partial<T> → teams override only what they need ✅ Readonly<T> → shared config nobody can accidentally mutate ✅ Omit<T, K> → hide internals from consuming teams ✅ Pick<T, K> → expose only what teams should see Compose them for real power 👇 < type TeamConfig = Readonly<Omit<AppConfig, 'debug' | 'timeout'>>; /> 🔍 infer — extract types from inside other types </ type UnwrapPromise<T> = T extends Promise<infer U> ? U : T; > Not just checking types. Pattern matching on them. Like destructuring — but at the type level. 🎯 The real payoff — a fully type-safe API client Where the route name drives the payload AND the response type automatically. ❌ Wrong route → compile error ❌ Wrong payload → compile error ❌ Wrong property on response → compile error Zero any. Zero guessing. Full autocomplete for every team consuming your library. 💪 Follow along — sharing one deep dive at a time. 🚀 #TypeScript #FrontendEngineering #PlatformEngineering #WebDevelopment #JavaScript
To view or add a comment, sign in
-
🛠️ Must-Have VS Code (and Cursor) Extensions Since Cursor is fork-based, almost all your favorite VS Code extensions work perfectly there too. Here are my top picks for 2026: 1. The Productivity Powerhouses: Error Lens: No more hovering over red squiggles. It prints the error message right next to your code so you can fix it instantly. GitLens: Essential for team collaboration. See exactly who changed what and why, directly in the editor. Turbo Console Log: For my fellow JavaScript devs—this automates the tedious task of writing meaningful logs. 2. Frontend & Styling: Tailwind CSS IntelliSense: A must-have for rapid UI development. Autocomplete for classes saves me hours of looking at documentation. ES7+ React/Redux/React-Native snippets: I can’t remember the last time I manually typed out a functional component boilerplate. 3. Backend & API Testing: Thunder Client: Stop switching to Postman. This lightweight REST client lives right inside your sidebar. MongoDB for VS Code: Manage your clusters and explore your collections without leaving your dev environment. The Bottom Line: Tools don't replace the developer, but they sure do make the journey a lot smoother. What’s the one extension you literally cannot live without this year? Let’s swap secrets in the comments! 👇 #WebDev #FullStack #MERN #CursorAI #VSCode #ProgrammingTips #DeveloperExperience #Coding2026
To view or add a comment, sign in
-
🚀 Simplifying API Calls in Redux with createAsyncThunk. Earlier, we had to write too much boilerplate for API calls in Redux. Handling: #loading #success #error …meant creating multiple action types, action creators, and reducers. Then I started using createAsyncThunk from Redux Toolkit 👇 It automatically generates: #pending #fulfilled #rejected So instead of writing everything manually, you just focus on the async logic. Example: export const fetchUsers = createAsyncThunk( "users/fetchUsers", async () => { const res = await fetch("https://lnkd.in/g27u5z_N"); return res.json(); } ); And handle states cleanly in extraReducers. 🔥 What I like about it: Reduces boilerplate significantly Makes async flow predictable Cleaner and more readable code 💬 What do you use for API calls in your projects? #React #Redux #Frontend #WebDevelopment #JavaScript #WebArchitecture #SoftwareEngineering
To view or add a comment, sign in
-
New Blog Published: Basic Architecture of Node.js: Core Components Ever wondered how Node.js handles file systems, APIs, and timers when JavaScript alone can’t? Many developers use Node.js but don’t fully understand what’s happening behind the scenes. In this blog, I break down: • How the V8 engine runs JavaScript • Why JS can’t handle I/O on its own • How libuv enables async operations • The role of Node.js bindings • A simple flow of how everything works together Simple, practical, and straight to the point. 🔗 Read here: https://lnkd.in/gC_Hf3X2 Greateful to learn from Hitesh Choudhary sir, Piyush Garg sir, Akash Kadlag sir and Chai Aur Code team. #NodeJS #JavaScript #BackendDevelopment #Programming #WebDevelopment #ChaiCode
To view or add a comment, sign in
-
The fastest JS code I wrote this year… wasn’t JavaScript. Today I published the deeper story. It starts with a simple problem: pure JavaScript was becoming the bottleneck for large image comparisons. I experimented with multiple approaches and benchmarks and eventually ported the core algorithm to Rust. Along the way, I looked at existing tools like odiff. It's very fast, but typically used through spawned processes or long-running helpers to avoid that overhead. The interesting part for me was the interface layer. Instead of spawning binaries or running a server, the library uses N-API to let Node call the Rust implementation directly. That removes the process overhead and makes batch diffing much cheaper. If you like performance deep dives, the full write-up is here: https://lnkd.in/dDP58i6q Also, thanks to HackerNoon for selecting it as a Top Story.
To view or add a comment, sign in
-
hi connections Day 13 of 30: Mastering the "Sleep" Function in JavaScript! Today’s LeetCode challenge was a deep dive into asynchronous timing. ⏳ The Goal: Write an asynchronous function that sleeps for a specified number of milliseconds. The Lesson: JavaScript is single-threaded, so we can't just "pause" the whole engine. Instead, we use Promises and setTimeout to tell the engine: "Go do other tasks, and come back to this specific line of code after X milliseconds." This is a vital pattern for: ✅ Rate-limiting API calls to stay within quota. ✅ Adding intentional delays for better UI/UX (like loading states). ✅ Polling a server for updates at specific intervals. Understanding the difference between blocking and non-blocking code is what makes for a smooth, high-performance application! #JavaScript #WebDevelopment #AsyncProgramming #LeetCode #CodingChallenge #Day13 #SoftwareEngineering #FrontendTips
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development