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 + 1

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

string
number
boolean
number[] / 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

https://nextjs.org/

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.

https://kirimase.dev/

Blitzjs

https://blitzjs.com/

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.

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

https://adonisjs.com/

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

https://keajs.org/

Composable state management for React

Recoil

https://recoiljs.org/

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

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

https://qwik.builder.io/

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.

https://stenciljs.com/

Shoelace

A forward-thinking library of web components.

https://shoelace.style/

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

https://payloadcms.com/

The most powerful TypeScript headless CMS there is.

ORM

https://www.prisma.io/ Next-generation ORM for Node.js and TypeScript

Native Applications

Tauri

https://tauri.app/

Runtimes

Deno

https://deno.land/

A modern runtime for JavaScript and TypeScript

Frameworks

Fresh

https://fresh.deno.dev/

The next-gen web framework.

Bun

https://bun.sh/

Bun is a fast all-in-one JavaScript runtime

Frameworks

Elysia

https://elysiajs.com/

Fast, and friendly Bun web framework.

Blueboat

https://blueboat.io/

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

https://tamagui.dev/

Write less, runs faster. Styles, optimizing compiler & UI kit that unify React Native + Web

E-commerce

Medusa

https://medusajs.com/

The Open Source Shopify Alternative

Misc Packages

mdx

https://github.com/mdx-js/mdx

JSX in Markdown

Vite

https://vitejs.dev/

Modern Webpack replacement

Vike

https://vike.dev/

Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.

Rows n' Columns

https://rowsncolumns.app/

Spreadsheet system in React

Leaflet

https://leafletjs.com/

An open-source JavaScript library for mobile-friendly interactive maps

Brain.js

https://brain.js.org/

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

https://tinybase.org/

The reactive data store for local‑first apps.

tRPC

https://trpc.io/

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.

Auth.js

https://authjs.dev/

Authentication for the Web.

RxDB

https://rxdb.info/

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`

https://react-hot-toast.com/

Smoking hot Notifications for React. Lightweight, customizable and beautiful by default.

Remeda

https://remedajs.com/

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

https://zod.dev/

TypeScript-first schema validation with static type inference

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

Mastering DOM manipulation with vanilla JavaScript

https://phuoc.ng/collection/html-dom/

JavaScript

Language Features

Strings

Numbers

Arrays

Objects

TypeScript

Basics

Types

Type declaration on variable

Type declaration on function parameter

Type declaration on function return

Object Types

Optional Parameters

Union Types

Type Aliases

Interfaces

Type Assertions

Literal Types

Enums

ts-pattern

pattycake

Full-stack frameworks

Next.js

i18n

Kirimase

Blitzjs

RedwoodJS

Remix

Astro

AdonisJS

Front-end

React

Hooks

State Management

Kea

Recoil

TanStack Query

MobX-State-Tree

Zustand

Lightweight

React-like

Other

Solid.js

Qwik

Thin

Components

Stencil

Shoelace

Bundlers

Webpack

Rollup

Parcel

Snowpack

CMS

Ghost

Payload

ORM

Native Applications

Tauri

Runtimes

Deno

Frameworks

Fresh

Bun

Frameworks

Elysia

Blueboat

AssemblyScript

Static Typing Systems

TypeScript

Flow

Hegel

Game Engines

Melon

Styling

Tamagui

E-commerce

Medusa

Misc Packages

`react-magic-motion`

`react-hot-toast`