JavaScript
Homepage / Notes / Computer Science / Programming Languages / JavaScript
Language Features
Strings
console.log('Hello, World!')Hello, World!
String concatenation:
return 'hello' + 'world'helloworld
Numbers
return 1 + 12
Arrays
return [1, 2, 3][ 1, 2, 3 ]
Objects
return {key: 'value'}{ key: 'value' }
TypeScript
Basics
function hello(name) {
return "hello " + name;
}
console.log(hello("world"));../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-P72lay.ts(1,16): error TS7006: Parameter 'name' implicitly has an 'any' type.
hello world
function hello(name: string) {
return "hello " + name;
}
console.log(hello("world"));hello world
function hello(name: string) {
return "hello " + name;
}
console.log(hello(2));../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-Rg1elh.ts(5,19): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
hello 2
const obj = { name: "Damien", age: 28 };
obj.location;../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-NiBopQ.ts(2,5): error TS2339: Property 'location' does not exist on type '{ name: string; age: number; }'.
Types
stringnumberbooleannumber[]/Array<number>any
Type declaration on variable
let myName: string = "Damien";Type declaration on function parameter
function greet(name: string) {
console.log("Hello, " + name.toUpperCase());
}
greet("Damien");Hello, DAMIEN
function greet(name: string) {
console.log("Hello, " + name.toUpperCase());
}
greet(42);^ runtime error
Type declaration on function return
function getFavoriteNumber(): number {
return 9;
}Object Types
function printCoord(pt: { x: number; y: number }) {
console.log(`${pt.x}, ${pt.y}`);
}
printCoord({ x: 9, y: 2 });9, 2
Optional Parameters
function printName(obj: { firstName: string; lastName?: string }) {
console.log(`${obj.firstName}${obj.lastName}`);
}
printName({ firstName: "Damien" });
printName({ firstName: "Damien", lastName: "Gonot" });Damienundefined
DamienGonot
function printName(obj: { firstName: string; lastName?: string }) {
if (obj.lastName !== undefined) {
console.log(`${obj.firstName} ${obj.lastName}!`);
} else {
console.log(`${obj.firstName}!`);
}
}
printName({ firstName: "Damien" });
printName({ firstName: "Damien", lastName: "Gonot" });Damien!
Damien Gonot!
Union Types
When a value could be any of multiple types.
function printId(id: number | string) {
console.log("Your ID is: " + id);
}
printId(101);
printId("202");
printId({ myID: 22342 });../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-lKsnQz.ts(9,9): error TS2345: Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
Type '{ myID: number; }' is not assignable to type 'number'.
Your ID is: 101
Your ID is: 202
Your ID is: [object Object]
Type Aliases
type Point = {
x: number;
y: number;
};
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });The coordinate's x value is 100
The coordinate's y value is 100
Interfaces
interface Point {
x: number;
y: number;
}
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });The coordinate's x value is 100
The coordinate's y value is 100
Type Assertions
When you know what to expect but TS doesn't know about it yet.
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");Literal Types
function printDirection(s: "North" | "East" | "South" | "West") {
console.log(s);
}
printDirection("North");
printDirection("South-West");../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-F4JdCD.ts(6,16): error TS2345: Argument of type '"South-West"' is not assignable to parameter of type '"North" | "East" | "South" | "West"'.
North
South-West
Enums
Not related to types but more of a new features added by TS.
enum Direction {
Up,
Down,
Left,
Right,
}ts-pattern
import { match } from 'ts-pattern';
type State =
| { status: 'success'; data: string }
| { status: 'error'; error: Error };
const result: State = { status: 'success', data: 'toast' };
const output = match(result)
.with({ status: 'error' }, () => 'An error occurred')
.with({ status: 'success' }, () => result.data)
.exhaustive();
console.log(output)toast
pattycake
Pattycake is an optimizing compiler for ts-pattern that lets you have your cake (expressive pattern matching), and eat it too (zero runtime overhead).
https://github.com/aidenybai/pattycake
Full-stack frameworks
Next.js
The React Framework for the Web
i18n
https://daily.dev/blog/internationalization-i18n-in-nextjs
Kirimase
Kirimase is a command-line tool (CLI) for building full-stack Next.js apps faster. It supercharges your development workflow, allowing you to quickly integrate packages and scaffold resources for your application with best practices in mind.
Blitzjs
Ship. Fast. The Missing Fullstack Toolkit for Next.js Blitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling world wide applications.
RedwoodJS
Remix
Astro
Build faster websites. Pull content from anywhere and serve it fast with Astro's next-gen island architecture. Astro is the web framework that you'll enjoy using.
AdonisJS
A fully featured web framework for Node.js AdonisJS includes everything you need to create a fully functional web app or an API server. So stop wasting hours downloading and assembling hundreds of packages — Use AdonisJS and be productive from day one.
Front-end
React
React codebase generator: https://divjoy.com/
Hooks
https://wattenberger.com/blog/react-hooks
State Management
Kea
Composable state management for React
Recoil
A state management library for React
TanStack Query
https://tanstack.com/query/latest
Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte
MobX-State-Tree
https://github.com/mobxjs/mobx-state-tree
Full-featured reactive state management without the boilerplate
Zustand
https://github.com/pmndrs/zustand
🐻 Bear necessities for state management in React
Tools
React Scan
https://github.com/aidenybai/react-scan
React Scan automatically detects performance issues in your React app
Lightweight
React-like
Other
- https://mithril.js.org/
- https://svelte.dev/ (+ backend: https://kit.svelte.dev/)
- https://elderguide.com/tech/elderjs/ Elder.js: An Opinionated, SEO focused, Svelte Framework
- https://github.com/alpinejs/alpine minimal framework for composing JavaScript behaviour in your markup
- https://htmx.org/ htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx playground: https://lassebomh.github.io/htmx-playground/
- https://leanrada.com/htmz/ htmz is a minimalist HTML microframework that gives you the power to create modular web user interfaces with the familiar simplicity of plain HTML
Solid.js
Similar to React, but compiled, interesting https://github.com/ryansolid/solid
Qwik
The HTML-first framework. Instant apps of any size with ~ 1kb JS
Thin
https://thin.dev/ Paid backend for SPA React apps
Components
Stencil
Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.
Shoelace
A forward-thinking library of web components.
Bundlers
Webpack
https://webpack.js.org/ The "OG" bundler
IMO, complex options and config
Rollup
https://rollupjs.org/guide/en/ Next-generation ES module bundler
IMO still too complex
Parcel
https://parceljs.org/ Blazing fast, zero configuration web application bundler
Snowpack
https://www.snowpack.dev/ Snowpack is a lightning-fast frontend build tool, designed for the modern web
CMS
Ghost
https://github.com/TryGhost/Ghost
👻 The #1 headless Node.js CMS for professional publishing
Payload
The most powerful TypeScript headless CMS there is.
ORM
https://www.prisma.io/ Next-generation ORM for Node.js and TypeScript
Native Applications
Tauri
Runtimes
Deno
A modern runtime for JavaScript and TypeScript
Frameworks
Fresh
The next-gen web framework.
Bun
Bun is a fast all-in-one JavaScript runtime
Frameworks
Elysia
Fast, and friendly Bun web framework.
Blueboat
All-in-one serverless JavaScript runtime
AssemblyScript
https://www.assemblyscript.org/
A TypeScript-like language for WebAssembly.
Static Typing Systems
TypeScript
Flow
Hegel
https://github.com/JSMonk/hegel
An advanced static type checker
Game Engines
Melon
https://github.com/melonjs/melonJS
a fresh & lightweight javascript game engine
Styling
Tamagui
Write less, runs faster. Styles, optimizing compiler & UI kit that unify React Native + Web
E-commerce
Medusa
The Open Source Shopify Alternative
Misc Packages
mdx
JSX in Markdown
Vite
Modern Webpack replacement
Vike
Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.
Rows n' Columns
Spreadsheet system in React
Leaflet
An open-source JavaScript library for mobile-friendly interactive maps
Brain.js
Brain.js: GPU accelerated Neural networks in JavaScript for Browsers and Node.js
froebel
https://github.com/MathisBullinger/froebel
A strictly typed utility library.
TinyBase
The reactive data store for local‑first apps.
tRPC
Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
Auth.js
Authentication for the Web.
Better Auth
https://github.com/better-auth/better-auth
The most comprehensive authentication framework for TypeScript
RxDB
The perfect Database for JavaScript applications
AutoAnimate
https://auto-animate.formkit.com/
Add motion to your apps with a single line of code. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Solid, Vue, Svelte, or any other JavaScript application.
react-magic-motion
https://www.react-magic-motion.com/
react-magic-motion is a react.js library that ✨ magically animates your components.
react-hot-toast
Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.
Remeda
The first "data-first" and "data-last" utility library designed especially for TypeScript.
ky
https://github.com/sindresorhus/ky
🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API
postgres
https://github.com/porsager/postgres
Postgres.js - The Fastest full featured PostgreSQL client for Node.js, Deno, Bun and CloudFlare
zod
TypeScript-first schema validation with static type inference
Orange
A full-stack JavaScript framework for Cloudflare's developer platform on top of React Router v7
Languine
Localization infrastructure made for fast-paced startups.
Trigger.dev
Background jobs & AI infrastructure
Write workflows in normal async code and we'll handle the rest, from queues to elastic scaling. No timeouts, retries, observability, and zero infrastructure to manage.
Resources
The Modern JavaScript Tutorial
Modern Javascript: Everything you missed over the last 10 years
https://turriate.com/articles/modern-javascript-everything-you-missed-over-10-years
JavaScript for impatient programmers
https://exploringjs.com/impatient-js/toc.html