slice()で返り値がundefinedになってしまう

Question

現在、JavaScriptの練習でページネーションを作成しています。(jquery無し)
構成については、配列(items)からslice()によって５個ずつ要素を取り出し、得られた要素をそれぞれのページに表示するというものです。
しかし、関数(slice_array)を実行すると、新しい配列自体はできるのですが、要素がundefinedになってしまいます。
原因がわかる方がいましたら、教えていただきたいです。

以下コード

<p class="title">Menu</p>
        <ul id="page_count"></ul>
        <ul id="contents"></ul>
        <ul class="pagination">
            <li id="prev">&lt;</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li id="next">&gt;</li>
        </ul>

body {
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
}

.pagination {
    display: flex;
}

li {
    list-style: none;
    margin-left: 5px;
    margin: 0 auto;
}

.title {
    font-size: 30px;
}

const items = [
        {"id": 1, "name": "サラダ油"},
        {"id": 2, "name": "オリーブオイル"},
        {"id": 3, "name": "酢"},
        {"id": 4, "name": "ごまドレ"},
        {"id": 5, "name": "鶏ガラ"},
        {"id": 6, "name": "小麦粉"},
        {"id": 7, "name": "ごま油"},
        {"id": 8, "name": "塩"},
        {"id": 9, "name": "胡椒"},
        {"id": 10, "name": "片栗粉"},
        {"id": 11, "name": "ショートケーキ"},
        {"id": 12, "name": "チーズケーキ"},
        {"id": 13, "name": "プリン"},
        {"id": 14, "name": "パフェ"},
        {"id": 15, "name": "アップルパイ"},
        {"id": 16, "name": "クッキー"},
        {"id": 17, "name": "チョコレートケーキ"},
        {"id": 18, "name": "フルーツ"},
    ];


    const pagination = () => {
        const li = document.createElement('li');
        const page_count = document.getElementById('page_count');
        let current_page = 1; 
        const contents = 5;
        const pages = Math.ceil(items.length/5);
    
        page_count.appendChild(li).innerHTML = current_page + "/" + pages + " " + "page";
    
        const slice_array = (array, number) => {
            const length = Math.ceil(array.length/number);
            return new Array(length).fill().map((_, i) => {
                array.slice(i * number, (i + 1) * number);
            });
        }

        slice_array(items, contents);
        
        console.log(slice_array(items, contents));  //ここでundefinedになってしまいます。

    }

    window.onload = () => {
        pagination();
    }

Answer 1

リファレンスのとおり、=>の後に書くのは、式かブロックです。
式を書くとその値がreturnされますが、ブロックの場合は単に実行されるだけなので、普通の関数と同じく、ブロック中でreturnしないとデフォルトの値はundefinedです（リファレンス）。

式が、オブジェクトリテラルだと、構文的にブロックと区別つかないので、括弧で囲む必要があります。

Comments

[samepanda]

ご回答ありがとうございます。
式でもオブジェクトリテラルとブロックの違いについて十分に理解していなかったために、予期していない動作になったのだと思います。
改めてありがとうございました。

Answer 2

これは JavaScript のアロー関数のわかりにくいところの一つなんですが、

const f = (x) => x;

と書いた場合 f はきちんと x を返す関数になりますが

const f = (x) => { x };

は常に undefined を返すようになってしまいます。これを直すには

const f = (x) => { return x };

と明示的に return しなければいけません。というわけで

        const slice_array = (array, number) => {
            const length = Math.ceil(array.length/number);
            return new Array(length).fill().map((_, i) => {
                return array.slice(i * number, (i + 1) * number);
            });
        }

とすれば直るでしょう。

Comments

[samepanda]

ご回答ありがとうございます。
無事動作しました。
しかし、どうしてreturnを加えなければならないのでしょうか？
MDNを確認したところ、
```
// object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
params => ({foo: bar})
```
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Advanced_syntax
とある通り、丸括弧で囲えばオブジェクトであっても、予期通り返ってくるとあるのですが。。。
もしよろしければ、ご回答お願いします。

[A_kirisaki]

丸括弧も OK でしたね、すみません。ですが map に渡している関数、波括弧ではありませんか？

[samepanda]

ご回答ありがとうございます。
ベストアンサーにさせていただきました。
波括弧、つまりブロックであるため丸括弧ではだめでしたね。。
オブジェクトとブロックの違いがよく理解していなかったため、誤解してしまいました。
勉強し直します！
改めてありがとうございました。