Learning .js; can't understand functions

Hello!

I am learning to understand the concept “argument” - in the context of; “an expression used when calling the function.”

I was also wondering if anyone would be able to explain the text below, as if explaining to a three year old;

“JavaScript supports higher-order functions, and that means we can provide functions as the input or arguments to another function, or as the return value from a function.”

Thanks for your time if you read this message,
Phil.


A function can take arguments. If a function takes another function as an argument or returns a function, it can be called a Higher-Order Function.

For example, the map method (a method is just a function on an object).

const numbers = [1, 2, 3];

const double = (element) => element * 2;
const numbersDoubled = numbers.map(double);

console.log(numbersDoubled); // [2, 4, 6]

We pass the function double to map and it calls it for us. So map is a Higher-Order Function and double is a callback function (it gets called by something).

Here is a very simplified version of how the map function might look.

const numbers = [1, 2, 3];

const double = (element) => element * 2;

function higherOrderFunction(fn, array) {
  const returnArray = [];
  for (let index = 0; index < array.length; index++) {
    returnArray.push(fn(array[index]));
  }
  return returnArray;
}

const numbersDoubled = higherOrderFunction(double, numbers);
console.log(numbersDoubled); // [2, 4, 6]
2 Likes

Functions are a block of code, certain logic you save and can call later to be executed.
Whats inside their body is not executed when it is read, but when it is called. You can have a function in your code, which you dont call ever, so the code within will never activate and do anything.

function saySomething() {
  console.log('hi')
}

So i defined a function, but i never called it, the code within was never executed. Once i call it, the code will run

sayHi()
// logs "hi"

Just making sure we are on the same track on how functions work.
You usually put code in functions which you want to call later, usually more than once. A repetitive action you plan to execute once in a while. But sometimes, while the logic you want to execute is repetitive, it might require to include some differences, each time it is executed. Lets say you wanna make a function, which when called wiill greet different people. It would be too plain to say “hi” each time. You can include the person name too. To do that, we can use arguments!

function greetPerson(name) {
  console.log("Hi", name)
}

greetPerson("Philip")
// logs "Hi Philip"

greetPerson("Sylvant")
// logs "Hi Sylvant"

I run the same code, but thanks to arguments i can adjust its behavior.

What the last sentence you quoted is saying, is functions can be passed or returned from another functions.

function greetEveryone(greetCallback) {
  greetCallback("Philip")
  greetCallback("Sylvant")
}

greetEveryone(greetPerson)
// logs "Hi Philip"
// logs "Hi Sylvant"

Here greetEveryone is taking a callback function as an argument. Functions we pass as arguments, we call “callbacks”. In greetEveryone, i call its callback twise. In the example i pass greetPerson as callback, the function i defined earlier. But i can actually pass any function.

function betterGreeting(name) {
  console.log(`Hello, ${name}!`)
}

greetEveryone(betterGreeting)
// logs "Hello,  Philip!"
// logs "Hello, Sylvant!"

Functions can also return a value, which we can use. If we dont give a function an explicit return value, it returns undefined.

function getGreeting(name) {
  return `Hello, ${name}!`
}

const greeting = getGreeting("Philip")
console.log(greeting)
// logs "Hello, Philip!"

Functions can also return functions…

function chooseGreeting(type) {
  if (type === "short") return greetPerson
  if (type ==="long") return betterGreeting
}

const lastGreeting = chooseGreeting("long")

lastGreeting("Phillip")

// logs "Hello, Philip!"

Here it might be a bit more confusion to follow. chooseGreeting will return a function based on what i choose, “long” or “short” greeting. I assign the returned value to lastGreeting variable. Then i call the function(which is the betterGreeting functions from before. As you can see, i properly pass to betterGreeting the arguments it expect and it runs its code.
PS: i havent checked the spelling nore the code in compiler, so there might be some error

3 Likes

Shouldn’t that be backticks as opposed to being double quotes?

Thanks! @lasjorg, and @Sylvant - yes the code ran fine.

thanks, was writing on ruby lately and double quotes are used for string interpolation there

1 Like