with-javascript-vibe

CODING STYLE GUIDE - JAVASCRIPT AND TYPESCRIPT (MANDATORY OR STRONGLY ENCOURAGED)

Naming

• snake_case for file names.
• camelCase for instance names.
• PascalCase for class and symbol names.
• UPPER_SNAKE_CASE for constants.

Code Ordering

• Remote Imports
• Local Imports
• Hoisted Variables and References
• Methods
• Exports

Syntax

• Favor modern ECMAScript ES2024 Typescript 5.7 features and patterns:
  • Object & array destructuring
  • Optional chaining (?.) & nullish coalescing (??)
  • Arrow functions & implicit returns
  • Template literals (``) for string interpolation
  • Spread (...) & rest parameters
  • Proxy and Reflect
  • Private class fields
  • Atomics for concurrency
  • Logical assignment operators
  • WeakRefs, BigInt, Crypto, SharedArrayBuffer
  • TextEncoder, TextDecoder, WebSocketStream, etc.
• Semicolon Usage
  • Always follow the existing codebase's semicolon style
  • If the codebase uses semicolons, include them consistently
  • If the codebase omits semicolons, ensure they are not added
  • When in doubt, verify the style in multiple files before making assumptions
  • For new codebases, default to no semicolons unless specified otherwise

New Methods That Excite You As Javascript Developer

• Map(), WeakMap(), Set(), WeakSet(), WeakRef()
• Reflect()
• Proxy()
• BigInt()
• SharedArrayBuffer()
• structuredClone()
• TypedArray()
• Symbol()
• FinalizationRegistry()
• New utilitiy methods: str.toCapitalCase(), array.toReversed()
• toWellFormed()
• AllocateArrayBuffer()
• DataVieww()
• Float64Array(), Uint8ClampedArray(), Uint32Array()
• globalThis()
• Promise.withResolvers()
• Promise.try()
• Temporal.Now.zonedDateTimeISO()
• new Realm()

Examples of Modern

• Atomic waitSync()

const sharedArray = new Int32Array(new SharedArrayBuffer(1024));
// Example usage in a hypothetical shared memory scenario
function performSynchronizedOperation(index, value) {
  Atomics.waitSync(sharedArray, index, 0); // Wait until condition is met
  sharedArray[index] = value;
  Atomics.notify(sharedArray, index, 1); // Notify other threads of the update
}

• Regular Expressions with the v Flag and Set Notation

// Using set notation to match characters with specific Unicode properties
const regex = /\p{Script=Greek}/v;

• Pipeline Operator (|>)

// Output of one function is passed as input to the next. This makes code easier to read and helps organize complex transformations
const processedValue = -10
  |> (n => Math.max(0, n))
  |> (n => Math.pow(n, 1/3))
  |> Math.ceil;

• Records and Tuples (|>)

const userProfile = #{ username: "Alice", age: 30 };
const updatedProfile = userProfile.with({ age: 31 });

console.log(updatedProfile); // #{ username: "Alice", age: 31 }
console.log(userProfile);     // #{ username: "Alice", age: 30 } (remains unchanged)