🚀 Day 4 / 100 — JavaScript Fundamentals Refresher #100DaysOfCode challenge Today I revised some core JavaScript concepts that every developer should know. These are small things we often overlook… but they’re essential for debugging and writing clean code. Here’s a quick JavaScript revision :👇 🧠 1. Hoisting Hoisting means JavaScript moves variable and function declarations to the top of their scope before execution. console.log(a); // undefined var a = 5; Why undefined? Because var a is hoisted, but the value 5 is assigned later. So internally JS sees this as: var a; console.log(a); a = 5; ⚡ 2. Hoisting with let and const let and const are also hoisted, but they behave differently. They cannot be accessed before declaration. console.log(a); // ❌ ReferenceError let a = 10; Unlike var, they are not initialized during hoisting. 🚫 3. Temporal Dead Zone (TDZ) The Temporal Dead Zone is the time between: • When a variable is hoisted • And when it is declared During this period, the variable exists but cannot be accessed. Example: console.log(a); // ReferenceError let a = 10; The variable a is in the Temporal Dead Zone until the line where it’s declared. This prevents many bugs that happened with var. 🖥️ 4. console.log() The most common debugging tool. console.log("Hello World"); Used to: • Print values • Inspect objects • Debug logic Think of it as a developer’s flashlight 🔦 ❌ 5. console.error() Used to display error messages in the console. console.error("Something went wrong"); Usually appears in red and helps identify critical problems quickly. ⚠️ 6. console.warn() Used for warnings that might cause issues later. console.warn("This feature is deprecated"); Displayed in yellow in most browsers. ⏱️ 7. setTimeout() Executes a function once after a delay. setTimeout(() => { console.log("Runs after 2 seconds"); }, 2000); Common uses: • Delayed UI actions • Notifications • API retries 🔁 8. setInterval() Executes a function repeatedly after a fixed interval. setInterval(() => { console.log("Runs every 2 seconds"); }, 2000); Used for: • Timers • Polling APIs • Real-time updates 💡 Key takeaway: Great developers don’t just chase new frameworks — they master the fundamentals. Revisiting JavaScript basics always uncovers something new. 🔥 Day 4 completed. 96 days to go. #javascript #100daysofcode #webdevelopment #coding #developers #programming #learninpublic #buildinpublic #SheryiansCodingSchool #Sheryians
JavaScript Fundamentals: Hoisting, TDZ, and Console Methods
More Relevant Posts
-
JavaScript Roadmap for Beginners to Pro 𝗦𝘁𝗲𝗽 1: 𝗟𝗲𝗮𝗿𝗻 𝘁𝗵𝗲 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 - Introduction to JavaScript - Variables (var, let, const) - Data Types (String, Number, Boolean, Object, Array) - Operators (Arithmetic, Comparison, Logical) - Control Flow (if-else, switch-case) - Loops (for, while, do-while) - Functions (Declaration, Expression, Arrow Functions) 𝗦𝘁𝗲𝗽 2: 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻 - What is the DOM? - Selecting Elements (getElementById, querySelector) - Modifying Elements (innerHTML, textContent, classList) - Event Handling (addEventListener, onClick) 𝗦𝘁𝗲𝗽 3: 𝗘𝗦6+ 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 - Template Literals - Destructuring Objects & Arrays - Spread & Rest Operators - Default Parameters - Modules (import/export) 𝗦𝘁𝗲𝗽 4: 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 - Callbacks - Promises (then, catch, finally) - Async/Await - Fetch API & Axios for HTTP Requests 𝗦𝘁𝗲𝗽 5: 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 & 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 - Closures - Higher-Order Functions (map, filter, reduce) - Prototype & Prototypal Inheritance - Event Loop & Call Stack. 𝗦𝘁𝗲𝗽 6: 𝗢𝗯𝗷𝗲𝗰𝘁-𝗢𝗿𝗶𝗲𝗻𝘁𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝗢𝗢𝗣) - Constructor Functions - ES6 Classes - Encapsulation, Inheritance, Polymorphism 𝗦𝘁𝗲𝗽 7: 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 & 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 - Try-Catch - Error Types (SyntaxError, TypeError, ReferenceError) - Debugging with DevTools 𝗦𝘁𝗲𝗽 8: 𝗪𝗲𝗯 𝗦𝘁𝗼𝗿𝗮𝗴𝗲 & 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 - LocalStorage vs SessionStorage vs Cookies - Caching Strategies - Debouncing & Throttling 𝗦𝘁𝗲𝗽 9: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝗻 𝘁𝗵𝗲 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 - Web APIs (Geolocation, Notifications, IndexedDB) - Service Workers & Progressive Web Apps (PWA) 𝗦𝘁𝗲𝗽 10: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 & 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 - React.js (Components, Props, State, Hooks) - Vue.js / Angular (if interested) - Node.js (for backend development) 𝗦𝘁𝗲𝗽 11: 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 & 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆 - Unit Testing with Jest - Security Best Practices (XSS, CSRF, CORS) 𝗦𝘁𝗲𝗽 12: 𝗕𝘂𝗶𝗹𝗱 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 & 𝗖𝗼𝗻𝘁𝗿𝗶𝗯𝘂𝘁𝗲 - Build real-world projects - Contribute to Open Source - Stay Updated with Javascript trends <~#𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 #𝑻𝒆𝒔𝒕𝒊𝒏𝒈~> 𝑷𝒍𝒂𝒚𝒘𝒓𝒊𝒈𝒉𝒕 𝒘𝒊𝒕𝒉 𝑱𝒂𝒗𝒂𝑺𝒄𝒓𝒊𝒑𝒕& 𝑻𝒚𝒑𝒆𝑺𝒄𝒓𝒊𝒑𝒕 ( 𝑨𝑰 𝒊𝒏 𝑻𝒆𝒔𝒕𝒊𝒏𝒈, 𝑮𝒆𝒏𝑨𝑰, 𝑷𝒓𝒐𝒎𝒑𝒕 𝑬𝒏𝒈𝒊𝒏𝒆𝒆𝒓𝒊𝒏𝒈)—𝑻𝒓𝒂𝒊𝒏𝒊𝒏𝒈 𝑺𝒕𝒂𝒓𝒕𝒔 𝒇𝒓𝒐𝒎 13𝒕𝒉 𝑨𝒑𝒓𝒊𝒍 𝑹𝒆𝒈𝒊𝒔𝒕𝒆𝒓 𝒏𝒐𝒘 𝒕𝒐 𝒂𝒕𝒕𝒆𝒏𝒅 𝑭𝒓𝒆𝒆 𝑫𝒆𝒎𝒐: https://lnkd.in/dR3gr3-4 𝑶𝑹 𝑱𝒐𝒊𝒏 𝒕𝒉𝒆 𝑾𝒉𝒂𝒕𝒔𝑨𝒑𝒑 𝒈𝒓𝒐𝒖𝒑 𝒇𝒐𝒓 𝒕𝒉𝒆 𝒍𝒂𝒕𝒆𝒔𝒕 𝑼𝒑𝒅𝒂𝒕𝒆: https://lnkd.in/dD4rDpwZ : Follow Pavan Gaikwad for more helpful content.
To view or add a comment, sign in
-
JavaScript Roadmap for Beginners to Pro 𝗦𝘁𝗲𝗽 1: 𝗟𝗲𝗮𝗿𝗻 𝘁𝗵𝗲 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 - Introduction to JavaScript - Variables (var, let, const) - Data Types (String, Number, Boolean, Object, Array) - Operators (Arithmetic, Comparison, Logical) - Control Flow (if-else, switch-case) - Loops (for, while, do-while) - Functions (Declaration, Expression, Arrow Functions) 𝗦𝘁𝗲𝗽 2: 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻 - What is the DOM? - Selecting Elements (getElementById, querySelector) - Modifying Elements (innerHTML, textContent, classList) - Event Handling (addEventListener, onClick) 𝗦𝘁𝗲𝗽 3: 𝗘𝗦6+ 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 - Template Literals - Destructuring Objects & Arrays - Spread & Rest Operators - Default Parameters - Modules (import/export) 𝗦𝘁𝗲𝗽 4: 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 - Callbacks - Promises (then, catch, finally) - Async/Await - Fetch API & Axios for HTTP Requests 𝗦𝘁𝗲𝗽 5: 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 & 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 - Closures - Higher-Order Functions (map, filter, reduce) - Prototype & Prototypal Inheritance - Event Loop & Call Stack. 𝗦𝘁𝗲𝗽 6: 𝗢𝗯𝗷𝗲𝗰𝘁-𝗢𝗿𝗶𝗲𝗻𝘁𝗲𝗱 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝗢𝗢𝗣) - Constructor Functions - ES6 Classes - Encapsulation, Inheritance, Polymorphism 𝗦𝘁𝗲𝗽 7: 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 & 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 - Try-Catch - Error Types (SyntaxError, TypeError, ReferenceError) - Debugging with DevTools 𝗦𝘁𝗲𝗽 8: 𝗪𝗲𝗯 𝗦𝘁𝗼𝗿𝗮𝗴𝗲 & 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 - LocalStorage vs SessionStorage vs Cookies - Caching Strategies - Debouncing & Throttling 𝗦𝘁𝗲𝗽 9: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝗻 𝘁𝗵𝗲 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 - Web APIs (Geolocation, Notifications, IndexedDB) - Service Workers & Progressive Web Apps (PWA) 𝗦𝘁𝗲𝗽 10: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 & 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀 - React.js (Components, Props, State, Hooks) - Vue.js / Angular (if interested) - Node.js (for backend development) 𝗦𝘁𝗲𝗽 11: 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 & 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆 - Unit Testing with Jest - Security Best Practices (XSS, CSRF, CORS) 𝗦𝘁𝗲𝗽 12: 𝗕𝘂𝗶𝗹𝗱 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 & 𝗖𝗼𝗻𝘁𝗿𝗶𝗯𝘂𝘁𝗲 - Build real-world projects - Contribute to Open Source - Stay Updated with Javascript trends This roadmap will take you from beginner to advanced level in JavaScript. Let me know if you need details on any specific step! Document Credit: Respected Owner 𝗝𝗼𝗶𝗻 𝗺𝘆 𝗧𝗲𝗹𝗲𝗴𝗿𝗮𝗺 𝗖𝗵𝗮𝗻𝗻𝗲𝗹: https://lnkd.in/dqsXhPA2 𝗝𝗼𝗶𝗻 𝗪𝗵𝗮𝘁𝘀𝗔𝗽𝗽 𝗖𝗵𝗮𝗻𝗻𝗲𝗹: https://lnkd.in/d4YiB9xt Follow Ashish Misal for more insightful content on System Design, JavaScript and MERN Technologies! #JavaScript #MERN #SystemDesign
To view or add a comment, sign in
-
🚀 JavaScript Simplified Series — Day 10 Most beginners get confused when they hear this: 👉 “Functions can take other functions as input.” Wait… what? 🤯 Yes. In JavaScript, functions are first-class citizens. That means: ✔ You can store them in variables ✔ Pass them as arguments ✔ Return them from other functions And this leads to two very powerful concepts: 👉 Callback Functions 👉 Higher Order Functions 🔹 1. Callback Functions (Function inside a function) A callback is simply a function that is passed into another function and executed later. Let’s understand with a simple example 👇 function greet(name) { console.log("Hello " + name) } function processUser(name, callback) { callback(name) } processUser("Abhay", greet) 👉 Output: Hello Abhay 🔍 What’s happening here? greet is a function We pass it into processUser Inside processUser, we call it → callback(name) 📌 So, greet becomes a callback function 💡 Real-life example: Ordering food online 🍔 You place an order → wait When food is ready → delivery happens 👉 That “what happens next” is a callback 🔹 2. Higher Order Functions (Functions that use functions) A Higher Order Function (HOF) is a function that: ✔ Takes another function as input OR ✔ Returns a function Example 👇 function calculate(a, b, operation) { return operation(a, b) } function add(x, y) { return x + y } console.log(calculate(5, 3, add)) 👉 Output: 8 🔍 Breakdown: calculate is a Higher Order Function It takes operation (a function) as input Then calls it → operation(a, b) 📌 This makes your code flexible and reusable 💡 Real-life example: Think of a calculator 🧮 You give: numbers + operation Calculator decides what to do 👉 That’s exactly how HOF works 🔥 Where are these used? You already use them daily without realizing: [1, 2, 3].map(num => num * 2) 👉 map() is a Higher Order Function 👉 (num => num * 2) is a callback 🔥 Simple Summary Callback → function passed into another function Higher Order Function → function that uses other functions 💡 Programming Rule Functions are not just code… They are values you can pass around. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday
To view or add a comment, sign in
-
JavaScript Notes — Execution Context, Hoisting, Closures While revising JavaScript fundamentals, I wrote down a few clear notes about how the engine actually executes code. Execution Context When a JavaScript program runs, the engine creates an Execution Context. 1️⃣ Global Execution Context (GEC) This is created first when the program starts. 2️⃣ Function Execution Context (FEC) Whenever a function is called, JavaScript creates a new execution context for that function. The flow looks something like this: Global Context → Function Context → Nested Function Context → … Each function call adds a new context to the call stack, and it is removed once execution finishes. Parts of an Execution Context Every execution context contains four main components: 1. Variable Environment Stores variables and function declarations defined inside the current execution context. 2. Lexical Environment Represents the scope chain. It determines how JavaScript resolves variables by checking outer scopes. Example chain: Global Scope → Function Scope → Inner Function Scope → … 3. this Binding Represents the current execution context object. In browsers (global scope), this usually refers to the window object. 4. Outer Environment Reference Points to the parent lexical environment, which allows JavaScript to access variables from outer scopes. In function contexts, this environment also includes the arguments object, which is an array-like structure containing the arguments passed to the function. Hoisting Hoisting is how JavaScript handles variable and function declarations during the creation phase of execution. What actually happens: Declarations are registered in memory before code execution. Variables declared with var are initialized as undefined. Example: console.log(a); // undefined var a = 10; The engine internally interprets it roughly like this: var a; console.log(a); a = 10; Closure A closure happens when an inner function can access variables from its outer function even after the outer function has finished executing. This works because the inner function retains a reference to the lexical environment where it was created. Scope Scope simply defines where a variable exists and where it can be accessed. Common types: Global Scope Function Scope Block Scope (let / const) These are not “advanced tricks.” They are core mechanics of how the JavaScript engine works. If you don’t understand execution context, hoisting, and closures, debugging JavaScript becomes guesswork instead of reasoning. Currently revising fundamentals alongside DSA practice to strengthen both problem-solving and JavaScript internals. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #JavaScriptFundamentals #ExecutionContext #Closures #Hoisting #Developers #BuildInPublic #CodingJourney #TechLearning
To view or add a comment, sign in
-
Lately, I’ve been going deeper into JavaScript coercion, and the more I study it, the less random JavaScript feels. A lot of behaviour that looks strange at first starts making sense once you realise that JavaScript is following rules defined in the ECMAScript specification. Recently, I focused on the abstract operations behind conversion, especially: - ToNumber - StringToNumber - ToString - ToPrimitive - OrdinaryToPrimitive One of the biggest takeaways for me is that JavaScript does not just “guess” what to do with values. It follows a defined process depending on the operation being performed. For example: - `"5" - 1` works because subtraction expects numbers. - `Number("")` becomes `0`. - `Number(undefined)` becomes `NaN`. - `ToNumber(BigInt)` throws an error, but `ToString(BigInt)` works. - When an object is involved, JS first tries to extract a primitive value before continuing coercion The part I found especially interesting was object-to-primitive conversion. If JavaScript encounters an object in a coercion context, it first checks for `Symbol.toPrimitive`. If that is not available, it falls back to `OrdinaryToPrimitive`, where the order of calling `toString()` and `valueOf()` depends on the hint being used: - string hint → toString() first - number hint → valueOf() first I also learned more about why string-to-number conversion behaves the way it does: - Number("25") gives 25 - Number(" 25 ") also gives 25 - Number("Infinity") gives Infinity - Number("1_000") gives NaN - Number("10n") gives NaN What is changing my understanding the most is this: - Instead of memorising “weird JavaScript behaviour”, I’m now trying to ask: 1. What operation is being performed? 2. What type of value does that operation expect? 3. Which abstract operation is JavaScript using behind the scenes? That mindset makes the language much easier to reason about. I’ve also been maintaining detailed notes on what I’m learning. If anyone wants to go deeper into these topics, I’ve uploaded them here: GitHub repo: https://lnkd.in/ephuZ-w6 #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering #ECMAScript #100DaysOfCode
To view or add a comment, sign in
-
-
🚀 10 JavaScript Tricks Every Web Developer Should Know JavaScript is more than just a programming language—it’s a toolbox full of clever shortcuts and powerful techniques. Whether you're a beginner or an experienced developer, mastering these tricks can make your code cleaner, faster, and more efficient. Let’s dive into 10 must-know JavaScript tricks 👇 1. 🔄 Destructuring Assignment Extract values from arrays or objects easily. </> JavaScript 👇 const user = { name: "John", age: 25 }; const { name, age } = user; console.log(name); // John ✅ Cleaner and reduces repetitive code. 2. ⚡ Default Function Parameters Avoid undefined errors by setting default values. </> JavaScript 👇 function greet(name = "Guest") { return `Hello, ${name}`; } greet(); // Hello, Guest ✅ Makes your functions more robust. 3. 🧠 Optional Chaining (?.) Safely access nested properties without crashing. </> JavaScript 👇 const user = {}; console.log(user?.profile?.name); // undefined ✅ Prevents annoying runtime errors. 4. 🔗 Nullish Coalescing (??) Set fallback values only for null or undefined. </> JavaScript 👇 const value = null ?? "Default"; console.log(value); // Default 👉 Better than || when 0 or false are valid values. 5. 📦 Spread Operator (...) Clone or merge arrays/objects easily. </> JavaScript 👇 const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4]; console.log(arr2); // [1, 2, 3, 4] ✅ Super useful for immutability. 6. 🎯 Short-Circuit Evaluation Write cleaner conditional logic. </> JavaScript 👇 const isLoggedIn = true; isLoggedIn && console.log("Welcome!"); ✅ Replace simple if statements. 7. 🔁 Array Methods Power (map, filter, reduce) Write functional and concise code. </> JavaScript 👇 const numbers = [1, 2, 3]; const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6] ✅ Cleaner than traditional loops. 8. ⏱ Debouncing Function Control how often a function runs (great for search inputs). </> JavaScript 👇 function debounce(fn, delay) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; } ✅ Improves performance in real apps. 9. 🧩 Dynamic Object Keys Use variables as object keys. </> JavaScript 👇 const key = "name"; const obj = { [key]: "John" }; console.log(obj.name); // John ✅ Powerful for dynamic data handling. 10. 🔍 Console Tricks for Debugging Make debugging easier and smarter. </> JavaScript 👇 console.table([{ name: "John", age: 25 }]); ✅ Better visualization than plain logs. 💡 Final Thoughts These JavaScript tricks may seem small, but they can significantly boost your productivity and code quality. The difference between a good developer and a great one often lies in mastering these little details. 🔥 Pro Tip: Don’t just read—start using these tricks in your projects today.
To view or add a comment, sign in
-
-
🚀 Just Published: Blog 4 of Javascript blog series JavaScript Array Methods Made Simple If you're learning JavaScript, mastering array methods is a must. In this blog, I’ve explained: ✔️ push() & pop() ✔️ shift() & unshift() ✔️ map() ✔️ filter() ✔️ reduce() (beginner-friendly) ✔️ forEach() If you’re still using long for-loops everywhere, this will change how you write JavaScript. 🔗 Read here: https://lnkd.in/gv5vsmu9 Would love your feedback! Hitesh Choudhary, Piyush Garg and Chai Aur Code team #JavaScript #WebDevelopment #Coding #Beginners #Frontend #LearnToCode
To view or add a comment, sign in
-
✨ 𝗪𝗿𝗶𝘁𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗟𝗶𝗸𝗲 𝗔 𝗛𝘂𝗺𝗮𝗻 ⤵️ Template Literals in JavaScript: Write Strings Like a Human ⚡ 🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/d_HhAEsM 𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻: ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺ ⇢ Why string concatenation becomes messy in real apps ⇢ Template literals — the modern way to write strings ⇢ Embedding variables & expressions using ${} ⇢ Multi-line strings without \n headaches ⇢ Before vs After — readability transformation ⇢ Real-world use cases: HTML, logs, queries, error messages ⇢ Tagged templates (advanced but powerful concept) ⇢ How interpolation works under the hood ⇢ Tradeoffs & common mistakes developers make ⇢ Writing cleaner, more readable JavaScript Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌 #ChaiAurCode #JavaScript #WebDevelopment #Frontend #Programming #CleanCode #Hashnode
To view or add a comment, sign in
-
🚀 JavaScript - Array.prototype & Prototype Chaining If you’ve ever used map(), filter(), or push()… Have you ever wondered where they actually come from? 🤔 You’re already using one of the most powerful concepts in JavaScript 👇 👉 Prototype-based inheritance ⚡ What is Array.prototype? Every array you create is not just a simple object… 👉 It is internally linked to a hidden object called "Array.prototype" This object contains all the built-in methods available to arrays. Example: const arr = [1, 2, 3]; arr.push(4); arr.map(x => x * 2); 👉 These methods are NOT inside your array directly 👉 They come from Array.prototype Behind the Scenes console.log(arr.__proto__ === Array.prototype); // true 👉 This means: >>arr is connected to Array.prototype >>That’s why it can access all its methods 👉 __proto__ is a hidden property that exists in every JavaScript object. 👉 It points to the object’s prototype. const arr = [1, 2, 3]; console.log(arr.__proto__); // Array.prototype ⚡ Types of Methods in Array.prototype 🔸 A. Transformation Methods: Used to create new arrays arr.map(), arr.filter(), arr.reduce() 👉 Do NOT modify original array 🔸 B. Iteration Methods: Used to check or loop arr.forEach(), arr.find(), arr.some(), arr.every() 🔸 C. Modification Methods: Change the original array arr.push(), arr.pop(), arr.shift(), arr.unshift(), arr.splice() 🔸 D. Utility Methods: Helpful operations arr.includes(), arr.indexOf(), arr.slice(), arr.concat() ⚡What is Prototype Chaining? 👉 When you access a method/property, JavaScript searches step by step: arr → Array.prototype → Object.prototype → null This process is called "Prototype chaining". Example const arr = [1, 2, 3]; arr.toString(); 👉 toString() is not in array methods list, So JS checks: arr → Array.prototype → Object.prototype → null 👉 Found in Object.prototype ⚡Prototype Chain Visualization [1,2,3] ↓ Array.prototype ↓ Object.prototype ↓ null 👉 This chain is called prototype chaining ⚡Adding Custom Methods (Powerful but Risky) You can extend arrays like this: Array.prototype.custom = function () { return "Custom method!"; }; const arr = [1, 2]; console.log(arr.custom()); 👉 Arrays don’t own methods 👉 They inherit them from Array.prototype 👉 JavaScript uses prototype chaining to find them #JavaScript #WebDevelopment #Frontend #Coding #Developers #Programming #LearnJavaScript #100DaysOfCode
To view or add a comment, sign in
Explore related topics
- Advanced Debugging Techniques for Senior Developers
- Debugging Tips for Software Engineers
- How to Write Clean, Error-Free Code
- Coding Techniques for Flexible Debugging
- Clear Coding Practices for Mature Software Development
- Coding Best Practices to Reduce Developer Mistakes
- Best Practices for Debugging Code
- Tips for Testing and Debugging
- Strategies for Writing Robust Code in 2025
- How to Refactor Code Thoroughly
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