JavaScript ES6+ - De la Începător la Expert

📋 Cuprins Complet

• 1. Introducere în JavaScript ES6+
• 2. Variabile și Scope Modern (let, const)
• 3. Arrow Functions și This Binding
• 4. Destructuring și Spread/Rest Operators
• 5. Template Literals și String Methods
• 6. Programarea Asincronă (Promises, Async/Await)
• 7. Modules și Import/Export
• 8. Classes și Programarea Orientată pe Obiecte
• 9. Array Methods Avansate și Functional Programming
• 10. Funcționalități Moderne (ES2020-2023)

🔧 Diferențele între var, let și const

// VAR - Function scope, hoisting, redeclarare permisă
function exempleVar() {
    console.log(x); // undefined (nu eroare datorită hoisting)
    var x = 1;
    
    if (true) {
        var x = 2; // Aceeași variabilă!
        console.log(x); // 2
    }
    console.log(x); // 2 (modificată în if)
}

// LET - Block scope, temporal dead zone
function exempleLet() {
    // console.log(y); // ReferenceError: Cannot access 'y' before initialization
    let y = 1;
    
    if (true) {
        let y = 2; // Variabilă diferită (block scope)
        console.log(y); // 2
    }
    console.log(y); // 1 (neschimbată)
}

// CONST - Block scope, nu poate fi reasignată
function exempleConst() {
    const z = 1;
    // z = 2; // TypeError: Assignment to constant variable
    
    const obj = { name: 'John' };
    obj.name = 'Jane'; // OK - modificăm proprietatea, nu referința
    obj.age = 25; // OK
    
    const arr = [1, 2, 3];
    arr.push(4); // OK - modificăm conținutul, nu referința
    // arr = []; // TypeError - nu putem reasigna
}

// Best Practices
const API_URL = 'https://api.example.com'; // Constante globale
let currentUser = null; // Variabile care se schimbă
const users = []; // Arrays și objects care se modifică

// Temporal Dead Zone
function temporalDeadZone() {
    console.log(typeof x); // "undefined" - var
    // console.log(typeof y); // ReferenceError - let în TDZ
    
    var x = 1;
    let y = 2;
}

➡️ Arrow Functions - Sintaxă și Exemple

// Sintaxă tradițională vs Arrow Functions
const traditional = function(x, y) {
    return x + y;
};

const arrow = (x, y) => x + y;

// Variații de sintaxă
const noParams = () => 'Hello World';
const oneParam = x => x * 2; // parantezele sunt opționale pentru un parametru
const multipleParams = (x, y, z) => x + y + z;
const blockBody = (x, y) => {
    const sum = x + y;
    return sum * 2;
};

// Array methods cu arrow functions
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

// This binding - diferența crucială
class Counter {
    constructor() {
        this.count = 0;
    }
    
    // Funcție tradițională - this se schimbă
    incrementTraditional() {
        setTimeout(function() {
            this.count++; // this este undefined sau window
            console.log(this.count); // NaN sau eroare
        }, 1000);
    }
    
    // Arrow function - this rămâne același
    incrementArrow() {
        setTimeout(() => {
            this.count++; // this se referă la instanța Counter
            console.log(this.count); // funcționează corect
        }, 1000);
    }
    
    // Event handlers
    setupEventListeners() {
        const button = document.querySelector('#myButton');
        
        // Problemă cu funcția tradițională
        button.addEventListener('click', function() {
            this.count++; // this se referă la button, nu la Counter
        });
        
        // Soluție cu arrow function
        button.addEventListener('click', () => {
            this.count++; // this se referă la instanța Counter
        });
    }
}

// Când să NU folosești arrow functions
const obj = {
    name: 'John',
    
    // NU folosi arrow function pentru metode
    greetWrong: () => {
        console.log(`Hello, ${this.name}`); // this nu se referă la obj
    },
    
    // Folosește funcție tradițională
    greetCorrect: function() {
        console.log(`Hello, ${this.name}`); // this se referă la obj
    },
    
    // Sau method shorthand (ES6)
    greetShorthand() {
        console.log(`Hello, ${this.name}`); // this se referă la obj
    }
};

🔄 Spread și Rest Operators - Flexibilitate Maximă

// SPREAD OPERATOR (...) - "împrăștie" elementele

// Arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const copy = [...arr1]; // shallow copy

// Objects
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const merged = {...obj1, ...obj2}; // {a: 1, b: 2, c: 3, d: 4}
const updated = {...obj1, b: 10}; // {a: 1, b: 10} - override

// Function calls
const numbers = [1, 2, 3, 4, 5];
const max = Math.max(...numbers); // echivalent cu Math.max(1, 2, 3, 4, 5)

// REST OPERATOR (...) - "colectează" elementele

// Function parameters
function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}
sum(1, 2, 3, 4); // 10

// Array destructuring
const [first, ...rest] = [1, 2, 3, 4, 5];
// first = 1, rest = [2, 3, 4, 5]

// Object destructuring
const {name, ...otherProps} = {name: 'John', age: 30, city: 'NYC'};
// name = 'John', otherProps = {age: 30, city: 'NYC'}

// Practical examples
class ApiClient {
    constructor(baseURL, ...defaultHeaders) {
        this.baseURL = baseURL;
        this.headers = {...defaultHeaders};
    }
    
    async request(endpoint, {method = 'GET', headers = {}, ...options} = {}) {
        const config = {
            method,
            headers: {...this.headers, ...headers},
            ...options
        };
        
        const response = await fetch(`${this.baseURL}${endpoint}`, config);
        return response.json();
    }
}

// Usage
const api = new ApiClient('https://api.example.com', 
    {'Content-Type': 'application/json'},
    {'Authorization': 'Bearer token'}
);

// Cloning și updating objects
const user = {id: 1, name: 'John', email: 'john@example.com'};
const updatedUser = {
    ...user,
    name: 'John Doe', // update name
    lastLogin: new Date() // add new property
};

⚡ Async/Await - Exemple Practice

// PROMISES - Fundația
function fetchUser(id) {
    return fetch(`/api/users/${id}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .catch(error => {
            console.error('Fetch error:', error);
            throw error;
        });
}

// ASYNC/AWAIT - Sintaxă Modernă
async function fetchUserAsync(id) {
    try {
        const response = await fetch(`/api/users/${id}`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const user = await response.json();
        return user;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error;
    }
}

// Multiple async operations
async function getUserWithPosts(userId) {
    try {
        // Parallel execution
        const [user, posts] = await Promise.all([
            fetchUser(userId),
            fetchUserPosts(userId)
        ]);
        
        return {
            ...user,
            posts: posts
        };
    } catch (error) {
        console.error('Error fetching user data:', error);
        return null;
    }
}

// Sequential vs Parallel
async function sequentialExample() {
    const start = Date.now();
    
    // Sequential - slow (3 seconds total)
    const user1 = await fetchUser(1); // 1 second
    const user2 = await fetchUser(2); // 1 second  
    const user3 = await fetchUser(3); // 1 second
    
    console.log(`Sequential: ${Date.now() - start}ms`);
}

async function parallelExample() {
    const start = Date.now();
    
    // Parallel - fast (1 second total)
    const [user1, user2, user3] = await Promise.all([
        fetchUser(1),
        fetchUser(2),
        fetchUser(3)
    ]);
    
    console.log(`Parallel: ${Date.now() - start}ms`);
}

// Error handling strategies
async function robustApiCall(url, retries = 3) {
    for (let i = 0; i < retries; i++) {
        try {
            const response = await fetch(url);
            if (response.ok) {
                return await response.json();
            }
            throw new Error(`HTTP ${response.status}`);
        } catch (error) {
            console.log(`Attempt ${i + 1} failed:`, error.message);
            
            if (i === retries - 1) {
                throw error; // Last attempt failed
            }
            
            // Wait before retry (exponential backoff)
            await new Promise(resolve => 
                setTimeout(resolve, Math.pow(2, i) * 1000)
            );
        }
    }
}

// Async iteration
async function processUsersSequentially(userIds) {
    const results = [];
    
    for (const id of userIds) {
        try {
            const user = await fetchUser(id);
            results.push(user);
        } catch (error) {
            console.error(`Failed to fetch user ${id}:`, error);
            results.push(null);
        }
    }
    
    return results;
}

// Top-level await (ES2022)
// Can be used at module level
const config = await fetch('/api/config').then(r => r.json());
const users = await Promise.all([
    fetchUser(1),
    fetchUser(2),
    fetchUser(3)
]);

🏗️ Classes ES6+ - OOP Modern în JavaScript

// Basic class definition
class User {
    // Constructor
    constructor(name, email) {
        this.name = name;
        this.email = email;
        this.createdAt = new Date();
    }
    
    // Instance methods
    greet() {
        return `Hello, I'm ${this.name}`;
    }
    
    getAge() {
        const now = new Date();
        return now.getFullYear() - this.createdAt.getFullYear();
    }
    
    // Static methods
    static fromJSON(json) {
        const data = JSON.parse(json);
        return new User(data.name, data.email);
    }
    
    static validateEmail(email) {
        return email.includes('@');
    }
}

// Inheritance
class AdminUser extends User {
    constructor(name, email, permissions = []) {
        super(name, email); // Call parent constructor
        this.permissions = permissions;
        this.isAdmin = true;
    }
    
    // Override parent method
    greet() {
        return `${super.greet()} and I'm an admin`;
    }
    
    // New methods
    hasPermission(permission) {
        return this.permissions.includes(permission);
    }
    
    addPermission(permission) {
        if (!this.hasPermission(permission)) {
            this.permissions.push(permission);
        }
    }
}

// Private fields (ES2022)
class BankAccount {
    #balance = 0; // Private field
    #accountNumber; // Private field
    
    constructor(accountNumber, initialBalance = 0) {
        this.#accountNumber = accountNumber;
        this.#balance = initialBalance;
    }
    
    // Public methods
    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
            return this.#balance;
        }
        throw new Error('Amount must be positive');
    }
    
    withdraw(amount) {
        if (amount > 0 && amount <= this.#balance) {
            this.#balance -= amount;
            return this.#balance;
        }
        throw new Error('Invalid withdrawal amount');
    }
    
    // Getter
    get balance() {
        return this.#balance;
    }
    
    // Private method
    #validateTransaction(amount) {
        return amount > 0 && amount <= this.#balance;
    }
}

// Mixins pattern
const Timestamped = {
    addTimestamp() {
        this.timestamp = new Date();
        return this;
    },
    
    getTimestamp() {
        return this.timestamp;
    }
};

const Serializable = {
    toJSON() {
        return JSON.stringify(this);
    },
    
    fromJSON(json) {
        const data = JSON.parse(json);
        Object.assign(this, data);
        return this;
    }
};

// Apply mixins
Object.assign(User.prototype, Timestamped, Serializable);

// Usage examples
const user = new User('John Doe', 'john@example.com');
user.addTimestamp();
console.log(user.greet()); // "Hello, I'm John Doe"

const admin = new AdminUser('Jane Admin', 'jane@example.com', ['read', 'write']);
console.log(admin.greet()); // "Hello, I'm Jane Admin and I'm an admin"
console.log(admin.hasPermission('read')); // true

const account = new BankAccount('123456789', 1000);
account.deposit(500);
console.log(account.balance); // 1500
// console.log(account.#balance); // SyntaxError: Private field '#balance' must be declared in an enclosing class

🚀 Funcționalități Moderne - Exemple Practice

// OPTIONAL CHAINING (?.) - ES2020
const user = {
    name: 'John',
    address: {
        street: '123 Main St',
        city: 'New York'
    }
};

// Înainte
const city = user && user.address && user.address.city;

// Cu optional chaining
const city = user?.address?.city; // 'New York'
const zipCode = user?.address?.zipCode; // undefined (nu eroare)

// Cu arrays și funcții
const firstHobby = user?.hobbies?.[0];
const result = user?.getName?.(); // apelează doar dacă există

// NULLISH COALESCING (??) - ES2020
const username = user.name ?? 'Anonymous'; // doar pentru null/undefined
const port = process.env.PORT ?? 3000;

// Diferența față de ||
const value1 = 0 || 'default'; // 'default' (0 este falsy)
const value2 = 0 ?? 'default'; // 0 (0 nu este nullish)

// LOGICAL ASSIGNMENT OPERATORS - ES2021
let config = {};

// Înainte
config.theme = config.theme || 'dark';
config.timeout = config.timeout ?? 5000;

// Cu logical assignment
config.theme ||= 'dark'; // assign doar dacă falsy
config.timeout ??= 5000; // assign doar dacă nullish
config.retries &&= Math.min(config.retries, 10); // assign doar dacă truthy

// TOP-LEVEL AWAIT - ES2022
// În module, fără async function wrapper
const config = await fetch('/api/config').then(r => r.json());
const db = await connectToDatabase();

// PRIVATE FIELDS - ES2022
class Counter {
    #count = 0; // private field
    #maxCount = 100; // private field
    
    increment() {
        if (this.#count < this.#maxCount) {
            this.#count++;
        }
    }
    
    get value() {
        return this.#count;
    }
    
    // Private method
    #reset() {
        this.#count = 0;
    }
}

// ARRAY.AT() - ES2022
const arr = [1, 2, 3, 4, 5];

// Înainte - pentru ultimul element
const last = arr[arr.length - 1]; // 5

// Cu at()
const last = arr.at(-1); // 5
const secondLast = arr.at(-2); // 4

// OBJECT.HASOWN() - ES2022
const obj = Object.create({inherited: true});
obj.own = true;

// Înainte
const hasOwn = Object.prototype.hasOwnProperty.call(obj, 'own'); // true

// Cu hasOwn
const hasOwn = Object.hasOwn(obj, 'own'); // true
const hasInherited = Object.hasOwn(obj, 'inherited'); // false

// ERROR CAUSE - ES2022
try {
    await riskyOperation();
} catch (originalError) {
    throw new Error('Operation failed', { cause: originalError });
}

// ARRAY GROUPING - ES2023 (Stage 3)
const products = [
    {name: 'Laptop', category: 'Electronics', price: 1000},
    {name: 'Phone', category: 'Electronics', price: 500},
    {name: 'Book', category: 'Education', price: 20}
];

// Group by category
const grouped = Object.groupBy(products, product => product.category);
// {
//   Electronics: [{name: 'Laptop', ...}, {name: 'Phone', ...}],
//   Education: [{name: 'Book', ...}]
// }

// PATTERN MATCHING - Future proposal
// match (value) {
//     when Number if value > 0 => 'positive number',
//     when String if value.length > 0 => 'non-empty string',
//     when [] => 'empty array',
//     when _ => 'something else'
// }

🚀 Dezvoltă Aplicații JavaScript Moderne cu Blq.ro

La Blq.ro, folosim cele mai avansate funcționalități JavaScript ES6+ pentru a crea aplicații web interactive, performante și scalabile. Echipa noastră de experți JavaScript transformă ideile complexe în soluții elegante și eficiente.