Codexpal - Learn Programming Interactively

Lesson Content

Advanced ES6+ Features

Explore advanced modern JavaScript features that make code more expressive and powerful.

Generators

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 1

Proxies

const handler = {
  get: (target, prop) => {
    return prop in target ? target[prop] : 'Not found';
  }
};

const proxy = new Proxy({}, handler);

Symbols

const sym = Symbol('description');
const obj = { [sym]: 'value' };

Optional Chaining

const value = obj?.property?.nested;

Nullish Coalescing

const value = input ?? 'default';

BigInt

const big = 9007199254740991n;

Example Code

Use advanced JavaScript features

// Optional Chaining
const user = {
  profile: {
    name: 'John'
  }
};

console.log('Name:', user?.profile?.name);
console.log('Email:', user?.profile?.email ?? 'Not provided');

// Generators
function* countToThree() {
  yield 1;
  yield 2;
  yield 3;
}

const counter = countToThree();
console.log('First:', counter.next().value);
console.log('Second:', counter.next().value);

// Symbols
const sym = Symbol('id');
const obj = { [sym]: 123, name: 'Test' };
console.log('Symbol value:', obj[sym]);

Expected Output:

Name: John
Email: Not provided
First: 1
Second: 2
Symbol value: 123

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code