Lesson 11 · 11 of 20

Functions and arrow functions · JavaScript

Reuse code with functions in JavaScript: function declarations, values with return, arrow functions and functions as values.

JavaScript · Functions and arrow functions in DMarlon Studio: the example's code and its output in the terminal

A function is a named block of code you can use as many times as you need. function greet(name) declares one that receives a parameter, name, and you call it by writing its name with a value in brackets: greet("Laura").

With `return` the function hands a result back to whoever called it. celsiusToFahrenheit(20) is 68, and you can print that value, store it in a variable or use it in another calculation.

Arrow functions are a shorter form: const double = (n) => n * 2. When the body is a single expression, it is returned without writing return; with several lines, as in shippingCost, you need braces and return.

In JavaScript functions are values like any other: you store them in constants and pass them to other functions. applyTwice(double, 5) receives double and applies it twice: 5, 10, 20. This idea underpins the next lessons and React components, which DMarlon Studio's React, Next.js and React Native targets use.

A function declaration can be called before the line where it appears, like square(9); an arrow function stored in a const cannot.

Code · main.js

// A function declaration: a named block of code you can reuse.function greet(name) {  console.log(`Hello, ${name}! Welcome to the shop.`);}greet("Laura");greet("Pedro");// A function can calculate a value and return it.function celsiusToFahrenheit(celsius) {  return celsius * 9 / 5 + 32;}console.log("20 C =", celsiusToFahrenheit(20), "F");console.log("-5 C =", celsiusToFahrenheit(-5), "F");// Arrow functions: a shorter way to write a function.const double = (n) => n * 2;const isEven = (n) => n % 2 === 0;console.log("double(21):", double(21), "| isEven(7):", isEven(7));// With several lines, an arrow function needs { } and return.const shippingCost = (total) => {  if (total >= 50) return 0;  return 4.95;};console.log("Shipping for 30 euros:", shippingCost(30));console.log("Shipping for 75 euros:", shippingCost(75));// Functions are values: you can pass them to other functions.const applyTwice = (fn, value) => fn(fn(value));console.log("applyTwice(double, 5):", applyTwice(double, 5));// Declarations can be called before they appear in the file.console.log("square(9):", square(9));function square(n) { return n * n; }

Output · node main.js

Hello, Laura! Welcome to the shop.
Hello, Pedro! Welcome to the shop.
20 C = 68 F
-5 C = 23 F
double(21): 42 | isEven(7): false
Shipping for 30 euros: 4.95
Shipping for 75 euros: 0
applyTwice(double, 5): 20
square(9): 81

Key points

function name(parameters) { ... } declares a function.
return gives back a value and ends the function.
(x) => x * 2 is an arrow function that returns x * 2.
Functions are values: you can store them and pass them around.

Exercise

Write an arrow function vatPrice that adds 21% VAT to a price and another, isAdult, that says whether an age is at least 18, and try each with three values.