JavaScript | ES6+ 文法:関数の進化 – 暗黙の return

JavaScript
スポンサーリンク

暗黙の return とは何か

暗黙の return は、アロー関数で本体が“1つの式”だけのときに、return キーワードを書かなくてもその式の評価結果が返る仕組みです。ここが重要です:波括弧 {} を書かない「簡潔な本体(concise body)」のときだけ有効で、ブロックを使ったら必ず return を書く必要があります。

// 暗黙の return(式が1つ)
const double = x => x * 2;

// ブロックにしたら明示的な return が必須
const double2 = x => { 
  const y = x * 2;
  return y; 
};
JavaScript

基本文法とオブジェクト返却の注意

1行の式ならそのまま返せる

式が1つなら、短くて読みやすい関数になります。関数を「値を計算して返すもの」として使う典型に向いています。

const greet = name => `Hello, ${name}`;
const add = (a, b) => a + b;
const isPositive = n => n > 0;
JavaScript

オブジェクトを返すときは括弧で包む

ここが重要です:{} は“ブロック”とも解釈されるため、オブジェクトリテラルを返すときは丸括弧 () で包んで「これは式です」と明示します。

const makeUser = (id, name) => ({ id, name });  // OK
// const makeUser = (id, name) => { id, name };  // NG(ブロックと解釈される)
JavaScript

使えるとき/使えないとき(設計の分岐点)

使えるとき:純粋で短い“変換・判定”

暗黙の return は、入力を受けて“すぐに答えを返す”タイプの関数に最適です。副作用がなく、1行で意図が伝わるものに向いています。

const toLabel = ({ id, name }) => `${id}:${name.trim()}`;
const priceWithTax = (price, rate = 0.1) => Math.round(price * (1 + rate));
JavaScript

使えないとき:複数文・分岐・例外処理

ここが重要です:複数行のロジック、try/catch、複数ステップの処理では波括弧を使い、return を明示します。if/else を書きたいなら三項演算子に“式として”落とし込むか、ブロック+returnに切り替えます。

// 三項演算子で式にする(暗黙の return を活かす)
const status = s => s ? "OK" : "NG";

// 複数行は明示的な return
const sumPositives = arr => {
  let total = 0;
  for (const n of arr) if (n > 0) total += n;
  return total;
};
JavaScript

よくある落とし穴(重要ポイントの深掘り)

波括弧を付けたのに return を忘れる

ブロックを書いた瞬間、暗黙の return は無効になります。ここが重要です:ブロック本体では必ず return を書く癖をつける。

const f = x => { x * 2; };          // undefined(return なし)
const g = x => { return x * 2; };   // OK
JavaScript

オブジェクト返却の括弧忘れ

丸括弧を忘れると“空のブロック”になり、undefined を返します。返すのは「式」だと自分に言い聞かせるのがコツです。

const toUser = name => ({ name, active: true });  // OK
JavaScript

複雑な式の“無理な1行化”

読みやすさを犠牲にしてまで暗黙の return に押し込むのは逆効果です。式が長い・ネストが深いなら、波括弧+returnで段階的に書きましょう。

// NG: 長すぎる1行
const calc = x => ((x>0?x*2:x/2)+Math.max(0,x-10))|0;

// OK: 段階的に
const calc = x => {
  const base = x > 0 ? x * 2 : x / 2;
  const bonus = Math.max(0, x - 10);
  return (base + bonus) | 0;
};
JavaScript

実務での活用パターン

配列メソッドとの相性が抜群

map・filter・reduce は“短いコールバック”が前提です。暗黙の return で意図が直感的に伝わります。

const rows = [
  { id: 1, active: true,  price: 100 },
  { id: 2, active: false, price: 200 },
  { id: 3, active: true,  price: 300 },
];

const view = rows
  .filter(r => r.active)
  .map(r => ({ id: r.id, priceWithTax: Math.round(r.price * 1.1) }));

const total = rows.reduce((sum, r) => sum + r.price, 0);
JavaScript

async/await と合わせる

暗黙の return は async アロー関数でも使えます。ここが重要です:短い非同期処理を1行で表現でき、読みやすさが向上します。

const fetchJson = async url => (await fetch(url)).json();

const loadAll = async urls => Promise.all(urls.map(fetchJson));
JavaScript

まとめ

暗黙の return の核心は「アロー関数を“1つの式”で書けば return を省略できる」ことです。オブジェクト返却は括弧で包み、複数行や例外処理があるならブロック+明示的 return に切り替える。短く純粋な変換・判定・配列メソッドのコールバックで最大の効果を発揮し、読みやすさを維持するために“無理な1行化”は避ける。これを徹底すれば、初心者でもアロー関数を気持ちよく使いこなし、誤作動のない明快な関数を書けます。

タイトルとURLをコピーしました