🟡 What is an Anonymous Function?
An anonymous function is a function that does not have a name.
It is usually stored in a variable, passed as an argument, or used inside other functions.
You cannot call it directly by name because it has none.
🧩 Why Use Anonymous Functions?
Anonymous functions are useful when:
You need a function temporarily.
You want to assign a function to a variable.
You want to pass functions as arguments (callbacks).
You’re writing short, one-time-use functions.
🟢 Example 1: Function Expression
<div class="infographic-jsfuncexpr">
<style>
.infographic-jsfuncexpr {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--line: #ddd6c9;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', -apple-system, sans-serif;
--mono-font: 'IBM Plex Mono', 'Courier New', 'Consolas', monospace;
margin: 0 auto;
box-sizing: border-box;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-jsfuncexpr[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--line: #2c313d;
}
.infographic-jsfuncexpr * { box-sizing: border-box; }
.infographic-jsfuncexpr .ig-inner { padding: 0; }
/* VS Code style editor block */
.infographic-jsfuncexpr .vscode {
background: #1e1e1e; border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.25); font-family: var(--mono-font);
}
.infographic-jsfuncexpr .vs-tabbar { display: flex; background: #252526; }
.infographic-jsfuncexpr .vs-tab {
display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem;
background: #1e1e1e; border-top: 2px solid #007acc; font-size: 0.8rem; color: #d4d4d4;
}
.infographic-jsfuncexpr .vs-tab .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #f1e05a; }
.infographic-jsfuncexpr .vs-body { display: flex; padding: 0.9rem 0; }
.infographic-jsfuncexpr .vs-gutter {
display: flex; flex-direction: column; padding: 0 0.8rem; color: #6e7681; font-size: 0.85rem;
line-height: 1.7; text-align: right; user-select: none;
}
.infographic-jsfuncexpr .vs-code {
padding: 0 1rem 0 0.5rem; font-size: 0.85rem; line-height: 1.7; color: #d4d4d4; white-space: pre;
}
.infographic-jsfuncexpr .kw { color: #569cd6; }
.infographic-jsfuncexpr .var { color: #9cdcfe; }
.infographic-jsfuncexpr .method { color: #dcdcaa; }
.infographic-jsfuncexpr .str { color: #ce9178; }
.infographic-jsfuncexpr .punc { color: #d4d4d4; }
.infographic-jsfuncexpr .call-row { display: flex; justify-content: center; margin-top: 1.75rem; }
.infographic-jsfuncexpr .call-btn {
font: inherit; font-family: var(--mono-font); font-size: 0.95rem; font-weight: 700; border: none;
background: #007acc; color: #fff; padding: 0.6rem 1.4rem; border-radius: 999px; cursor: pointer;
}
.infographic-jsfuncexpr .call-btn:hover { opacity: 0.9; }
.infographic-jsfuncexpr .terminal {
margin-top: 1.5rem; background: #1e1e1e; border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.infographic-jsfuncexpr .term-bar { display: flex; gap: 0.4rem; padding: 0.55rem 0.7rem; background: #2d2d2d; }
.infographic-jsfuncexpr .term-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
.infographic-jsfuncexpr .term-dot.red { background: #ff5f56; }
.infographic-jsfuncexpr .term-dot.yellow { background: #ffbd2e; }
.infographic-jsfuncexpr .term-dot.green { background: #27c93f; }
.infographic-jsfuncexpr .term-body {
font-family: var(--mono-font); font-size: 0.9rem; padding: 1rem 1.1rem; min-height: 4.5rem; color: #d4d4d4;
}
.infographic-jsfuncexpr .term-line { display: flex; gap: 0.5rem; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.infographic-jsfuncexpr .term-line.is-visible { opacity: 1; transform: translateY(0); }
.infographic-jsfuncexpr .term-prompt { color: #6a9955; }
.infographic-jsfuncexpr .term-output { color: #6bcf7f; }
.infographic-jsfuncexpr .caption {
text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.25rem;
}
.infographic-jsfuncexpr .caption strong { color: var(--ink); font-family: var(--mono-font); }
@media (prefers-reduced-motion: reduce) {
.infographic-jsfuncexpr *, .infographic-jsfuncexpr *::before, .infographic-jsfuncexpr *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="ig-inner">
<div class="vscode">
<div class="vs-tabbar">
<div class="vs-tab"><span class="dot"></span>script.js</div>
</div>
<div class="vs-body">
<div class="vs-gutter">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
<div class="vs-code"><span class="kw">const</span> <span class="var">greet</span> <span class="punc">=</span> <span class="kw">function</span><span class="punc">() {</span>
<span class="var">console</span><span class="punc">.</span><span class="method">log</span><span class="punc">(</span><span class="str">"Hello!"</span><span class="punc">);</span>
<span class="punc">};</span>
<span class="var">greet</span><span class="punc">();</span></div>
</div>
</div>
<div class="call-row">
<button class="call-btn" id="callBtn">▶ Run</button>
</div>
<div class="terminal">
<div class="term-bar">
<span class="term-dot red"></span><span class="term-dot yellow"></span><span class="term-dot green"></span>
</div>
<div class="term-body">
<div class="term-line" id="termPrompt"><span class="term-prompt">></span><span>greet()</span></div>
<div class="term-line" id="termOutput"><span class="term-output">Hello!</span></div>
</div>
</div>
<p class="caption">The function has no name of its own — <strong>greet</strong> just holds it.</p>
</div>
</div>
<script>
(function () {
const wrapper = document.currentScript.closest('.infographic-jsfuncexpr')
|| document.querySelector('.infographic-jsfuncexpr');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
const callBtn = wrapper.querySelector('#callBtn');
const termPrompt = wrapper.querySelector('#termPrompt');
const termOutput = wrapper.querySelector('#termOutput');
function run() {
termPrompt.classList.remove('is-visible');
termOutput.classList.remove('is-visible');
requestAnimationFrame(() => {
termPrompt.classList.add('is-visible');
setTimeout(() => termOutput.classList.add('is-visible'), 350);
});
}
callBtn.addEventListener('click', run);
})();
</script>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});The function has no name.
Stored in
greet.Called using the variable name.
🟢 Example 2: Anonymous Function as Callback
<div class="infographic-jssettimeout">
<style>
.infographic-jssettimeout {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--line: #ddd6c9;
--accent: #2563eb;
--body-font: 'Inter', -apple-system, sans-serif;
--mono-font: 'IBM Plex Mono', 'Courier New', 'Consolas', monospace;
margin: 0 auto;
box-sizing: border-box;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-jssettimeout[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--line: #2c313d;
--accent: #5b8def;
}
.infographic-jssettimeout * { box-sizing: border-box; }
.infographic-jssettimeout .ig-inner { padding: 0; }
/* VS Code style editor block */
.infographic-jssettimeout .vscode {
background: #1e1e1e; border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.25); font-family: var(--mono-font);
}
.infographic-jssettimeout .vs-tabbar { display: flex; background: #252526; }
.infographic-jssettimeout .vs-tab {
display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem;
background: #1e1e1e; border-top: 2px solid #007acc; font-size: 0.8rem; color: #d4d4d4;
}
.infographic-jssettimeout .vs-tab .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #f1e05a; }
.infographic-jssettimeout .vs-body { display: flex; padding: 0.9rem 0; }
.infographic-jssettimeout .vs-gutter {
display: flex; flex-direction: column; padding: 0 0.8rem; color: #6e7681; font-size: 0.85rem;
line-height: 1.7; text-align: right; user-select: none;
}
.infographic-jssettimeout .vs-code {
padding: 0 1rem 0 0.5rem; font-size: 0.85rem; line-height: 1.7; color: #d4d4d4; white-space: pre;
}
.infographic-jssettimeout .kw { color: #569cd6; }
.infographic-jssettimeout .var { color: #9cdcfe; }
.infographic-jssettimeout .method { color: #dcdcaa; }
.infographic-jssettimeout .str { color: #ce9178; }
.infographic-jssettimeout .num { color: #b5cea8; }
.infographic-jssettimeout .punc { color: #d4d4d4; }
.infographic-jssettimeout .call-row { display: flex; justify-content: center; margin-top: 1.5rem; }
.infographic-jssettimeout .call-btn {
font: inherit; font-family: var(--mono-font); font-size: 0.95rem; font-weight: 700; border: none;
background: #007acc; color: #fff; padding: 0.6rem 1.4rem; border-radius: 999px; cursor: pointer;
}
.infographic-jssettimeout .call-btn:hover:not(:disabled) { opacity: 0.9; }
.infographic-jssettimeout .call-btn:disabled { opacity: 0.5; cursor: default; }
.infographic-jssettimeout .timer-wrap {
margin-top: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.infographic-jssettimeout .timer-track {
flex: 1; max-width: 260px; height: 8px; background: var(--paper); border: 1px solid var(--line);
border-radius: 999px; overflow: hidden;
}
.infographic-jssettimeout .timer-fill {
height: 100%; width: 0%; background: var(--accent); border-radius: 999px;
transition: width linear;
}
.infographic-jssettimeout .timer-label {
font-family: var(--mono-font); font-size: 0.8rem; color: var(--ink-soft); min-width: 3.2rem; text-align: right;
}
.infographic-jssettimeout .terminal {
margin-top: 1.25rem; background: #1e1e1e; border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.infographic-jssettimeout .term-bar { display: flex; gap: 0.4rem; padding: 0.55rem 0.7rem; background: #2d2d2d; }
.infographic-jssettimeout .term-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
.infographic-jssettimeout .term-dot.red { background: #ff5f56; }
.infographic-jssettimeout .term-dot.yellow { background: #ffbd2e; }
.infographic-jssettimeout .term-dot.green { background: #27c93f; }
.infographic-jssettimeout .term-body {
font-family: var(--mono-font); font-size: 0.9rem; padding: 1rem 1.1rem; min-height: 4.5rem; color: #d4d4d4;
}
.infographic-jssettimeout .term-line { display: flex; gap: 0.5rem; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.infographic-jssettimeout .term-line.is-visible { opacity: 1; transform: translateY(0); }
.infographic-jssettimeout .term-prompt { color: #6a9955; }
.infographic-jssettimeout .term-output { color: #6bcf7f; }
.infographic-jssettimeout .term-waiting { color: #d7ba7d; }
@media (prefers-reduced-motion: reduce) {
.infographic-jssettimeout *, .infographic-jssettimeout *::before, .infographic-jssettimeout *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="ig-inner">
<div class="vscode">
<div class="vs-tabbar">
<div class="vs-tab"><span class="dot"></span>script.js</div>
</div>
<div class="vs-body">
<div class="vs-gutter">
<span>1</span><span>2</span><span>3</span>
</div>
<div class="vs-code"><span class="var">setTimeout</span><span class="punc">(</span><span class="kw">function</span><span class="punc">() {</span>
<span class="var">console</span><span class="punc">.</span><span class="method">log</span><span class="punc">(</span><span class="str">"This runs after 2 seconds"</span><span class="punc">);</span>
<span class="punc">},</span> <span class="num">2000</span><span class="punc">);</span></div>
</div>
</div>
<div class="call-row">
<button class="call-btn" id="callBtn">▶ Run</button>
</div>
<div class="timer-wrap">
<div class="timer-track"><div class="timer-fill" id="timerFill"></div></div>
<span class="timer-label" id="timerLabel">0.0s</span>
</div>
<div class="terminal">
<div class="term-bar">
<span class="term-dot red"></span><span class="term-dot yellow"></span><span class="term-dot green"></span>
</div>
<div class="term-body">
<div class="term-line" id="termWaiting"><span class="term-waiting">…waiting</span></div>
<div class="term-line" id="termOutput"><span class="term-output">This runs after 2 seconds</span></div>
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.currentScript.closest('.infographic-jssettimeout')
|| document.querySelector('.infographic-jssettimeout');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
const DURATION = 2000;
const callBtn = wrapper.querySelector('#callBtn');
const timerFill = wrapper.querySelector('#timerFill');
const timerLabel = wrapper.querySelector('#timerLabel');
const termWaiting = wrapper.querySelector('#termWaiting');
const termOutput = wrapper.querySelector('#termOutput');
let rafId = null;
function run() {
callBtn.disabled = true;
termOutput.classList.remove('is-visible');
timerFill.style.transition = 'none';
timerFill.style.width = '0%';
timerLabel.textContent = '0.0s';
requestAnimationFrame(() => {
termWaiting.classList.add('is-visible');
timerFill.style.transition = `width ${DURATION}ms linear`;
timerFill.style.width = '100%';
});
const start = performance.now();
function tick(now) {
const elapsed = Math.min(now - start, DURATION);
timerLabel.textContent = (elapsed / 1000).toFixed(1) + 's';
if (elapsed < DURATION) {
rafId = requestAnimationFrame(tick);
}
}
rafId = requestAnimationFrame(tick);
setTimeout(() => {
termWaiting.classList.remove('is-visible');
termOutput.classList.add('is-visible');
timerLabel.textContent = '2.0s';
callBtn.disabled = false;
}, DURATION);
}
callBtn.addEventListener('click', run);
})();
</script>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});Here, the function is passed directly as an argument.
🟢 Example 3: Arrow Function (Short Anonymous Function)
Arrow functions are always anonymous.
<div class="infographic-jsarrow">
<style>
.infographic-jsarrow {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--line: #ddd6c9;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--body-font: 'Inter', -apple-system, sans-serif;
--mono-font: 'IBM Plex Mono', 'Courier New', 'Consolas', monospace;
margin: 0 auto;
box-sizing: border-box;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-jsarrow[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--line: #2c313d;
--accent: #5b8def;
--accent-soft:#202942;
}
.infographic-jsarrow * { box-sizing: border-box; }
.infographic-jsarrow .ig-inner { padding: 0; }
/* VS Code style editor block */
.infographic-jsarrow .vscode {
background: #1e1e1e; border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.25); font-family: var(--mono-font);
}
.infographic-jsarrow .vs-tabbar { display: flex; background: #252526; }
.infographic-jsarrow .vs-tab {
display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem;
background: #1e1e1e; border-top: 2px solid #007acc; font-size: 0.8rem; color: #d4d4d4;
}
.infographic-jsarrow .vs-tab .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #f1e05a; }
.infographic-jsarrow .vs-body { display: flex; padding: 0.9rem 0; }
.infographic-jsarrow .vs-gutter {
display: flex; flex-direction: column; padding: 0 0.8rem; color: #6e7681; font-size: 0.85rem;
line-height: 1.7; text-align: right; user-select: none;
}
.infographic-jsarrow .vs-code {
padding: 0 1rem 0 0.5rem; font-size: 0.85rem; line-height: 1.7; color: #d4d4d4; white-space: pre;
}
.infographic-jsarrow .kw { color: #569cd6; }
.infographic-jsarrow .var { color: #9cdcfe; }
.infographic-jsarrow .method { color: #dcdcaa; }
.infographic-jsarrow .num { color: #b5cea8; }
.infographic-jsarrow .punc { color: #d4d4d4; }
.infographic-jsarrow .comment { color: #6a9955; }
.infographic-jsarrow .args-row {
margin-top: 1.4rem; display: flex; align-items: flex-end; justify-content: center; gap: 1rem;
}
.infographic-jsarrow .arg-slot { position: relative; display: flex; flex-direction: column; align-items: center; }
.infographic-jsarrow .arg-tag {
font-size: 0.65rem; font-family: var(--mono-font); color: var(--accent); margin-bottom: 0.35rem;
}
.infographic-jsarrow .arg-input {
width: 4.5rem; height: 2.4rem; font-family: var(--mono-font); font-size: 1rem; font-weight: 700;
text-align: center; border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent);
border-radius: 6px; outline: none;
}
.infographic-jsarrow .call-row { display: flex; justify-content: center; margin-top: 1.4rem; }
.infographic-jsarrow .call-btn {
font: inherit; font-family: var(--mono-font); font-size: 0.9rem; font-weight: 700; border: none;
background: #007acc; color: #fff; padding: 0.6rem 1.4rem; border-radius: 999px; cursor: pointer;
}
.infographic-jsarrow .call-btn:hover { opacity: 0.9; }
.infographic-jsarrow .terminal {
margin-top: 1.25rem; background: #1e1e1e; border-radius: 8px; overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.infographic-jsarrow .term-bar { display: flex; gap: 0.4rem; padding: 0.55rem 0.7rem; background: #2d2d2d; }
.infographic-jsarrow .term-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; }
.infographic-jsarrow .term-dot.red { background: #ff5f56; }
.infographic-jsarrow .term-dot.yellow { background: #ffbd2e; }
.infographic-jsarrow .term-dot.green { background: #27c93f; }
.infographic-jsarrow .term-body {
font-family: var(--mono-font); font-size: 0.9rem; padding: 1rem 1.1rem; min-height: 3rem; color: #d4d4d4;
}
.infographic-jsarrow .term-line { display: flex; gap: 0.5rem; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.infographic-jsarrow .term-line.is-visible { opacity: 1; transform: translateY(0); }
.infographic-jsarrow .term-prompt { color: #6a9955; }
.infographic-jsarrow .term-output { color: #6bcf7f; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
.infographic-jsarrow *, .infographic-jsarrow *::before, .infographic-jsarrow *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="ig-inner">
<div class="vscode">
<div class="vs-tabbar">
<div class="vs-tab"><span class="dot"></span>script.js</div>
</div>
<div class="vs-body">
<div class="vs-gutter">
<span>1</span><span>2</span>
</div>
<div class="vs-code"><span class="kw">const</span> <span class="var">add</span> <span class="punc">= (</span><span class="var">a</span><span class="punc">,</span> <span class="var">b</span><span class="punc">) =></span> <span class="var">a</span> <span class="punc">+</span> <span class="var">b</span><span class="punc">;</span>
<span class="var">console</span><span class="punc">.</span><span class="method">log</span><span class="punc">(</span><span class="var">add</span><span class="punc">(</span><span class="num" id="dispA">2</span><span class="punc">,</span> <span class="num" id="dispB">3</span><span class="punc">));</span> <span class="comment">// <span id="dispResultInline">5</span></span></div>
</div>
</div>
<div class="args-row">
<div class="arg-slot">
<span class="arg-tag">a</span>
<input type="number" class="arg-input" id="argA" value="2">
</div>
<div class="arg-slot">
<span class="arg-tag">b</span>
<input type="number" class="arg-input" id="argB" value="3">
</div>
</div>
<div class="call-row">
<button class="call-btn" id="callBtn">▶ Run</button>
</div>
<div class="terminal">
<div class="term-bar">
<span class="term-dot red"></span><span class="term-dot yellow"></span><span class="term-dot green"></span>
</div>
<div class="term-body">
<div class="term-line" id="termOutput"><span class="term-prompt">></span><span class="term-output" id="termResult">5</span></div>
</div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.currentScript.closest('.infographic-jsarrow')
|| document.querySelector('.infographic-jsarrow');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
const argA = wrapper.querySelector('#argA');
const argB = wrapper.querySelector('#argB');
const dispA = wrapper.querySelector('#dispA');
const dispB = wrapper.querySelector('#dispB');
const dispResultInline = wrapper.querySelector('#dispResultInline');
const callBtn = wrapper.querySelector('#callBtn');
const termOutput = wrapper.querySelector('#termOutput');
const termResult = wrapper.querySelector('#termResult');
function currentSum() {
const a = Number(argA.value) || 0;
const b = Number(argB.value) || 0;
return a + b;
}
function syncCode() {
dispA.textContent = argA.value || 0;
dispB.textContent = argB.value || 0;
dispResultInline.textContent = currentSum();
}
argA.addEventListener('input', syncCode);
argB.addEventListener('input', syncCode);
syncCode();
function run() {
termOutput.classList.remove('is-visible');
termResult.textContent = currentSum();
requestAnimationFrame(() => termOutput.classList.add('is-visible'));
}
callBtn.addEventListener('click', run);
})();
</script>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});🎗️ Key Points
Anonymous functions do not have names.
Mostly used in:
Callbacks
Event listeners
Function expressions
Arrow functions
Useful for short, temporary, or inline logic.
Aren’t hoisted like normal functions.