🚀 JavaScript ⭐ Advanced

BarbrickDesign Complete Programming Language Portfolio

← Back to All Languages

📊 Language Information

Language

JavaScript

File Extension

.js

💻 Source Code

hello.js

/**
 * JavaScript Advanced Sample - Demonstrating Most Powerful Features
 * BarbrickDesign - Complete Language Portfolio
 * 
 * Features demonstrated:
 * - Promises & Async/Await
 * - Closures & Higher-Order Functions
 * - Destructuring & Spread Operators
 * - Proxy & Reflect API
 * - Generators & Iterators
 * - Symbols & WeakMaps
 * - ES6+ Classes with private fields
 * - Functional programming patterns
 */

// ============ Advanced Class with Private Fields ============
class SmartCache {
    #cache = new Map();
    #maxSize;
    
    constructor(maxSize = 100) {
        this.#maxSize = maxSize;
    }
    
    set(key, value) {
        if (this.#cache.size >= this.#maxSize) {
            const firstKey = this.#cache.keys().next().value;
            this.#cache.delete(firstKey);
        }
        this.#cache.set(key, value);
    }
    
    get(key) {
        return this.#cache.get(key);
    }
    
    get size() {
        return this.#cache.size;
    }
}

// ============ Proxy Pattern ============
const createObservable = (target, callback) => {
    return new Proxy(target, {
        set(obj, prop, value) {
            const oldValue = obj[prop];
            obj[prop] = value;
            callback(prop, oldValue, value);
            return true;
        }
    });
};

// ============ Generator Function ============
function* fibonacci(limit) {
    let [a, b] = [0, 1];
    while (a < limit) {
        yield a;
        [a, b] = [b, a + b];
    }
}

// ============ Higher-Order Functions ============
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

// ============ Currying ============
const curry = (fn) => {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        }
        return (...nextArgs) => curried.apply(this, [...args, ...nextArgs]);
    };
};

// ============ Memoization ============
const memoize = (fn) => {
    const cache = new Map();
    return (...args) => {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn(...args);
        cache.set(key, result);
        return result;
    };
};

// ============ Async Operations ============
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function fetchWithRetry(url, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            await delay(100); // Simulate network delay
            if (Math.random() > 0.3) { // 70% success rate
                return { url, data: `Data from ${url}`, attempt: i + 1 };
            }
            throw new Error('Fetch failed');
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            console.log(`Retry ${i + 1}/${maxRetries} for ${url}`);
        }
    }
}

// ============ Symbol Usage ============
const secretKey = Symbol('secretKey');
const iterableObj = {
    data: [1, 2, 3, 4, 5],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.data.length) {
                    return { value: this.data[index++], done: false };
                }
                return { done: true };
            }
        };
    }
};

// ============ Advanced Array Methods ============
const arrayOperations = {
    // Flat and flatMap
    flatten: (arr) => arr.flat(Infinity),
    
    // Group by
    groupBy: (arr, key) => arr.reduce((acc, item) => {
        const group = item[key];
        acc[group] = acc[group] ?? [];
        acc[group].push(item);
        return acc;
    }, {}),
    
    // Chunk array
    chunk: (arr, size) => Array.from(
        { length: Math.ceil(arr.length / size) },
        (_, i) => arr.slice(i * size, i * size + size)
    ),
    
    // Unique values
    unique: (arr) => [...new Set(arr)]
};

// ============ WeakMap for Memory Management ============
const metadata = new WeakMap();

class DataProcessor {
    constructor(name) {
        this.name = name;
        metadata.set(this, {
            created: Date.now(),
            operations: 0
        });
    }
    
    process(data) {
        const meta = metadata.get(this);
        meta.operations++;
        return data.map(x => x * 2);
    }
    
    getStats() {
        return metadata.get(this);
    }
}

// ============ Main Execution ============
async function main() {
    console.log('🚀 JAVASCRIPT ADVANCED FEATURES SHOWCASE\n');
    
    // 1. Destructuring & Spread
    console.log('=== Destructuring & Spread ===');
    const { language, ...rest } = { language: 'JavaScript', type: 'Scripting', year: 1995 };
    console.log(`Language: ${language}, Rest:`, rest);
    
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const combined = [...arr1, ...arr2];
    console.log('Combined:', combined);
    
    // 2. Generator
    console.log('\n=== Generators ===');
    const fibSeq = [...fibonacci(100)];
    console.log('Fibonacci < 100:', fibSeq.join(', '));
    
    // 3. Closures & Private Data
    console.log('\n=== Closures ===');
    const counter = (() => {
        let count = 0;
        return {
            increment: () => ++count,
            decrement: () => --count,
            value: () => count
        };
    })();
    console.log('Counter:', counter.increment(), counter.increment(), counter.value());
    
    // 4. Higher-Order Functions
    console.log('\n=== Functional Composition ===');
    const add5 = x => x + 5;
    const multiply3 = x => x * 3;
    const square = x => x * x;
    
    const composed = compose(square, multiply3, add5);
    console.log('compose(square, *3, +5)(10):', composed(10)); // (10+5)*3^2 = 2025
    
    const piped = pipe(add5, multiply3, square);
    console.log('pipe(+5, *3, square)(10):', piped(10)); // ((10+5)*3)^2 = 2025
    
    // 5. Currying
    console.log('\n=== Currying ===');
    const multiply = curry((a, b, c) => a * b * c);
    const multiplyBy2 = multiply(2);
    const multiplyBy2And3 = multiplyBy2(3);
    console.log('Curried multiply(2)(3)(4):', multiplyBy2And3(4));
    
    // 6. Memoization
    console.log('\n=== Memoization ===');
    const fibonacci_slow = n => n <= 1 ? n : fibonacci_slow(n - 1) + fibonacci_slow(n - 2);
    const fibonacci_fast = memoize(fibonacci_slow);
    console.log('Memoized fib(10):', fibonacci_fast(10));
    
    // 7. Proxy
    console.log('\n=== Proxy Pattern ===');
    const user = createObservable({ name: 'John', age: 30 }, (prop, oldVal, newVal) => {
        console.log(`Property '${prop}' changed: ${oldVal} → ${newVal}`);
    });
    user.age = 31;
    user.name = 'Jane';
    
    // 8. Symbol & Custom Iterator
    console.log('\n=== Custom Iterator ===');
    for (const value of iterableObj) {
        console.log('Iterated value:', value);
    }
    
    // 9. Array Operations
    console.log('\n=== Advanced Array Operations ===');
    const nested = [1, [2, [3, [4, [5]]]]];
    console.log('Flattened:', arrayOperations.flatten(nested));
    
    const chunked = arrayOperations.chunk([1, 2, 3, 4, 5, 6, 7], 3);
    console.log('Chunked:', chunked);
    
    // 10. Async/Await with Retry
    console.log('\n=== Async/Await with Retry ===');
    try {
        const urls = ['api/users', 'api/posts', 'api/comments'];
        const results = await Promise.allSettled(
            urls.map(url => fetchWithRetry(url))
        );
        
        results.forEach(result => {
            if (result.status === 'fulfilled') {
                console.log(`✓ Success:`, result.value.url);
            } else {
                console.log(`✗ Failed:`, result.reason.message);
            }
        });
    } catch (error) {
        console.log('Error:', error.message);
    }
    
    // 11. WeakMap & Memory Management
    console.log('\n=== WeakMap (Memory Management) ===');
    const processor = new DataProcessor('Test');
    const processed = processor.process([1, 2, 3, 4, 5]);
    console.log('Processed:', processed);
    console.log('Stats:', processor.getStats());
    
    // 12. Smart Cache
    console.log('\n=== Smart Cache ===');
    const cache = new SmartCache(3);
    cache.set('key1', 'value1');
    cache.set('key2', 'value2');
    cache.set('key3', 'value3');
    console.log('Cache size:', cache.size);
    console.log('Get key1:', cache.get('key1'));
    
    // 13. Template Literals & Tagged Templates
    console.log('\n=== Tagged Templates ===');
    const highlight = (strings, ...values) => {
        return strings.reduce((acc, str, i) => {
            return acc + str + (values[i] ? `**${values[i]}**` : '');
        }, '');
    };
    
    const name = 'JavaScript';
    const year = 1995;
    const result = highlight`Created: ${name} in ${year}`;
    console.log(result);
    
    console.log('\n✅ All advanced JavaScript features demonstrated!');
}

// Run main function
if (typeof window === 'undefined') {
    main().catch(console.error);
}

// Export for module systems
if (typeof module !== 'undefined') {
    module.exports = { 
        main, 
        SmartCache, 
        fibonacci, 
        compose, 
        pipe, 
        curry, 
        memoize,
        arrayOperations 
    };
}

▶️ Example Output

This is what the above JavaScript code produces when executed with Node.js:

Console Output

🚀 JAVASCRIPT ADVANCED FEATURES SHOWCASE

=== Destructuring & Spread ===
Language: JavaScript, Rest: { type: 'Scripting', year: 1995 }
Combined: [ 1, 2, 3, 4, 5, 6 ]

=== Generators ===
Fibonacci < 100: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89

=== Closures ===
Counter: 1 2 2

=== Functional Composition ===
compose(square, *3, +5)(10): 2025
pipe(+5, *3, square)(10): 2025

=== Currying ===
Curried multiply(2)(3)(4): 24

=== Memoization ===
Memoized fib(10): 55

=== Proxy Pattern ===
Property 'age' changed: 30 → 31
Property 'name' changed: John → Jane

=== Custom Iterator ===
Iterated value: 1
Iterated value: 2
Iterated value: 3
Iterated value: 4
Iterated value: 5

=== Advanced Array Operations ===
Flattened: [ 1, 2, 3, 4, 5 ]
Chunked: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7 ] ]

=== Async/Await with Retry ===
Retry 1/3 for api/comments
✓ Success: api/users
✓ Success: api/posts
✓ Success: api/comments

=== WeakMap (Memory Management) ===
Processed: [ 2, 4, 6, 8, 10 ]
Stats: { created: 1768582778898, operations: 1 }

=== Smart Cache ===
Cache size: 3
Get key1: value1

=== Tagged Templates ===
Created: **JavaScript** in **1995**

✅ All advanced JavaScript features demonstrated!

💡 Interactive Demo: The code above demonstrates JavaScript's most powerful features including closures, async/await, proxies, generators, functional composition, and modern ES6+ syntax.

🎮 Interactive JavaScript Playground

Experience JavaScript in action! Try these live interactive demonstrations:

🎨 DOM Manipulation

Click the buttons to see JavaScript manipulate the DOM in real-time:

Interactive Demo Box

⚡ Event Handling

Interact with different event types:

Click Me!

Hover Over Me!

🖱️

Type Here

0 characters

📊 Dynamic Data Visualization

Watch data update in real-time:

Statistics:

✨ Animations & Transitions

Smooth animations powered by JavaScript:

Ready to animate!

✅ Live Form Validation

Real-time validation as you type:

🔗 Explore Other Languages

Discover and compare 56 other programming languages in our portfolio

Special Purpose Languages

Dart Groovy

Graphics & Shaders

GLSL

text/x-hlsl

HLSL

Data & Scientific Languages

Julia MATLAB R SQL

Blockchain & Smart Contracts

Solidity