← All examples · This page is written like a blog post made from Markdown. The script at the bottom calls YourJSBox.from('pre > code'), which turns each code block into a console that starts with its code. Show the code blocks again

Getting to know arrays

Arrays hold lists of values. Run each block to see what it does.

// Make an array \\
const fruits = ['apple', 'banana', 'cherry'];
fruits

// Add to the end \\
fruits.push('date');
fruits.length

Transforming arrays

map() makes a new array and filter() keeps only some of the values.

// map() \\
[1, 2, 3].map(n => n * 10)

// filter() \\
[1, 2, 3, 4, 5, 6].filter(n => n % 2 === 0)

// Both at once \\
console.table(
  ['ada', 'grace', 'alan'].map((name, index) => ({index, name: name.toUpperCase()}))
);

With TypeScript

A code block with a language-ts class becomes a TypeScript console.

type Person = {name: string; born: number};
const people: Person[] = [{name: 'Ada', born: 1815}, {name: 'Grace', born: 1906}];
people.map(person => `${person.name} was born in ${person.born}`)

Options for one block

The data-* attributes of a code block set its options, like this dark one.

console.log('%cDark mode', 'font-weight: bold');
new Map([['light', false], ['dark', true]])