Back to Exercises
Arrays
const colors = ['red', 'green', 'blue'];
colors.push('yellow');
const upper = colors.map(c => c.toUpperCase());
const longOnes = colors.filter(c => c.length > 3);
const totalChars = colors.reduce((sum, c) => sum + c.length, 0);
Objects
const user = { name: 'Kai', email: 'kai@example.com', role: 'editor' };
const { name, email } = user; // destructure
const updated = { ...user, role: 'admin' }; // spread
Full Code Used in This Demo
HTML
<button onclick="arrayBasics()">Run</button>
<div id="out-arr-basics"></div>
<button onclick="arrayMFR()">Run</button>
<div id="out-arr-mfr"></div>
<button onclick="objectBasics()">Run</button>
<div id="out-obj-basics"></div>
<button onclick="objectAdvanced()">Run</button>
<div id="out-obj-adv"></div>
CSS
.btn { background: #3b82f6; color: #fff; border-radius: 8px; }
JavaScript
function arrayBasics() { const colors = ['red', 'green', 'blue']; colors.push('yellow'); }
function arrayMFR() { const colors = ['red', 'green', 'blue']; const upper = colors.map(c => c.toUpperCase()); }
function objectBasics() { const user = { name: 'Kai', email: 'kai@example.com', role: 'editor' }; }
function objectAdvanced() { const user = { name: 'Kai', email: 'kai@example.com', role: 'editor' }; const { name, email } = user; const updated = { ...user, role: 'admin' }; }