Damien Gonot
Home Blog Notes About

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
2

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

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.

RedwoodJS

https://redwoodjs.com/

Remix

https://remix.run/

Astro

https://astro.build/

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

Lightweight

React-like

Other

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/