Chapter 2: Arrow Functions & Implicit Returns

📺 Video Explanation

Watch the full explanation of these notes here: https://youtu.be/YPpgMgaEaR4

What is Hoisting ?

Hoisting is a JavaScript mechanism where variable, function, and class declarations are moved to the top of their containing scope (global or function) during the compilation phase, before the code is executed

What is Scope ?

Scope is the current context of execution that determines the accessibility (visibility) of variables, functions, and objects in your code.

• Function Declaration: A standalone statement that defines a named function and is fully hoisted to the top of its scope before code execution.
• Function Expression: A function created inside an expression—often by assigning it to a variable—which is only evaluated and available when execution reaches that line.

In our previous chapter we have studied that when const keyword is used, It allocates memory but keep it in a Temporal dead zone and In execution phase It can not be used before it's initilasation. But In case of function declaration: It allocates memory for the function. It creates the actual function object immediately. It binds the function name to that object in the current scope. This means the function is fully usable and initialized in memory. There fore we can use it even at the first line of code in the same scope.

Are arrow function and function expression same ?

No, arrow functions and function expressions are not exactly the same.
An arrow function is actually a special type of function expression. While they share the same scoping and hoisting rules, they have major differences under the hood regarding how they handle the this keyword, arguments, and object creation.

1. What They Have in Common

Both are expressions. This means:

• They are created only when execution reaches their line of code.
• They are not hoisted. If you declare either with const, trying to call them early will crash your code with a ReferenceError.
• Their scope is determined by the variable keyword (const, let, or var) used to declare them. [8, 9, 10, 11, 12]

2. The Core Technical Differences

When opening any modern React Native project, one visual change immediately jumps out: traditional function keywords have almost completely disappeared, replaced everywhere by const declarations and fat arrows (=>).

Arrow functions do far more than clean up syntax. They change how expressions are returned, transform how the engine binds the this keyword in memory, and form the architectural foundation for React Native components, custom hooks, and event pipelines.

1. Syntax Evolution: Regular Functions vs. Arrow Functions

Before ES6, every function in JavaScript was created using the function keyword:

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

ES6 introduced the arrow function syntax. Instead of creating a hoisted function declaration, you declare an anonymous function expression and assign it to a variable (typically const):

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

Both snippets accomplish the exact same calculation, but arrow functions introduce a cleaner, more modular structure and unlock implicit returns.

2. Implicit Returns: Writing Expressive One-Liners

In standard JavaScript functions, you must explicitly open a block {} and write the return keyword to output a value.

With arrow functions, if your logic consists of a single expression, you can discard both the curly braces {} and the return keyword entirely. The JavaScript engine automatically evaluates that single expression and returns its value.

// Form 1: Explicit return (standard block body)
const double = (n) => {
  return n * 2;
};

// Form 2: Implicit return (concise single expression)
const double = (n) => n * 2;

// Form 3: Single parameter shorthand (dropping parameter parentheses)
const double = n => n * 2;

All three forms produce identical output in memory. In React Native development, you will alternate between all three based on code complexity.

The Object Literal Gotcha: Returning {}

A very common trap occurs when you try to return an object literal implicitly.

// ❌ WRONG: JavaScript thinks the {} is a function body block!
const getUser = () => { name: "Subrata" };
console.log(getUser()); // Logs: undefined

Why does this happen?

The JavaScript parser sees the curly brace { immediately after => and treats it as the start of a function body block, not an object. It tries to interpret name: "Subrata" as a label statement, finds no return keyword, and returns undefined.

// ✅ CORRECT: Wrap the object literal in parentheses ()
const getUser = () => ({ name: "Subrata" });
console.log(getUser()); // Logs: { name: "Subrata" }

The outer parentheses () act as an evaluation wrapper, instructing the engine: "Evaluate the contents inside as a single expression (an object literal), not a code block."

3. Where Arrow Functions Live in React Native

Arrow functions power three core patterns in daily React Native programming:

1. Inline Event Handlers

Instead of declaring a separate named function for a one-line action, you pass an inline arrow function directly into component event props like onPress or onChangeText:

<Button onPress="{()" title="Save"> console.log("Saved!")}
/>

2. Rendering Lists with .map()

When mapping an array of data into UI elements, arrow functions with implicit returns keep your JSX concise and declarative:

const steps = [1000, 2000, 3000];

const StepList = () => (
  <View>
    {steps.map(step => (
      <Text key="{step}">{step} steps</Text>
    ))}
  </View>
);

3. Functional Component Definitions

Most functional components in modern React Native are written as arrow functions assigned to const:

// Standard component with explicit body
const HomeScreen = () => {
  return <View/>;
};

// Simple presentational component using an implicit return
const Divider = () => <View style="{styles.divider}"/>;

4. The this Difference: Dynamic vs. Lexical Scope

The fundamental operational difference between regular functions and arrow functions is how they handle this.

Regular Function: Dynamic 'this'
┌──────────────────────────────────────────────┐
│ The value of 'this' changes depending on     │
│ HOW and WHERE the function is called at      │
│ runtime(Caller-dependent).                  │
└──────────────────────────────────────────────┘

Arrow Function: Lexical 'this'
┌──────────────────────────────────────────────┐
│ Has NO 'this' of its own. It inherits        │
│ 'this' directly from the surrounding scope   │
│ where it was WRITTEN in memory.              │
└──────────────────────────────────────────────┘

The Bug with Regular Functions

Because regular functions create their own dynamic this, running them inside asynchronous callbacks (like setInterval or setTimeout) causes them to lose access to the parent object:

const timer = {
  seconds: 0,
  start: function () {
    setInterval(function () {
      this.seconds++; // ❌ `this` points to the global/window scope, NOT `timer`
      console.log(this.seconds); // NaN
    }, 1000);
  },
};

The Arrow Function Fix

Arrow functions do not bind their own this. They capture the surrounding lexical scope's this automatically:

const timer = {
  seconds: 0,
  start: function () {
    setInterval(() => {
      this.seconds++; // ✅ `this` correctly points to the `timer` object!
      console.log(this.seconds); // 1, 2, 3...
    }, 1000);
  },
};

Note on Modern React Native: Functional components and React Hooks (useState, useEffect) eliminate the need to manage this manually in daily UI tasks. However, understanding lexical scope remains essential when working with legacy class components, third-party native libraries, and timer utilities.

5. Architectural Comparison

The Decision Rule

Do you need dynamic `this`, `arguments`, or a constructor function?
  ├── Yes → Regular Function(`function`)
  └── No  → Arrow Function(`=>`) (Default choice across React Native)

6. Common Pitfalls & Mistakes

Pitfall 1: Breaking Implicit Returns Across Multiple Lines

If you place a multi-line JSX expression on a new line without parentheses, JavaScript's Automatic Semicolon Insertion (ASI) inserts an invisible ; right after =>, returning undefined:

// ❌ FAILS: JavaScript returns undefined before reaching <View>
const Card = () =>
  <View>
    <Text>Hello</Text>
  </View>

// ✅ FIX: Wrap multi-line JSX in parentheses
const Card = () => (
  <View>
    <Text>Hello</Text>
  </View>
);

Pitfall 2: Recreating Function References in Render Lists

Declaring inline arrow functions directly inside loop iterators or list props allocates a brand-new function instance in memory on every single render cycle:

// ❌ SUBOPTIMAL: Re-allocates memory for every item during every render
<FlatList data="{items}" item renderItem="{({"> <ItemCard item="{item}"/>}
/>

// ✅ OPTIMIZED: Memoize the callback reference outside the render pass
const renderItem = useCallback(({ item }) => (
  <ItemCard item="{item}"/>
), []);

<FlatList data="{items}" renderItem="{renderItem}"/>

Technical Interview Questions

Q1: What will be logged to the console by the following code, and why?

const user = {
  name: "Alex",
  printRegular: function() {
    console.log(this.name);
  },
  printArrow: () => {
    console.log(this.name);
  }
};

user.printRegular();
user.printArrow();

• Output: "Alex", then undefined.

• Explanation: printRegular is called as a method on user, so its dynamic this binds directly to user. printArrow is an arrow function, so it resolves this lexically from the surrounding scope (the global module environment), where this.name is undefined.

Q2: What is the output of running this function?

const makeProfile = () => { id: 101, status: "Active" };
console.log(makeProfile());

• Output: SyntaxError (or undefined depending on the JS engine interpreter context).

• Explanation: JavaScript treats { id: 101, status: "Active" } as a block statement rather than an object literal. Because id: is parsed as a label and , status: produces invalid block syntax, the parser fails. To return an object implicitly, wrap the object in parentheses: const makeProfile = () => ({ id: 101, status: "Active" });.

Q3: Can you invoke an arrow function with the new keyword? Why or why not?

• Answer: No. Arrow functions lack the internal [[Construct]] method and do not possess a .prototype property. Attempting to call new (() => {})() immediately throws a TypeError: (intermediate value) is not a constructor.

Q4: How do arrow functions handle the arguments object compared to standard functions?

• Answer: Arrow functions do not bind an arguments object. If you reference arguments inside an arrow function, it looks up the scope chain for the nearest outer regular function's arguments. To capture arbitrary parameters in an arrow function, use the modern rest parameter syntax ((...args) => {}).

Q5: Convert the following function into a concise arrow function utilizing implicit return and object wrapping:

function createCoordinates(x, y) {
  return {
    latitude: x,
    longitude: y,
    timestamp: Date.now()
  };
}

• Answer:

const createCoordinates = (x, y) => ({
  latitude: x,
  longitude: y,
  timestamp: Date.now()
});