✨ JavaScript's Garbage Collection

ℹ️ The garbage collector in JavaScript is responsible for reclaiming memory occupied by objects that are no longer needed. This mechanism is done using mark-and-sweep algorithm.

ℹ️ The mark-and-sweep algorithm consists of two main phases:

1️⃣Marking: Garbage collector marks reachable objects from the global object, ensuring none are left unmarked if reachable from a rooted object.

2️⃣ Sweeping: Garbage collector reclaims memory from unmarked objects, freeing it up for future use.


📕 Learn more about the JS's garbage collector's mechanism and best practices on the Medium I have written.


➖➖➖➖➖➖
📚Article (Written by me!): [here]
➖➖➖➖➖➖
#JavaScript #Algorithm


🖥 Follow @devDastan for more content.

📱 Abstract Syntax Trees (AST) in JavaScript


ℹ️ AST in JavaScript represents the syntactic structure of code. It's a hierarchical tree-like structure composed of nodes, each representing a syntactic element like variable declarations or function calls. An AST is created through two key stages:


1️⃣ Lexical Analysis (Tokenization): Code is tokenized by a Lexical Analyzer, breaking it down into tokens. Lexical Analysis: Code is tokenized by a Lexical Analyzer, breaking it down into tokens.

2️⃣ Syntax Analysis (Parsing): Tokens are structured into an AST by a Syntax Analyzer or Parser, enabling deeper code analysis.

✔️ AST use cases:

🔣Code Analysis: ESLint, JSHint, TypeScript Compiler (TSC), SonarQube

🔣Code Transformation: Babel, TypeScript Compiler (TSC), SWC

🔣Refactoring: TSLint, TypeScript Compiler (TSC)

🔣Code Generation: TypeScript Compiler (TSC), Babel

🔣Language Tooling: Visual Studio Code, WebStorm, Atom, Sublime Text

🔣Optimization: V8 JavaScript Engine, LLVM (Low-Level Virtual Machine)


➖➖➖➖➖➖
📚 Article: [here]
💻 AST Explorer Tool: [here]
➖➖➖➖➖➖
#JavaScript #computerScience


🖥 Follow @devDastan for more content.

📱 JavaScript Signals Standard Proposal (Stage 1)


🕯 Signals are a reactive state management mechanism for JavaScript apps. Each Signal is a source of a value. When the value changes, the Signal makes sure all dependent states (or other Signals) are notified and updated.

❗️ Frameworks like Angular, VueJS, SolidJS, and ... heavily utilize Signals. Establishing a standard for JavaScript itself would be beneficial (it is currently at stage 1).

✔️ Advantages of Signals:

🔣 Simplified Reactive Programming

🔣 Automated State Tracking and Updating

🔣 Efficient Performance

🔣 Cross-Framework Unity


🔠 A simple proposed signal example:

const counter = new Signal.State(0);

// Read the value of Signal
console.log(counter.get()); // Output: 0

// Change the value of Signal
counter.set(1);
console.log(counter.get()); // Output: 1

⚠️ If you have experience using ref in VueJS, understanding Signals should pose no challenge.

⚠️ The purpose of using Signals is to update only the dependencies in the DOM and execute subscriber functions in JavaScript.

➖➖➖➖➖➖
📱 GitHub Proposal Repo: [here]
📚 Article: [here]
📱 YouTube Video: [here]
➖➖➖➖➖➖
#JavaScript #EcmaScript


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What is the output of this code?

function Car() {
  this.make = 'Lamborghini';
  return { make: 'Maserati' };
}

const myCar = new Car();
console.log(myCar.make);

✔️ Answer:
When a constructor function is invoked with the new keyword, it creates an object and sets this to refer to that object. If the constructor function doesn't explicitly return anything, it defaults to returning the newly created object. In the case of the constructor function Car, it explicitly returns a new object with 'make' set to "Maserati", overriding the default behavior. Therefore, when new Car() is called, the returned object is assigned to myCar, resulting in the output "Maserati" when myCar.make is accessed.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

📱 Promise.all vs Promise.allSettled


🕯 Promise.all and Promise.allSettled are two methods provided by JavaScript's Promise API, but they have different behaviors and use cases.

🔣 Promise.all
Waits for all promises to resolve or rejects immediately if any promise rejects. Resolves with an array of resolved values.


🔣 Promise.allSettled
Waits for all promises to settle (resolve or reject) and always resolves. Returns an array of objects representing the outcomes of the promises, including their status and value/reason.


➖➖➖➖➖➖
📚 Article: [here]
📱 YouTube Video: [here]
📱 Image Credit (on X.com): [here]
➖➖➖➖➖➖
#JavaScript


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What's the value of num?

const num = parseInt('7*6', 10);

🔤 42
🔤 "42"
🔤 7
🔤 NaN

✔️ Answer:
parseInt returns only the first number in the string. Depending on the radix (the second argument specifying the number type: base 10, hexadecimal, octal, binary, etc.), parseInt validates the characters in the string. If it encounters an invalid character, it stops parsing and ignores the rest.

For example, in "78", only "7" is valid, so it parses it into the decimal 7, ignoring the "" and "8". Thus, num now equals 7.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

🖼️ React State vs Refs


🔣 State: For data that changes the UI. Updates trigger re-renders.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

🔣 Refs: For directly accessing DOM elements or storing mutable values. Don't trigger re-renders.

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

✨ Keep in mind that:

- State is immutable
- Avoid reading/writing refs during rendering
- Both persist data and have different update behaviors

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#JavaScript #ReactJS


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What's the output?

const user = {
  email: "[email protected]",
  updateEmail: email => {
    this.email = email;
  }
}

user.updateEmail("[email protected]")
console.log(user.email)

🔤 [email protected]
🔤 [email protected]
🔤 undefined
🔤 ReferenceError

✔️ Answer:
The updateEmail function is an arrow function, and is not bound to the user object. This means that the this keyword is not referring to the user object, but refers to the global scope in this case. The value of email within the user object does not get updated. When logging the value of user.email, the original value of [email protected] gets returned.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What's the output?

const box = { x: 10, y: 20 };

Object.freeze(box);

const shape = box;
shape.x = 100;

console.log(shape);



🔤 { x: 100 , y: 20 }
🔤 { x: 10, y: 20 }
🔤 { x: 100 }
🔤 ReferenceError

✔️ Answer: 🔤
Object.freeze prevents adding, removing, or modifying properties of an object (unless the property’s value is another object).

When we create the variable shape and set it equal to the frozen object box, shape also refers to a frozen object. You can check if an object is frozen using Object.isFrozen. In this case, Object.isFrozen(shape) returns true.

Since shape is frozen and x is not an object, we cannot modify x. Therefore, x remains 10, and { x: 10, y: 20 } gets logged.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What is the event.target when clicking the button?

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>



🔤 Outer div
🔤 Inner div
🔤 button
🔤 An array of all nested elements.

✔️ Answer: 🔠
The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation


➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

🖼 45 JavaScript Super Hacks Every Developer Should Know


✔ JavaScript is a versatile and powerful language that is essential for modern web development. Here are super hacks that will make you a more efficient and effective JavaScript developer, with detailed explanations and examples for each one.

🔗 Please open the link below to read them all!

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#JavaScript

🖼️ React is Just document.createElement() With Good Marketing, and I Can Prove It

➖ React, the darling of modern web development, is nothing more than document.createElement() wrapped in excellent marketing and increasingly complex abstractions.

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#javaScript #react


🖥 Follow @devDastan for more content.

🖼️ The Hidden Cost of JavaScript Arrays (Part 1 - Memory Allocation)


✔️ JS arrays can tank performance and there are ways to optimize them.

❌ Operations like push(), pop(), and splice() can trigger memory reallocation, copying, and fragmentation.

✅ Using fixed-size or oversized arrays can be more efficient.

// Inefficient: Repeatedly resizing the array

let arr = [];

for (let i = 0; i < 10000; i++) {
  arr.push(i);
}

// Efficient: Using a pre-sized array

let arr2 = new Array(10000);


for (let i = 0; i < 10000; i++) {
  arr2[i] = i;
}

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#javaScript #performance #softwareEngineering


🖥 Follow @devDastan for more content.

🖼️ A Brief History of JavaScript: This year, JavaScript turns 30


🔸 1994: Netscape releases Netscape Navigator 1.0


🔸 1995: Brendan Eich creates the very first version of JavaScript


🔸 1996: Microsoft introduces JScript in Internet Explorer 3 to compete with Netscape Navigator


🔸 1996: Netscape Navigator 2.0 is released with JavaScript 1.0


🔸 1997: Netscape submits JavaScript to ECMA International


🔸 1998: Official release of the first ECMAScript language specification (ECMAScript 2)


🔸 1999: Microsoft releases Internet Explorer 5, which uses more proprietary technology than before.


🔸 2001: The first JSON message is sent


🔸 2002: JSLint, the “grandfather of all JavaScript syntax checkers” is introduced


🔸 2003: Apple introduces Safari and WebKit


🔸 2004: A beta version of Gmail is released, which uses a new asynchronous JavaScript protocol, “AJAX”


🔸 2006: John Resig creates first commit to a project named jQuery


🔸 2007: The first Apple iPhone is released with its mobile safari not supporting Flash


🔸 2008: Netscape Navigator is sunset, marking the end of the “First Browser War”


🔸 2008: Douglas Crockford publishes “JavaScript: The Good Parts”


🔸 2008: Google releases the Chrome browser, the fastest web browser at the time, and with it, the V8 engine.


🔸 2009: Ryan Dahl begins work on Node.js


🔸 2009: The first commit on Express.js is created


🔸 2010: npm 1.0 is released


🔸 2010: WebStorm 1.0, a new JavaScript IDE by JetBrains, is released


🔸 2010: AngularJS and Backbone.js are released


🔸 2012: Webpack, a module bundler, is introduced


🔸 2012: Microsoft makes TypeScript 0.8 available for the public


🔸 2013: Facebook releases React


🔸 2014: Vue.js is released


🔸 2014: The first commit to Babel.js is created


🔸 2014: Amazon announces AWS Lambda, powered by Node.js


🔸 2015: GraphQL, a query language for APIs, is launched


🔸 2015: Redux is released


🔸 2015: Web assembly is released


🔸 2015: ECMAScript 6 (ES2015) is released


🔸 2016: Microsoft releases VSCode 1.0, a lightweight, fast, cross-platform IDE


🔸 2016: Angular (Angular2) is released


🔸 2016: Next.js 1.0 is released


🔸 2017: Prettier 1.0 is released


🔸 2017: Facebook launches Yarn, a new package manager


🔸 2018: TensorFlow.js is released, bringing machine learning to the browser via WebGL or WebGPU without needing compute


🔸 2019: Node.js stabilizes support for ECMAScript modules in v13.2.0


🔸 2020: JavaScript makes it into space with SpaceX Dragon


🔸 2020: Deno 1.0 is released


🔸 2022: Internet Explorer 11 is retired


🔸 2023: Bun 1.0 is released


🔸 2025: TypeScript will be ported to Go


➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#JavaScript


🖥 Follow @devDastan for more content.