In the last two lessons you filled in function bodies that were written for you. Now you write your own. A function is a named, reusable piece of a program: you write the steps once and run them whenever you need, with different inputs. Pocket formats money in a dozen places; without functions you would copy (cents / 100).toFixed(2) into every one, and fix every copy when the format changes.
function formatMoney(cents) {\n const dollars = (cents / 100).toFixed(2);\n return `$${dollars}`;\n}\n\nconsole.log(formatMoney(1220));\nconsole.log(formatMoney(450));The first five lines are a function declaration. They do not run anything; they create a function named formatMoney and remember its steps. cents is a parameter, a name for an input that does not have a value yet.
formatMoney(1220) is a call. The value in the parentheses, 1220, is an argument. When the engine reaches the call, it pauses the current line, jumps into the function with cents pointing at 1220, runs the body, and comes back when it hits return. The call expression is then replaced by the returned value, "$12.20", which console.log prints.
A function can have several parameters, separated by commas, and the arguments are matched by position: the first argument goes to the first parameter, and so on.
\nreturn does two things: it decides the result, and it ends the function on the spot. Any line after a return in the same block never runs. If a function finishes without reaching a return, the call evaluates to undefined.
If you call a function with fewer arguments than parameters, the missing ones are undefined. A default parameter gives them a sensible value instead:
function formatMoney(cents, symbol = \"$\") {\n return `${symbol}${(cents / 100).toFixed(2)}`;\n}\n\nconsole.log(formatMoney(1220));\nconsole.log(formatMoney(1220, \"€\"));The default is used when the argument is missing or undefined, and only then. Passing 0, "" or null counts as a real argument.
There is a second, shorter way to write functions, the arrow function. It is a value, so you store it in a const:
const toCents = (dollars) => Math.round(dollars * 100);\nconst isBig = (cents) => cents >= 10000;\n\nconsole.log(toCents(12.2), isBig(toCents(120)));When the body is a single expression, as here, you leave out the braces and the return: the expression’s value is returned automatically. When you need several statements, use braces, and then return is required again:
const budgetLeft = (budget, spent) => {\n const left = budget - spent;\n return left > 0 ? left : 0;\n};\nconsole.log(budgetLeft(2000, 2200));Which style should you use? Both are everywhere in real code. A common default, and the one this course follows: declarations for named, top-level functions, arrows for short functions passed to other functions. One practical difference: declarations are hoisted, which means you can call them on a line above where they are written. A const arrow function only exists once its line has run.
In JavaScript a function is a value like a number or a string. You can store it, and you can pass it to another function as an argument. That is the idea behind much of modern JavaScript:
\nfunction applyToAll(amounts, transform) {\n const results = [];\n for (const amount of amounts) {\n results.push(transform(amount));\n }\n return results;\n}\n\nconst formatMoney = (cents) => `$${(cents / 100).toFixed(2)}`;\nconsole.log(applyToAll([450, 1220], formatMoney));\nconsole.log(applyToAll([450, 1220], (c) => c * 2));applyToAll does not know or care what transform does; it calls it once per item and collects the results with push, which adds an item to the end of an array. A function passed in like this is called a callback. Notice that you pass formatMoney without parentheses: you are handing over the function, not calling it. Arrays have this exact helper built in, called map, and section 3 puts it to work.
Notice what every helper in this lesson has in common: it uses only its parameters, returns a result, and changes nothing outside itself. A function like that is called pure. Give it the same arguments and it returns the same answer every time, so you can test it with one line, reuse it anywhere, and trust it without reading its body again.
\nNot every function can be pure. Something eventually has to print to the screen or save data. The habit that keeps programs manageable is to do the calculating in small pure functions and keep the printing and saving in a few clearly named places. Pocket follows that split all the way to the final app.
\n\nFunctions create their own little world of names inside them. How that world relates to the code around it is called scope, and it is the subject of the next lesson.
\n","toc":[{"id":"sec-1","text":"Declaring and calling a function","level":2},{"id":"sec-2","text":"Default parameters","level":2},{"id":"sec-3","text":"Arrow functions","level":2},{"id":"sec-4","text":"Functions are values","level":2},{"id":"sec-5","text":"Small, pure functions","level":2}],"takeaways":["A function packages steps under a name; parameters are the inputs it declares, arguments are the values you pass when you call it.","return ends the function and hands a value back; a function without return gives back undefined.","Arrow functions ((x) => x * 2) are a shorter syntax; with curly braces they need an explicit return.","Default parameters (symbol = \\"$\\") apply when an argument is missing or undefined.","Functions are values, so you can store them in variables and pass them to other functions."],"further":[{"title":"Functions (MDN guide)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions"},{"title":"Arrow function expressions (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions"},{"title":"Default parameters (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"}],"quiz":[{"q":"What does this log?
\nconst double = (n) => {\n n * 2;\n};\nconsole.log(double(4));undefined","why":"Correct. A block body without return returns undefined. Write (n) => n * 2 or add return n * 2;."},{"text":"8","why":"The body computes 8 and throws it away. With curly braces, an arrow function needs an explicit return."},{"text":"n * 2","why":"JavaScript evaluates expressions; it never returns the source text of one."}],"answer":0},{"q":"function formatMoney(cents, symbol = "$") { … } is called as formatMoney(450, undefined). What is symbol inside?
undefined, because you passed it explicitly.","why":"Defaults apply to missing arguments and to arguments that are undefined, whether passed or not."},{"text":""$"","why":"Correct. Passing undefined is treated exactly like leaving the argument out, so the default kicks in."},{"text":"null","why":"Nothing here produces null. And passing null would not trigger the default; only undefined does."}],"answer":1},{"q":"Which line calls isBig from before its definition without an error?
console.log(isBig(100)); const isBig = (c) => c > 50;","why":"const names cannot be used before their line runs, so this throws a ReferenceError."},{"text":"console.log(isBig(100)); let isBig = function (c) { return c > 50; };","why":"The function value is stored in a let, which is not available before its declaration line."},{"text":"console.log(isBig(100)); function isBig(c) { return c > 50; }","why":"Correct. Function declarations are hoisted, meaning the whole function is available from the top of its scope."}],"answer":2},{"q":"const amounts = [450, 1220]; and function toDollars(c) { return c / 100; }. What does amounts.map(toDollars) need from you?
map calls toDollars for each item and collects the results.","why":"Correct. You pass the function itself, without parentheses, and map decides when to call it."},{"text":"amounts.map(toDollars()) with parentheses, so the function runs.","why":"That calls toDollars once immediately with no argument and passes its result, NaN, to map, which then throws."},{"text":"A loop around it, because map only works on one value.","why":"map walks the whole array itself. That is the point of passing it a function."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// 1. Dollars (like 4.1) to whole cents (410)\nfunction toCents(dollars) {\n}\n\n// 2. Cents to a display string, with a symbol that defaults to \"$\"\nfunction formatMoney(cents) {\n}\n\n// 3. Replace null with an arrow function: true for 10000 cents or more\nconst isBig = null;\n\n// 4. Count the amounts for which test(amount) returns true\nfunction countWhere(amounts, test) {\n return 0;\n}\n\nconsole.log(formatMoney(toCents(12.2)));\n"},"solution":{"js":"function toCents(dollars) {\n return Math.round(dollars * 100);\n}\n\nfunction formatMoney(cents, symbol = \"$\") {\n return `${symbol}${(cents / 100).toFixed(2)}`;\n}\n\nconst isBig = (cents) => cents >= 10000;\n\nfunction countWhere(amounts, test) {\n let count = 0;\n for (const amount of amounts) {\n if (test(amount)) {\n count++;\n }\n }\n return count;\n}\n\nconsole.log(formatMoney(toCents(12.2)));\n"},"checks":[{"id":"to-cents","test":"return toCents(4.1) === 410 && toCents(12.2) === 1220 && toCents(0.07) === 7;\n"},{"id":"format","test":"return formatMoney(1220) === '$12.20' && formatMoney(5) === '$0.05';\n"},{"id":"format-symbol","test":"return formatMoney(1220, '€') === '€12.20' && formatMoney(450, undefined) === '$4.50';\n"},{"id":"is-big-arrow","test":"return typeof isBig === 'function' && !('prototype' in isBig) && isBig(10000) === true && isBig(9999) === false;\n"},{"id":"count-where","test":"const amounts = [450, 12000, 99, 10000];\nreturn countWhere(amounts, isBig) === 2 && countWhere(amounts, (c) => c < 100) === 1 && countWhere([], isBig) === 0;\n"}],"title":"Pocket's money helpers","prompt":"Write four small functions Pocket will use from now on:
\ntoCents(dollars) returns the amount in whole cents (4.1 gives 410).formatMoney(cents, symbol) returns a string like "$12.20". symbol defaults to "$".isBig, an arrow function that returns true for 10000 cents or more.countWhere(amounts, test) returns how many items in amounts make the callback test(amount) return a truthy value.Math.round, because 4.1 * 100 is not exactly 410. And remember return: without it every call gives undefined.","A default parameter is written in the parameter list: function formatMoney(cents, symbol = "$").","const isBig = (cents) => cents >= 10000; In countWhere, call the callback inside a loop: if (test(amount)) { count++; }."],"explanation":"Each helper returns its result instead of logging it, so callers can combine them: formatMoney(toCents(12.2)) feeds one function’s return value straight into the next. The default symbol = "$" applies whenever the argument is missing or undefined. isBig uses the arrow function’s short form, where the single expression after => is the return value. countWhere never needs to know what the test checks; it calls whatever function it was given, once per amount. Passing isBig without parentheses hands over the function itself, which is exactly how the array methods in section 3 work.
toCents returns whole cents","format":"formatMoney returns strings like “$12.20”","format-symbol":"formatMoney uses a custom symbol and defaults to “$”","is-big-arrow":"isBig is an arrow function with the 10000-cent threshold","count-where":"countWhere counts items that pass the callback"}},"words":775,"readMinutes":4}