Language

Collections

10 Powerful JavaScript Destructuring Techniques Every Developer Should Know
New JavaScript features
How JavaScript Works
Primitive vs Reference Data Types in JavaScript
Compare require() vs import() in JavaScript
export default thing is different to export { thing as default }
Optimizing JavaScript Standard Library Functions in JSC
What Does 'this' Mean in JavaScript? The this Keyword Explained with Examples

Lexical scope is the definition area of an expression.

In other words, an item's lexical scope is the place in which the item got created.

Note:
- Another name for lexical scope is static scope.
- The place an item got invoked (or called) is not necessarily the item's lexical scope. Instead, an item's definition space is its lexical scope.

Arrow Functions vs. Regular Functions in JavaScript
- Simple Invocation: this equals the global object or maybe undefined if you are using strict mode.
- Method Invocation: this equals the object that owns the method.
- Indirect Invocation: this equals the first argument.
- Constructor Invocation: this equals the newly created instance.
A pipe operator for JavaScript: introduction and use cases
Understanding the “this” Keyword in JavaScript
- Immediately Invoked Function Expression (IIFE)
- “this” Refers to an Invoker Object (Parent Object)
Classes vs. prototypal inheritance in vanilla JS
How the JavaScript Event Loop Works
How Exactly Does the ‘new’ Keyword work in JavaScript?
prototype in Javascript
JavaScript Operators — What are Unary Operators?
How JavaScript Maps Can Make Your Code Faster
How to remove items from an object with object destructuring and the spread operator
```
let { hobbies, height, eyes, ...merlinAbridged } = merlin
```
JavaScript's Forgotten Keyword (with)
How to avoid uncaught async errors in Javascript
What is type coercion in vanilla JavaScript (and how does it work)?
Tasks, microtasks, queues and schedules
Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript
🔥 Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon & LinkedIn
JavaScript Under The Hood: Advanced Concepts Developers Should Know
All About JavaScript Events
- Browser Events These events occur in the browser window rather than the HTML page. Event handlers are bound to the window object, not to the element. E.g., load, error, scroll, resize, etc.
- HTML Events This is the inverse of the browser event. They are the event that occurs in the element, and the event handlers are bound to the element. E.g., click, mouseover, mouseenter, etc.
Working with the DOM in JavaScript
The global structuredClone() method creates a deep clone of a given value using the structured clone algorithm.
JavaScript Require – How to Use the require() Function in JS
- The require() function can be called from anywhere within the program, whereas import() cannot be called conditionally. It always runs at the beginning of the file.
- To include a module with the require() function, that module must be saved with a .js extension instead of .mjs when the import() statement is used.

Understand the Lexical Scoping in JavaScript

// Function scope vs Block scope example

function myFunc() {
  if (true) {
    var varVar = "function scoped variable"
    let letVar = "block scoped variable"
    const constVar = "also block scoped variable"
  }
  console.log(varVar)
  console.log(letVar)
  console.log(constVar)
}

myFunc()

// result:

// -> function scoped variable
// -> ReferenceError: letVar is not defined
// -> ReferenceError: constVar is not defined

A Better Way to Work With Number and Date Inputs in JavaScript
- valueAsNumber, valueAsDate
Two-way data binding and reactivity with 15 lines of vanilla JavaScript
- Proxy, Event delegate

JavaScript closest

const link = document.querySelector("li a")
const list = a.closest("ul")

Javascript labeled statement
Patterns for Reactivity with Modern Vanilla JavaScript
10 Interview Questions Every JavaScript Developer Should Know in 2024
Garbage collection and closures
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript

Avoid the “delete” Keyword in JavaScript

const snowbit = {
  age: 15,
  test: "abc",
}
const { test, ...newSnowbit } = snowbit
console.log(newSnowbit) //  {age: 15}

Let me explain, You should not use delete to remove the property from the object because this mutates the original and that can lead to unpredictable behaviours and becomes difficult to debug.

What are wrapper objects for primitive values?

Each of the primitive types boolean, number, bigint, string and symbol has an associated wrapper class (Boolean, Number, BigInt, String, Symbol). In this blog post, we examine what these classes are good for.

Table of contents:

Wrapper classes for primitive types
Instantiating wrapper classes
1. Generically wrapping primitive values
2. Unwrapping primitive values
3. Primitive values vs. wrapper objects
Function-calling wrapper classes
Further reading

Closure

Closures: A closure is a function having access to the parent scope, even after the parent function has closed.
Closures: A function bundled together with its lexical environment forms a closure.

Advantages and Disadvantages of Closures

Advantages

Closures help in data encapsulation, i.e, with closures, you can store data in a separate scope and share it only where necessary.
Modern JavaScript libraries (like React) heavily rely on closures for rendering components on state or prop change.

Disadvantages

Closures consume a lot of memory space since the functions need to store the value of the variable in memory, even though the function of the variable itself would not be used multiple times in the code.

Promise

JavaScript Promises: then(f,f) vs then(f).catch(f)
JavaScript Visualized: Promise Execution

Long story short, Promises are just objects with some additional functionality to change their internal state.

The cool thing about Promises is that this can trigger an asynchronous action if a handler is attached by either then or catch. Since the handlers are pushed to the Microtask Queue, you can handle the eventual result in a non-blocking way. This makes it easier to handle errors, chain multiple operations together, and keep your code more readable and maintainable!

Symbol

JavaScript Symbols: the Most Misunderstood Feature of the Language?
```
let a = "foo"
```
- The primitive is “foo”, not a.
- Another very interesting aspect around this, is that primitives in JavaScript are immutable. That means you can’t change the number 2 ever. Instead, you can reassign a variable to have another (immutable) primitive value.
- Symbols are primitive values and can be assigned to variables.

Events

All About JavaScript Events
- Browser Events These events occur in the browser window rather than the HTML page. Event handlers are bound to the window object, not to the element. E.g., load, error, scroll, resize, etc.
- HTML Events This is the inverse of the browser event. They are the event that occurs in the element, and the event handlers are bound to the element. E.g., click, mouseover, mouseenter, etc.
EventTarget.dispatchEvent()

Date

the__alchemist's comment

Thank god. Javascript is the only language where I... wait for it... roll my own datetimes. Moment's central failure, beyond the surprise mutability, is the conflation of Dates and Times with Datetimes. They are not the same, and this causes so many problems. Python's Arrow library made the same mistake, likely inspired by Moment. I've heard JS devs insist that Dates and Times have no place as standalone constructs outside of a Datetime, but this is incompatible with practical use cases. Rust's Chrono? Outstanding. You can find flaws, but it's generally predictable, and most importantly, has fewer flaws than those in other languages. Python's? Kind of messy, but usable. JS's Date and Moment? Unusable.

My favorite Date v Datetime bug is that Chile changes to DLS at midnight and not 1am. So it’s goes 11:59>1am. Many systems that conflate dates and date times take the existence of midnight as an invariant, which it is not. - dexwiz

Children