BitWithBite
Full-Stack Worksheet
⚙️ Functions
SCORE___ / 20
NameClassDate
After this worksheet you can
Write all three function formsUse default parametersDestructure objects/arraysExplain arrow "this" behaviour📚 Quick Recap
🎯 What you'll practice: Function declarations, expressions, arrow functions, default params, and destructuring.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Which function form is hoisted?
2Arrow functions differ from regular functions because they:
3function f(x = 10) {} illustrates:
4const { name } = user; is an example of:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Arrow functions were introduced in ES.
6The rest element in array destructuring is written with dots.
7Rewrite this as an arrow function: function double(n) { return n * 2; }
8Destructure "name" and "age" from an object called person in one line.
9Why do function expressions throw an error if called before their line of code, unlike declarations?
🚀 Section C · Challenge ● CHALLENGE 5
10A React event handler defined as a regular function loses access to "this.state" when called from a button's onClick. Explain why switching it to an arrow function fixes this.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = 6 (ES2015) 6 = three (...) 7 = const double = n => n * 2; 8 = const { name, age } = person; 9 = Declarations are hoisted entirely (definition available immediately); expressions only hoist the variable name, not its assigned function value, so calling it early hits "undefined is not a function" | 10 = Regular functions get their own "this" determined by how they're called (often undefined/window in an event handler), while arrow functions inherit "this" lexically from the surrounding class/component scope, so "this.state" still points to the component.