Level: Intermediate | Player: 09_Destruction and_Spread

Learning Objectives

Know the syntax of arrow functions.
If the body is one line, use an implicit return.
Can explain the difference between function and this of the arrow.
Use arrow functions naturally as callbacks.
Know when arrow functions are not appropriate (methods, constructors).

1. Basic grammar

const add = (a, b) => a + b;
const square = x => x * x;          //If there is one parameter, parentheses can be omitted.
const log = () => console.log("hi"); //No arguments → empty parentheses

If the body has multiple lines, specify braces and return.

const greet = (name) => {
  const msg = `Hello, ${name}`;
  return msg;
};

2. Implicitly return an object

Object literals have the same appearance as function body blocks and must be enclosed in parentheses.

const make = (x, y) => ({ x, y });

3. this difference

this of general function is determined depending on the calling method, but arrow functions use this at the declared position (lexical this).

const obj = {
  name: "A",
  hello1: function () { return this.name; },
  hello2: () => this?.name,
};
obj.hello1(); // "A"
obj.hello2(); //undefined (this at the time of declaration)

Therefore, object methods usually use function or shortened method syntax, and when you want to maintain an external this like a callback, you use an arrow.

4. Suitable for callbacks

[1, 2, 3].map((x) => x * 10); // [10, 20, 30]
setTimeout(() => console.log("done"), 100);

Core example

file	Contents covered
`01_basic.js`	Basic syntax, parameter types
`02_implicit_return.js`	implicit return, return object
`03_this_diff.js`	this Compare the differences
`04_callbacks.js`	array method callback

⚠️ Common Mistakes

When returning an object, it is interpreted as a block by removing the parentheses and returns undefined.
Define the arrow function as an object method and bewildered that this does not exist.
The arrow function forgets that there is no arguments object.
Arrow functions cannot be called with the constructor (new).
SyntaxError occurs by writing up to return in a one-line function.

❓ Frequently Asked Questions (FAQ)

Q1. Can I always use arrow functions? A. function is more appropriate for method and prototype definitions.

Q2. If arguments are needed? A. Use rest parameters (...args).

Q3. What is the difference from an anonymous function? A. Arrows are also anonymous, and are given a name by assigning them to a variable. However, the name attribute is inferred from the variable name.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_basic.jsJavaScript

/**
 *Arrow function basic syntax
 */
"use strict";

const add = (a, b) => a + b;
const square = (x) => x * x;
const noArg = () => 42;

console.log(add(2, 3));
console.log(square(5));
console.log(noArg());

const greet = (name) => {
  const msg = `Hi, ${name}`;
  return msg;
};
console.log(greet("Sun"));

src/02_implicit_return.jsJavaScript

/**
 *Implicit return and object return
 */
"use strict";

const double = (x) => x * 2;
console.log(double(7));

//Parentheses are required to return an object
const point = (x, y) => ({ x, y });
console.log(point(1, 2));

//Incorrect example (interpreted as a block)
const wrong = (x, y) => { x, y };
console.log("wrong =", wrong(1, 2)); // undefined

src/03_this_diff.jsJavaScript

/**
 *this difference
 */
"use strict";

const obj = {
  name: "ObjA",
  fn() {
    return this.name;
  },
  arrow: () => {
    //lexical this = module/global
    return typeof this === "undefined" ? "undefined" : "global";
  },
};

console.log("fn =", obj.fn());
console.log("arrow =", obj.arrow());

//Arrows are advantageous if you need to maintain an external this in your callback.
const timer = {
  seconds: 0,
  start() {
    const tick = () => {
      this.seconds += 1;
    };
    tick();
    tick();
    return this.seconds;
  },
};
console.log("timer =", timer.start()); // 2

src/04_callbacks.jsJavaScript

/**
 *Arrow functions as array callbacks
 */
"use strict";

const nums = [1, 2, 3, 4, 5];

console.log(nums.map((x) => x * x));
console.log(nums.filter((x) => x % 2 === 0));
console.log(nums.reduce((a, b) => a + b, 0));

setTimeout(() => console.log("delayed log"), 10);

Assignment

homework_01.js

Change the functions below to arrow functions.

function add(a, b) { return a + b; }
function isEven(n) { return n % 2 === 0; }
function shout(msg) { return msg.toUpperCase() + "!"; }

homework_02.js

Write makePoint(x, y) as an arrow function and return a { x, y, distance } object. distance is the distance from the origin.

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.jsJavaScript

/**
 *Challenge 1: Convert to Arrow
 */
"use strict";

const add = (a, b) => a + b;
const isEven = (n) => n % 2 === 0;
const shout = (msg) => msg.toUpperCase() + "!";

console.log(add(2, 3));
console.log(isEven(4));
console.log(shout("hello"));

homework_02.jsJavaScript

/**
 *Challenge 2: Coordinate Generator
 */
"use strict";

const makePoint = (x, y) => ({
  x,
  y,
  distance: Math.hypot(x, y),
});

console.log(makePoint(3, 4)); // { x:3, y:4, distance:5 }

Arrow Functions