Bundle up work into functions

INPUT · Slides

Catching more than one value

01 / 05

When there are two or more values to hand over

Sometimes you want to hand over both the thing and how many, as in "two loaves of bread". One parameter is not enough.

You can line up as many parameters as you like. Just separate them with ,.

02 / 05

Line them up with ,

Line them up ,-separated in the brackets of the definition and in the brackets of the call. That is all it takes to catch several values.

function order(item, count) {  console.log(`${item} x${count}`);}order("bread", 2);order("egg", 6);

Result

bread x2
egg x6

03 / 05

Order is everything

The catching side and the handing side match up in the order you wrote them. They do not match up by name.

Swap the order and the swapped values go in exactly as given. It is not an error; you simply get an odd result, which makes it hard to notice.

function order(item, count) {  console.log(`${item} x${count}`);}order("bread", 2);order(2, "bread");

Result

bread x2
2 xbread

04 / 05

Three or more is no different

You can line up three or four parameters. More of them does not change the thinking.

Anything you leave short comes out undefined. When the display looks wrong, count up whether the number handed over matches the number caught.

function report(name, score, rank) {  console.log(`${name} ${score} points rank ${rank}`);}report("Yui", 88, 2);report("Kai", 75);

Result

Yui 88 points rank 2
Kai 75 points rank undefined

05 / 05

Too many means it is time to split

With a lot of parameters, the calling side can no longer keep the order in mind. About three is a reasonable guide for staying readable.

If it looks like growing beyond that, think about splitting the function, or handing things over gathered up in an object.

Right then, write some with the order in mind.

const showRect = (height, width) => {  console.log(`${height} x ${width} = ${height * width}`);};showRect(3, 5);

Result

3 x 5 = 15