🟡 What Are Parameters?
Parameters are the placeholders or variables listed inside a function’s parentheses.
They define what kind of input the function expects.
They are part of the function definition.
Example:
function sum(a, b) {
// ↑ ↑
// parameters
return a + b;
}Here, a and b are parameters.
🟢 What Are Arguments?
Arguments are the actual values you pass to a function when calling it.
They replace the parameters in the function.
Example:
sum(5, 10);
// ↑ ↑
// argumentsHere, 5 and 10 are arguments.
🔍 In Simple Words
Parameters = variables in the function definition
Arguments = values passed when calling the function
<div class="infographic-jsparamarg">
<style>
.infographic-jsparamarg {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--ok: #1a7f4e;
--ok-soft: #e3f5ec;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', -apple-system, sans-serif;
--mono-font: 'IBM Plex Mono', 'Courier New', monospace;
max-width: 620px;
margin: 0 auto;
box-sizing: border-box;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-jsparamarg[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
--ok: #5cd6a0;
--ok-soft: #16342a;
}
.infographic-jsparamarg * { box-sizing: border-box; }
.infographic-jsparamarg .ig-inner { padding: 1.75rem clamp(1.25rem, 5vw, 3rem) 2rem; }
.infographic-jsparamarg .ig-title {
font-family: var(--display-font); font-size: clamp(1.4rem, 4.5vw, 1.9rem);
font-weight: 600; text-align: center; margin: 0 0 1.5rem;
}
.infographic-jsparamarg .key-row { display: flex; gap: 1.25rem; justify-content: center; margin-bottom: 1.5rem; }
.infographic-jsparamarg .key-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--ink-soft); }
.infographic-jsparamarg .swatch { width: 0.85rem; height: 0.85rem; border-radius: 3px; }
.infographic-jsparamarg .swatch.param { background: var(--paper); border: 2px dashed var(--accent); }
.infographic-jsparamarg .swatch.arg { background: var(--ok); }
.infographic-jsparamarg .code-line {
font-family: var(--mono-font); font-size: clamp(0.95rem, 3.4vw, 1.15rem);
text-align: center; background: var(--paper-alt); border: 1px solid var(--line);
padding: 1.4rem 1rem; line-height: 1.9;
}
.infographic-jsparamarg .slot {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.4rem; height: 1.7rem; padding: 0 0.4rem; margin: 0 0.1rem;
border-radius: 5px; font-weight: 700; vertical-align: middle;
border: 2px dashed var(--accent); color: var(--accent); background: transparent;
transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.25s;
}
.infographic-jsparamarg .slot.is-filled {
border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ok);
transform: scale(1.08);
}
.infographic-jsparamarg .args-row {
margin-top: 2rem; display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem;
}
.infographic-jsparamarg .arg-slot { position: relative; display: flex; flex-direction: column; align-items: center; }
.infographic-jsparamarg .arg-tag {
font-size: 0.65rem; font-family: var(--mono-font); color: var(--ok); margin-bottom: 0.35rem;
}
.infographic-jsparamarg .arg-input {
width: 5rem; height: 2.5rem; font-family: var(--mono-font); font-size: 1rem; font-weight: 700;
text-align: center; border: 2px solid var(--ok); background: var(--ok-soft); color: var(--ok);
border-radius: 6px; outline: none; transition: transform 0.15s;
}
.infographic-jsparamarg .arg-input.is-pulsing { transform: scale(1.1); }
.infographic-jsparamarg .call-btn {
font: inherit; font-size: 0.85rem; font-weight: 600; border: none; background: var(--accent);
color: var(--paper); padding: 0.55rem 1.3rem; border-radius: 999px; cursor: pointer;
display: block; margin: 1.5rem auto 0;
}
.infographic-jsparamarg .call-btn:hover { opacity: 0.9; }
.infographic-jsparamarg .result-box {
margin: 1.25rem auto 0; width: fit-content; min-width: 10rem;
font-family: var(--mono-font); font-size: 1rem; font-weight: 700; text-align: center;
padding: 0.55rem 1.1rem; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok);
border-radius: 6px; opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.3s;
box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.infographic-jsparamarg .result-box.is-visible { opacity: 1; transform: scale(1); }
.infographic-jsparamarg .caption {
text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.5rem;
}
.infographic-jsparamarg .caption strong { color: var(--ink); font-family: var(--mono-font); }
@media (prefers-reduced-motion: reduce) {
.infographic-jsparamarg *, .infographic-jsparamarg *::before, .infographic-jsparamarg *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="ig-inner">
<h2 class="ig-title">Parameters vs. Arguments</h2>
<div class="key-row">
<span class="key-item"><span class="swatch param"></span>parameter (empty slot)</span>
<span class="key-item"><span class="swatch arg"></span>argument (real value)</span>
</div>
<div class="code-line">
function sum( <span class="slot" id="slotA">a</span>, <span class="slot" id="slotB">b</span> ) { return a + b; }
</div>
<div class="args-row">
<div class="arg-slot">
<span class="arg-tag">argument</span>
<input type="number" class="arg-input" id="argA" value="5">
</div>
<div class="arg-slot">
<span class="arg-tag">argument</span>
<input type="number" class="arg-input" id="argB" value="10">
</div>
</div>
<button class="call-btn" id="callBtn">Call sum(5, 10)</button>
<div class="result-box" id="resultBox"></div>
<p class="caption">Parameters are empty until arguments fill them in.</p>
</div>
</div>
<script>
(function () {
const wrapper = document.currentScript.closest('.infographic-jsparamarg')
|| document.querySelector('.infographic-jsparamarg');
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 slotA = wrapper.querySelector('#slotA');
const slotB = wrapper.querySelector('#slotB');
const callBtn = wrapper.querySelector('#callBtn');
const resultBox = wrapper.querySelector('#resultBox');
function updateBtnLabel() {
callBtn.textContent = `Call sum(${argA.value || 0}, ${argB.value || 0})`;
}
argA.addEventListener('input', updateBtnLabel);
argB.addEventListener('input', updateBtnLabel);
updateBtnLabel();
function runDemo() {
const a = Number(argA.value) || 0;
const b = Number(argB.value) || 0;
slotA.classList.remove('is-filled'); slotA.textContent = 'a';
slotB.classList.remove('is-filled'); slotB.textContent = 'b';
resultBox.classList.remove('is-visible');
argA.classList.add('is-pulsing');
argB.classList.add('is-pulsing');
setTimeout(() => {
argA.classList.remove('is-pulsing');
argB.classList.remove('is-pulsing');
slotA.textContent = a; slotA.classList.add('is-filled');
slotB.textContent = b; slotB.classList.add('is-filled');
}, 300);
setTimeout(() => {
resultBox.textContent = `sum(${a}, ${b}) → ${a + b}`;
resultBox.classList.add('is-visible');
}, 650);
}
callBtn.addEventListener('click', runDemo);
})();
</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
Parameters act like local variables inside the function.
Arguments fill in the parameters when the function is executed.
Number of arguments should ideally match number of parameters (though JavaScript doesn’t enforce it).
Extra arguments are ignored; missing ones become
undefined.