Introducing Attractive.js: A JavaScript-Free Library for HTML Attributes

Have you ever tried sorting numbers in JavaScript and it just gives you nonsense? 😒 Like, you do [200, 100, 5].sort() and it returns [100, 200, 5] That’s because JavaScript, by default, sorts everything as strings, not actual numbers. So it’s basically going, “Hmm, 100 starts with a 1, that must come first.” To fix that and sort numbers properly in ascending order (smallest to biggest), just add a compare function: array.sort((a, b) => a - b) This basically tells JavaScript to compare each pair of values in the array by subtracting one from the other. If the result is negative, it means a is smaller than b, so JavaScript keeps a before b. If the result is positive, b is smaller, so it gets placed before a. And if the result is zero, it means they’re equal, and the order stays the same. This allows the sort method to arrange the numbers from smallest to largest unlike the default .sort() which treats numbers like strings and messes up the order. Now if you want to sort in descending order (biggest to smallest), just flip it: array.sort((a, b) => b - a) Sorting in descending order is especially useful when you're dealing with scores, prices, rankings, or anytime the biggest number should be on top. Once you understand what a and b are doing in that function, sorting becomes super easy and honestly, kind of satisfying. You can even write your own custom sort function which you can call anytime you want to sort anything in your program. Checkout my custom sort function in the image below and tell me what you think. I made it to work in thesame way as the sort() method. The code snippet will give you an understanding of what happens under the hood when you use the sort() method. Make sure you check it out. I hope you have learnt something from this post😃

🚀 JavaScript Hoisting — “It’s not magic, it’s just how JS works!” ✨ Ever seen your code work even before you declared a variable or function? That’s not sorcery, that’s Hoisting 😎 ⸻ 🧠 What is Hoisting? In simple terms — JavaScript moves declarations (not initializations) to the top of their scope before execution. Let’s see how 👇 ⸻ 🧩 Example 1: var is hoisted but initialized as undefined console.log(name); // ❓ undefined var name = "Vivek"; Behind the scenes: var name; console.log(name); // undefined name = "Vivek"; 🧠 JS declares the variable first, then runs your code line by line. ⸻ 🧩 Example 2: let and const are hoisted too — but they live in the ⚠️ Temporal Dead Zone console.log(age); // ❌ ReferenceError let age = 25; They’re hoisted but not initialized, so you can’t access them before the declaration line. ⸻ 🧩 Example 3: Functions get fully hoisted! sayHello(); // ✅ Works fine! function sayHello() { console.log("Hello World!"); } 🧠 Function declarations are hoisted with their definitions, while function expressions are not: greet(); // ❌ TypeError var greet = function() { console.log("Hi!"); }; ⸻ 💬 Pro Tip: Always declare your variables before using them — not because you have to, but because your future self will thank you later 😅 ⸻ #JavaScript #WebDevelopment #Frontend #CodingTips #ReactJS #Hoisting

💡 Revisiting Modern JavaScript and Found a Gem! Recently, while brushing up on my JavaScript fundamentals, I stumbled upon this amazing resource, the Modern JavaScript Cheatsheet by @mbeaudru . 👉 https://lnkd.in/gfxDkDe9 Honestly, it’s one of those resources that reminds you how powerful and elegant JavaScript has become with ES6+ features. As developers, we often jump straight into frameworks like React or Angular, but sometimes it’s refreshing to go back and deeply understand the core language itself map(), filter(), reduce(), destructuring, async/await, and more. What I liked most about this cheatsheet: ✨ It’s not just syntax — it explains the reasoning behind concepts ✨ Perfect for quick revisions before interviews ✨ Great for developers who want to stay sharp with modern JS practices If you’re learning JavaScript or even preparing for frontend interviews, this is a must-read. 🚀 Sometimes, going back to the basics is what pushes you forward the most. #JavaScript #FrontendDevelopment #WebDevelopment #Learning #Developers #ES6 #CodingJourney #LearnToCode #ModernJavaScript

Today I revised two powerful concepts in JavaScript --Functions and the DOM(Document Object Model). 1. FUNCTIONS whenever a piece of code is repeating, we can wrap it inside a function and call it whenever needed. Functions make our code reusable, clean, and easy to manage. There's also a modern type called Arrow Function, which are great for writing short and simple logic or quick calculations. I also explored some important array methods which are used along functions: (I) for each(): executes a function on each element of array/object but doesn't return new array. (II) map(): similar to forEach, but it returns a new array after applying the function. (III) filter(): return a new array containing elements that satisfy a specific condition. (IV) reduce(): takes two parameters(previous & current) and combines all elements into a single result, often used for calculations. NOTE: Higher order functions are those which take another function as parameter or they return a function. eg: forEach loop 2. DOM(Document Object Model) The DOM allows us to interact with and manipulate HTML elements in JavaScript. We can select elements in different ways: (I)document.getElementById() (II)document.getElementByClassName() (III)document.getElementByTagName() (IV)document.querySelector() Each method help us to target HTML elements by their ID, class, or tag name. Some useful DOM properties I revised: (I) tagName: finds the tag name of an element. (II) innerText: gets or changes the visible text of an element. (III) innerHTML: gets or changes the HTML content of n element. (IV) textContent: similar to innerText, but it can also access hidden text.

JavaScript’s hidden magic tricks Did you know JavaScript secretly helps your primitives behave like objects? Ever wondered how this works? 👇 "hello".toUpperCase(); // "HELLO" (42).toFixed(2); // "42.00" true.toString(); // "true" Wait a second… A string, a number, and a boolean — all have methods? But these are primitive values, not objects! So how can they call methods like .toUpperCase() or .toFixed()? 💡 The Secret: Temporary Wrapper Objects When you try to access a property or method on a primitive, JavaScript automatically creates a temporary object — a process called autoboxing. Here’s what happens behind the scenes const str = "hello"; // Step 1: JavaScript wraps it const temp = new String(str); // Step 2: Calls the method on that temporary object const result = temp.toUpperCase(); // Step 3: Discards the wrapper temp = null; console.log(result); // "HELLO" So, "hello" behaves like an object for a moment — but it’s still a primitive! ✅ typeof "hello" → "string" ❌ "hello" instanceof String → false Why this matters It keeps primitives lightweight and fast. You can safely call methods on them. But don’t confuse them with their object counterparts created using new: const s = new String("hello"); // actual object typeof s; // "object" s instanceof String → true #JavaScript #Tricks

💡 Understanding Conditional Statements in JavaScript — Made Simple! Imagine you’re deciding what to do based on the weather: ☀ If it’s sunny, you go for a walk. 🌧 If it’s raining, you stay indoors. That’s exactly what Conditional Statements do in JavaScript (JS) — they help computers make decisions based on conditions. 🧠 In simple words, conditional statements tell the program what to do — depending on what’s true or false. Here are the main types 👇 1️⃣ if statement ➡ “If something is true, do this.” Example: If you’re logged in, show the dashboard. 2️⃣ if...else statement ➡ “If it’s true, do this — otherwise, do something else.” Example: If payment is successful, send receipt; else, show error message. 3️⃣ if...else if...else statement ➡ “If this is true, do this; if not, check another condition.” Example: If the score is above 90 → grade A, above 80 → grade B, else → grade C. 4️⃣ nested if statement ➡ “If this is true, then check another condition inside.” Example: If the user is admin, and if they’re active → show admin panel. 5️⃣ switch statement ➡ A cleaner way to test many conditions. Example: Choose a plan — Basic, Standard, or Premium. 6️⃣ ternary operator (? :) ➡ A short version of if-else. Example: isLoggedIn ? "Welcome!" : "Please login."

💡 “this” in JavaScript - It’s All About Context 😎 Have you ever written console.log(this) and got something completely unexpected? 😅 You’re not alone every JavaScript developer has been confused by this at least once. But here’s the thing 👇 this isn’t confusing… it’s just based on where you use it. Let’s break it down simply 👇 🌍 In the Global or Function Scope: When you use this outside of any object or function, it refers to the global object in a browser, that’s usually the window object. 🧩 Inside an Object Method: When this is used inside an object’s method, it points to that object itself. It basically says, “I belong to this object.” ⚡ Inside an Arrow Function: Arrow functions don’t have their own this. They automatically take this from the outer (parent) scope where they were defined. That means if an arrow function is inside another function or object, it uses that parent’s this. 🎯 In Event Handlers: When used inside a regular function event handler, this points to the DOM element that triggered the event. Example: button.addEventListener("click", function() { console.log(this); // The button element }); 🧠 So, what’s the main idea? this always depends on how and where it’s used — not just where it’s written. It changes its meaning based on the context it’s in. 💬 Next time JavaScript surprises you with this, remember — it’s not broken… it’s just context-aware. Have you ever been confused by this before? #JavaScript #WebDevelopment #Frontend #CodingTips #LearnInPublic #100DaysOfCode

JavaScript Block-Level Variables JavaScript ES6 introduced block-level scoping with the let and const keywords. Block-level variables are accessible only within the block {} they are defined in, which can be smaller than a function's scope. For example, function display_scopes() { // declare variable in local scope let message = "local"; if (true) { // declare block-level variable let message = "block-level"; console.log(`inner scope: ${message}`); } console.log(`outer scope: ${message}`); } display_scopes(); Output inner: block-level outer: local In this example, we have created two separate message variables: Block-Level: The variable inside the if block (visible only there). Local-Level: The variable inside the display_scopes() function.

Day:19 1. History of JavaScript * JavaScript was created in 1995 by Brendan Eich. * It was initially called Mocha, then Live Script, and finally JavaScript. * Developed for use in web browsers to make websites interactive. * Became a standard (ECMAScript) for cross-browser compatibility. 2. Increment and Decrement Increment (++): increases a variable’s value by one. Example: x++; // adds 1 to x Decrement (--): decreases a variable’s value by one. Example: x--; // subtracts 1 from x Can be prefix (++x) or postfix (x++)—the difference is when the value changes in an expression. 3. Variable and Constant Variable: stores data that can change. Declared using let or var. Constant: stores data that doesn't change. Declared using const. Example: let age = 18; (can be changed), const pi = 3.14; (cannot change value after assignment) 4. Data Types JavaScript has several data types: Number (e.g., 12, 3.14) String (e.g., "hello world") Boolean (true, false) Undefined (variable declared but not assigned) Null (explicitly set to no value) Object (arrays, objects, functions) Symbol (unique identifiers, ES6) 5. Alert, Prompt, Confirm alert("message") — shows a popup with a message. prompt("message") — asks user to input a value, returns what they type. confirm("message") — asks for OK/Cancel, returns true for OK, false for Cancel. 6. Concatenation Combining strings using + operator. Example: "Hello " + "World" gives "Hello World" Can also join numbers and strings: 5 + " apples" gives "5 apples" Quick examples:

🚀 JavaScript Lesson: Understanding Hoisting Ever wondered why you can use a variable before it’s declared in JavaScript? That’s because of Hoisting — one of the most misunderstood concepts in JS! 🧠 What is Hoisting? Hoisting means JavaScript moves declarations (not assignments) to the top of their scope during the compilation phase. In simple terms — JS reads your code twice: First pass: Sets up memory for variables and functions. Second pass: Executes line by line. 🧩 1️⃣ var Hoisting Example console.log(a); // 👉 undefined var a = 10; console.log(a); // 👉 10 📝 Explanation: var a is hoisted to the top, but only the declaration, not the assignment. So, before assigning, a exists but has the value undefined. 🧩 2️⃣ let Hoisting Example console.log(b); // ❌ ReferenceError let b = 20; 📝 Explanation: let is also hoisted, but it stays in a Temporal Dead Zone (TDZ) — meaning you can’t access it before it’s declared. This protects you from accidental use of uninitialized variables. 🧩 3️⃣ const Hoisting Example console.log(c); // ❌ ReferenceError const c = 30; 📝 Explanation: Like let, const is hoisted but locked in the TDZ until its declaration line. It also must be initialized at the time of declaration. 🧩 4️⃣ Function Hoisting greet(); // ✅ Works! function greet() { console.log("Hello, Cognothink Community!"); } 📝 Explanation: Function declarations are fully hoisted — both name and body. That’s why you can call them before they’re defined. ⚡ Function Expressions (with var, let, or const) sayHi(); // ❌ Error var sayHi = function() { console.log("Hi!"); }; 📝 Explanation: This behaves like variable hoisting — only the variable name is hoisted, not the function itself.