Day 8: Consolidation 2

Lesson 3: Functions Part 2

Positional arguments

Function arguments in JavaScript are positional. This mean that the order matters as there is no other way to identify which input relates to which input argument.

1function coolestFunction(arg1, arg2) {
2  const result = arg1 - 5;
3  const uppercased = arg2.toUpperCase();
4}

If arg1 is expected to be a number and arg2 a string, you can't pass a string and then a number into your function. This is because the function by default will try to use them only in the way they are designed for. You can't subtract 5 from a string and you can't uppercase a number!

Default arguments

While you can't pass arguments in to a function in any order you like, you can assign them default values.

1function coolestFunction(arg1 = 6, arg2 = "hello") {
2  const result = arg1 - 5;
3  const uppercased = arg2.toUpperCase();
4  console.log(result);
5  console.log(uppercased);
6}

Which means you could now call coolestFunction without any arguments, or with just the first, or both.

<h1>Hello World<h1>

function coolestFunction(arg1 = 6, arg2 = "hello") {
	const result = arg1 - 5;
	const uppercased = arg2.toUpperCase();
  console.log(result);
  console.log(uppercased);
}

coolestFunction();
coolestFunction(10);
coolestFunction(10, "all the code");

But because they are positional still you can't skip the first and add a value for the second and expect it to work correctly. JavaScript assumes you have given it the first argument.

1function coolestFunction("all the code");

Arrow Functions

There is more than one way to declare a function in JavaScript, the way you are used to:

1function coolestFunction(arg1, arg2) {
2  console.log(arg1, arg2);
3}

Then another way called Arrow Function syntax:

1const functionName = (arg1, arg2) => {
2  console.log(arg1, arg2);
3};

This syntax comes with some different behaviours over the traditional function one, we'll cover that later as it's way beyond what you need to know at this stage.

To get a feel for arrow syntax the best thing to do is convert some traditional functions over. Here 3 examples and then a playground for you to practice:

1function sayHello() {
2  console.log("hello");
3}

1function speakLouder(text) {
2  console.log(text.toUpperCase());
3}

1function getQuote(number) {
2  const quotes = [
3    `I'm not superstitious, but I am a little stitious.`,
4    `Clothes make the man. Naked people have little or no influence in society.`,
5    `Ned, I would love to stand here and talk with you—but I’m not going to.`,
6    `I used to sell furniture for a living. The trouble was, it was my own.`,
7  ];
8
9  if (number >= quotes.length) {
10    return quotes[quotes.length - 1];
11  }
12  if (number < 0) {
13    return quotes[0];
14  }
15  return quotes[number];
16}

<h1>Hello World<h1>

function sayHello() {
	console.log("hello");
}

sayHello();

Functions as inputs

Arrow functions make it more obvious that our functions can be passed around in the same way we do any other variable like numbers, arrays and objects.

This means we can make a function that takes another function as it's input and then execute it.

<h1>Hello World<h1>

const loggingFunction = (inputFunction, value1, value2) => {
	console.log("Executing input function");
	inputFunction(value1, value2);
	console.log("Executed input function");
};

const addNumbers = (a, b) => {
	console.log(a + b);
}

loggingFunction(addNumbers, 4, 5);

Like I said in the main lesson, this might seem a bit bananas at this point but it will all become very clear very soon;

Anonymous Functions

Functions are created with the () => {} or (){} syntax, storing them in a variable name to be called later is done with the const functionName = or function functionName part.

This means they can exist without a name, a so called anonymous function.

We can rewrite the above example to use an anonymous function:

<h1>Hello World<h1>

const loggingFunction = (inputFunction, value1, value2) => {
	console.log("Executing input function");
	inputFunction(value1, value2);
	console.log("Executed input function");
};

loggingFunction((a,b) => console.log(a + b), 5, 9);