This lesson is probably the most important JavaScript lesson before React.

You already know the basic idea of functions from Ruby. The big shift is:

In JavaScript, a function is also a value.

Once that clicks, callbacks, map, filter, React event handlers, useEffect, promises, and Node.js APIs become much easier to understand.

1. Normal function

The traditional syntax is:

			
function add(a, b) {
  return a + b;
}

Call it:

			
const result = add(10, 20);
console.log(result); // 30

Execution:

			
add(10, 20)
    ↓
a = 10
b = 20
    ↓
a + b
    ↓
30

		

Very similar to Ruby:

			
def add(a, b)
  a + b
end

2. A function is a value

This is the important part.

			
function add(a, b) {
  return a + b;
}

You can do:

const operation = add;

Now:

operation(10, 20); // 30

Notice that we wrote:

const operation = add;

not:

const operation = add();

These are completely different.

`add`

Means:

Give me the function itself.

`add()`

Means:

Execute the function now and give me its return value.

Example:

			
function add() {
  return 30;
}
const a = add;
const b = add();
console.log(a); // function
console.log(b); // 30

		

This distinction is extremely important for React.

3. Function expression

A function can also be assigned to a variable:

			
const add = function(a, b) {
  return a + b;
};

Now:

add(10, 20);

This is called a function expression.

Compare:

			
function add(a, b) {
  return a + b;
}

with:

			
const add = function(a, b) {
  return a + b;
};

Both create functions, but they are written differently.

4. Arrow functions

Modern JavaScript heavily uses arrow functions.

			
const add = (a, b) => {
  return a + b;
};

Shorter:

const add = (a, b) => a + b;

These are roughly equivalent for simple use cases:

			
function add(a, b) {
  return a + b;
}

const add = (a, b) => a + b;

But later we’ll learn an important difference involving this.

5. Arrow function syntax

Let’s break down:

const add = (a, b) => a + b;

const add
   ↓
variable

(a, b)
   ↓
parameters

=>
   ↓
arrow function

a + b
   ↓
implicit return

Because there are no { }, JavaScript automatically returns the expression.

So:

const add = (a, b) => a + b;

means:

			
const add = (a, b) => {
  return a + b;
};

6. Parentheses rules

With multiple parameters:

const add = (a, b) => a + b;

With one parameter, parentheses can be omitted:

const square = n => n * n;

Equivalent:

const square = (n) => n * n;

With no parameters:

const greet = () => "Hello";

So you’ll commonly see:

			
() => ...
x => ...
(x, y) => ...

7. Explicit vs implicit return

This is important.

Explicit return

			
const add = (a, b) => {
  return a + b;
};

Implicit return

const add = (a, b) => a + b;

But this:

			
const add = (a, b) => {
  a + b;
};

returns:

undefined

Why?

Because once you use { }, you have a function body. JavaScript requires an explicit:

return

if you want to return a value.

8. Returning an object from an arrow function

This is a common syntax trap.

You might write:

			
const createUser = () => {
  name: "John"
};

That does not return the object you expect.

Use parentheses:

			
const createUser = () => ({
  name: "John"
});

Now:

			
createUser();
// { name: "John" }

Explanation:

This is one of the most confusing parts of JavaScript arrow functions. The key is that {} has two different meanings depending on context.

1. Your first example

			
const createUser = () => {
  name: "John"
};

You might read this as:

“Return an object containing name: "John".”

But JavaScript does not interpret it that way.

Because the arrow function has:

			
() => {
  ...
}

the {} is interpreted as a function block, not an object literal.

So JavaScript sees:

			
const createUser = () => {
  name: "John";
};

as roughly:

			
const createUser = () => {
  // function body
  name: "John"; // labeled statement
  // no return
};

		

Therefore:

console.log(createUser());

prints:

undefined

2. What is `name: "John"` then?

Inside a normal JavaScript block, this:

name: "John";

is interpreted as a label.

For example, JavaScript supports:

			
start:
for (let i = 0; i < 5; i++) {
  console.log(i);
}

So in your code:

name: "John";

name is treated as a label, not an object property.

3. So why do parentheses fix it?

Now:

			
const createUser = () => ({
  name: "John"
});

The important part is:

			
({
  name: "John"
})

The parentheses tell JavaScript:

“Treat what’s inside these parentheses as an expression.”

Inside an expression, { name: "John" } is understood as an object literal.

So the arrow function becomes:

			
const createUser = () => ({
  name: "John"
});

This is an implicit return.

It is basically equivalent to:

			
const createUser = () => {
  return {
    name: "John"
  };
};

		

So:

console.log(createUser());

gives:

{ name: "John" }

4. Why can’t JavaScript just figure it out?

Therefore, JavaScript gives you two distinct forms.

Block body

			
const createUser = () => {
  return {
    name: "John"
  };
};

		

Expression body

			
const createUser = () => ({
  name: "John"
});

5. A useful way to remember it

Compare these:

			
() => {
  name: "John";
}

versus:

			
() => ({
  name: "John"
})

First:

			
=> { ... }
   ↑
function block

Second:

			
=> ( ... )
      ↑
   expression
       ↓
object literal

		

One very common React example

This is why you often see:

			
const UserCard = () => (
  <div>
    <h1>John</h1>
  </div>
);

		

The parentheses aren’t strictly required there, but they make it clear that JSX is the expression being implicitly returned.

And for objects:

			
const getUser = () => ({
  name: "John",
  age: 30
});

This is a very common JavaScript int. question because it tests whether you understand arrow functions, implicit returns, blocks and object literals.

You’ll see this frequently in React code.

9. Functions can receive functions

This is where callbacks begin.

Consider:

			
function execute(callback) {
  callback();
}

We can call it:

			
execute(() => {
  console.log("Hello");
});

Let’s slow this down.

The function:

			
() => {
  console.log("Hello");
}

is passed as an argument to:

execute(...)

Inside execute:

			
function execute(callback) {
  callback();
}

So:

			
execute(...)
   |
   | receives function
   ↓
callback
   |
   | callback()
   ↓
console.log("Hello")

		

That passed function is called a callback.

10. Why is it called a callback?

Because you’re essentially saying:

“Here is a function. Call it when you need to.”

Example:

			
function processUser(user, callback) {
  console.log("Processing user:", user.name);
  callback(user);
}

Usage:

			
processUser(
  { name: "John" },
  (user) => {
    console.log("Finished:", user.name);
  }
);

		

The second argument is the callback.

11. Callbacks are NOT automatically asynchronous

This is very important.

Look at:

			
function execute(callback) {
  console.log("A");
  callback();
  console.log("B");
}
execute(() => {
  console.log("C");
});

		

Output:

			
A
C
B

Everything is synchronous.

A callback simply means:

a function passed to another function.

It does not mean asynchronous.

12. Asynchronous callback

Now:

setTimeout(() => {
  console.log("C");
}, 1000);

console.log("A");

Output:

A
C

after approximately one second.

Here the callback is asynchronous because setTimeout schedules it to run later.

This distinction is critical:

			
callback
≠
async

A callback may be:

			
synchronous
or
asynchronous

13. Higher-order functions

A function that:

accepts a function as an argument, or
returns a function

is commonly called a higher-order function.

Example:

			
function execute(callback) {
  callback();
}

execute is a higher-order function because it accepts a function.

Another example:

			
function createGreeter() {
  return function() {
    console.log("Hello");
  };
}

		

createGreeter is also a higher-order function because it returns a function.

14. This explains `map`

Now something you’ll see constantly in React:

			
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

What is actually happening?

map receives a function:

n => n * 2

Conceptually:

			
numbers.map(callback)
              ↓
        function(n) {
          return n * 2;
        }

		

For every element, map calls your callback.

Conceptually:

			
→ callback(1) → 2
→ callback(2) → 4
→ callback(3) → 6

Result:

[2, 4, 6]

15. `map` with objects

This is extremely important for React.

			
const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" }
];
const names = users.map(user => user.name);

		

The callback:

user => user.name

runs for every user.

Result:

["John", "Jane"]

You can think:

			
users
  ↓
map(callback)
  ↓
John → "John"
Jane → "Jane"
  ↓
["John", "Jane"]

		

16. `filter`

filter also accepts a callback.

			
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(n => n > 2);

The callback returns a boolean:

			
→ false
→ false
→ true
→ true
→ true

		

Result:

[3, 4, 5]

The pattern is:

array.filter(callback)

17. `find`

			
const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" }
];
const user = users.find(user => user.id === 2);

		

The callback is:

user => user.id === 2

Result:

{ id: 2, name: "Jane" }

18. Why React uses callbacks everywhere

Consider:

			
<button onClick={() => console.log("Clicked")}>
  Click me
</button>

You’re giving React a function:

() => console.log("Clicked")

You’re essentially saying:

“When the click happens, call this function.”

That is a callback.

Another example:

			
users.map(user => (
  <div key={user.id}>
    {user.name}
  </div>
))

		

Again:

user => (...)

is a callback.

So when you see React code filled with arrow functions, don’t think:

“React magic.”

Think:

“JavaScript is passing functions around.”

That mental model is much more useful.

19. A very important React mistake

Compare:

<button onClick={handleClick}>

and:

<button onClick={handleClick()}>

These are not the same.

First

onClick={handleClick}

means:

Give React the function. React will call it when the event occurs.

Second

onClick={handleClick()}

means:

Call the function right now and give the result to React.

This is one of the most common beginner mistakes.

Again:

			
function reference
    handleClick
        ↓
"Here is the function"
function call
    handleClick()
        ↓
"Execute it now"

		

20. Function parameters are just variables

Look at:

			
function greet(name) {
  console.log(name);
}

When you call:

greet("John");

JavaScript effectively does:

name = "John"

Similarly:

			
function execute(callback) {
  callback();
}

When:

execute(myFunction);

conceptually:

callback = myFunction

Then:

callback();

calls it.

This is the key to understanding callbacks.

21. Callback with data

Callbacks can receive values too.

			
function getUser(callback) {
  const user = {
    id: 1,
    name: "John"
  };
  callback(user);
}

		

Usage:

			
getUser(user => {
  console.log(user.name);
});

Execution:

			
getUser()
   ↓
create user
   ↓
callback(user)
   ↓
user => console.log(user.name)

		

Output:

John

This pattern is foundational to asynchronous JavaScript.

💎 Ruby developer comparison

You already know something conceptually similar in Ruby:

[1, 2, 3].map { |n| n * 2 }

JavaScript:

[1, 2, 3].map(n => n * 2);

Ruby:

users.map { |user| user[:name] }

JavaScript:

users.map(user => user.name);

The syntax is different, but the underlying idea is similar:

			
collection
   ↓
iterate
   ↓
execute supplied function for each item
   ↓
produce result

		

But don’t equate Ruby blocks and JavaScript callbacks completely. JavaScript functions are first-class values in a particularly explicit way, and the language’s treatment of closures, this, arguments and async execution differs.

Int. questions

Try these before checking the answers.

Q1

What’s the difference?

handleClick

handleClick()

Q2

What does this return?

const add = (a, b) => a + b;

Q3

Why does this return undefined?

			
const add = (a, b) => {
  a + b;
};

Q4

What is a callback?

Q5

Are callbacks always asynchronous?

Q6

Why is map considered a higher-order-function use case?

Q7

What does this produce?

			
const numbers = [1, 2, 3];
const result = numbers.map(n => n * 10);

Mini exercise

Predict the output:

			
function calculate(a, b, callback) {
  const result = a + b;
  callback(result);
}
calculate(10, 20, result => {
  console.log(result);
});

		

Then trace this one:

			
function execute(callback) {
  console.log("A");
  callback();
  console.log("B");
}
execute(() => {
  console.log("C");
});

		

Expected order:

			
?
?
?

And finally:

			
const users = [
  { id: 1, name: "John", active: true },
  { id: 2, name: "Jane", active: false },
  { id: 3, name: "Mike", active: true }
];
const activeUsers = users.filter(user => user.active);
const names = activeUsers.map(user => user.name);
console.log(names);

		

Try to mentally execute it as:

users
  ↓
filter(callback)
  ↓
active users
  ↓
map(callback)
  ↓
names

What you should take away

At this point, you should have these mental models:

function          → a value
function()        → call the function
callback           → function passed to another function
higher-order function  → accepts/returns functions
arrow function     → concise function syntax
map/filter/find    → receive callbacks

The next lesson should build directly on this:

Lesson 4 – Arrays, map, filter, find, reduce, spread and rest, with lots of React-style examples. That lesson will make expressions like users.map(...) feel natural rather than mysterious.

Lesson 4: https://railsdrop.com/2024/12/06/javascript-es6-bootcamp-lesson-4-arrays-map-filter-find-reduce-spread-and-rest/

Author: Abhilash

Hi, I’m Abhilash! A seasoned web developer with 15 years of experience specializing in Ruby and Ruby on Rails. Since 2010, I’ve built scalable, robust web applications and worked with frameworks like Angular, Sinatra, Laravel, Node.js, Vue and React. Passionate about clean, maintainable code and continuous learning, I share insights, tutorials, and experiences here. Let’s explore the ever-evolving world of web development together! View all posts by Abhilash

1. Normal function

2. A function is a value

add

add()

3. Function expression

4. Arrow functions

5. Arrow function syntax

6. Parentheses rules

7. Explicit vs implicit return

Explicit return

Implicit return

8. Returning an object from an arrow function

Explanation:

1. Your first example

2. What is name: "John" then?

3. So why do parentheses fix it?

4. Why can’t JavaScript just figure it out?

Block body

Expression body

5. A useful way to remember it

One very common React example

9. Functions can receive functions

10. Why is it called a callback?

11. Callbacks are NOT automatically asynchronous

12. Asynchronous callback

13. Higher-order functions

14. This explains map

15. map with objects

16. filter

17. find

18. Why React uses callbacks everywhere

19. A very important React mistake

First

Second

20. Function parameters are just variables

21. Callback with data

💎 Ruby developer comparison

Int. questions

Q1

Q2

Q3

Q4

Q5

Q6

Q7

Mini exercise

What you should take away

Share this:

Related

Author: Abhilash

One thought on “JavaScript / ES6+ Learning Lesson 3 – JavaScript Functions, Arrow Functions and Callbacks”

Leave a Reply Cancel reply

`add`

`add()`

2. What is `name: "John"` then?

14. This explains `map`

15. `map` with objects

16. `filter`

17. `find`