const arr = [1, [2, 3], [4, [5, 6]]];
const flat = arr.flat(Infinity);
console.log(flat.length);

const p1 = Promise.resolve(10);
const p2 = Promise.reject('Error');
const p3 = Promise.resolve(20);
Promise.allSettled([p1, p2, p3]).then(results => console.log(results.length));

.image {
  clip-path: circle(50%);
}

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result);

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
const obj = { [symbol1]: 'value1' };
console.log(symbol1 === symbol2, obj[symbol1]);

.box {
  animation: slide 2s ease-in-out infinite alternate;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

const div = document.createElement('div');
div.dataset.userId = '123';
div.dataset.userName = 'Alice';
console.log(div.getAttribute('data-user-id'));

const arr = [10, 20, 30];
const [first, ...middle, last] = arr;
console.log(first, last);

@media (prefers-color-scheme: dark) {
  .card {
    background: #333;
    color: white;
  }
}

const arr = [1, 2, 3, 4];
const exists = arr.some(n => n > 5);
const allSmall = arr.every(n => n < 10);
console.log(exists || allSmall);