🐿️ Squirrel Pie - Comprehensive Demo
Showcasing all supported AST node types with interactive syntax highlighting
Classes & Object-Oriented Programming
ES6 Classes with Getters, Setters & Static Members
class Animal {
static kingdom = 'Animalia';
#privateField = 'secret';
constructor(name, species) {
this.name = name;
this.species = species;
}
get description() {
return `${this.name} is a ${this.species}`;
}
set nickname(value) {
this.name = value;
}
static compare(a, b) {
return a.species === b.species;
}
static {
console.log('Class initialized');
}
}
Class Inheritance
class Dog extends Animal {
constructor(name, breed) {
super(name, 'Dog');
this.breed = breed;
}
bark() {
return `${this.name} says woof!`;
}
}
Functions
Arrow Functions
const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => 'Hello!';
const complex = (x, y) => {
const sum = x + y;
return sum * 2;
};
Async Functions & Await
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
throw error;
}
}
const getData = async () => await fetchData('/api');
Generator Functions
function* fibonacci() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
function* range(start, end) {
for (let i = start; i < end; i++) {
yield i;
}
}
Destructuring & Patterns
Array & Object Destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
const {name, age, city = 'Unknown'} = user;
const {x: posX, y: posY} = coordinates;
function processUser({id, name, email}) {
return {id, name, email};
}
Default Parameters & Rest/Spread
function greet(name = 'Guest', greeting = 'Hello') {
return `${greeting}, ${name}!`;
}
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const merged = {...obj1, ...obj2};
Control Flow
If/Else & Switch
if (score >= 90) {
grade = 'A';
} else if (score >= 80) {
grade = 'B';
} else {
grade = 'C';
}
switch (day) {
case 'Monday':
console.log('Start of week');
break;
case 'Friday':
console.log('Almost weekend!');
break;
default:
console.log('Regular day');
}
Loops
for (let i = 0; i < 10; i++) {
console.log(i);
}
for (const key in object) {
console.log(key, object[key]);
}
for (const item of array) {
console.log(item);
}
for await (const chunk of stream) {
process(chunk);
}
while (condition) {
doSomething();
}
do {
doSomething();
} while (condition);
Try/Catch/Finally
try {
riskyOperation();
} catch (error) {
console.error('Error occurred:', error);
} finally {
cleanup();
}
try {
await fetchData();
} catch {
console.log('Failed to fetch');
}
Labels, Break & Continue
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) break outer;
if (j === 0) continue;
console.log(i, j);
}
}
Modern JavaScript Features
Template Literals & Tagged Templates
const name = 'World';
const greeting = `Hello, ${name}!`;
const multiline = `
Line 1
Line 2
`;
function tag(strings, ...values) {
return strings[0] + values[0].toUpperCase();
}
const styled = tag`hello ${name}`;
Optional Chaining & Nullish Coalescing
const value = obj?.prop?.nested;
const result = func?.();
const item = array?.[0];
const name = user.name ?? 'Anonymous';
const count = data?.length ?? 0;
Logical Assignment
x ||= 10;
y &&= 5;
z ??= 'default';
Modules
Import & Export
import React from 'react';
import {useState, useEffect} from 'react';
import * as utils from './utils.js';
import('./dynamic.js').then(module => {});
export const PI = 3.14159;
export function calculate(x) {
return x * 2;
}
export default class MyClass {}
export {foo, bar} from './other.js';
export * from './all.js';
Expressions & Operators
All Operators
const arithmetic = a + b - c * d / e % f ** 2;
const logical = (x && y) || (z ?? w);
const comparison = a === b && c !== d && e < f && g > h;
const bitwise = ((x & y) | (z ^ (~w << 2))) >> 1 >>> 3
const unary = (+x, -y, !z, ~w, typeof v, void 0);
const update = (++i, --j, k++, l--);
const ternary = condition ? true : false;
const sequence = (a, b, c);
const instanceCheck = obj instanceof Class;
const inCheck = 'key' in object;
const deleteOp = delete obj.prop;
Special Expressions
const obj = {name: 'test', [computed]: value};
const arr = [1, 2, ...others];
const newObj = new MyClass(arg1, arg2);
const result = /pattern/gi.test(str);
const meta = import.meta.url;
const bigNumber = 123456789n;
Complex Real-World Example
Complete Application Pattern
class DataService {
#cache = new Map();
async fetchUser(id) {
if (this.#cache.has(id)) {
return this.#cache.get(id);
}
try {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) throw new Error('Failed');
const user = await response.json();
this.#cache.set(id, user);
return user;
} catch (error) {
console.error('Error:', error);
return null;
}
}
static async create() {
const service = new DataService();
await service.init();
return service;
}
}
const processUsers = async (ids) => {
const service = await DataService.create();
const results = [];
for (const id of ids) {
const user = await service.fetchUser(id);
if (user) results.push(user);
}
return results;
};