...Array()の使い方を知りたい

Question

前提・実現したいこと

React Nativeを利用してアプリの開発をしています。

他の質問をした時に、回答してもらった参考のコードの中で
...Array()が利用されていました。

Javascriptの...使い方を調べると、下記のサイトのようにスプレッド構文として紹介されています。
【JavaScript】スプレッド構文の便利な使い方まとめ

【JavaScript】”…”ドットが3つ…？これ、どうやって使うの？スプレッド構文の挙動と活用方法

該当のソースコードで紹介している...Array()の使い方は、他のスプレッド構文の使い方と同じなのでしょうか？

疑問に思う点は、
①Arrayは変数等で宣言されていなく、値をもっていないのに、なぜ分割（スプレッド）できるのか？
②Array()は配列の変数宣言、初期化に使われるが、なぜNew演算子がなくても利用できるのか？

該当のソースコード

①の箇所でArray()が利用されています。

import React, { useState } from "react";
import { View, Button } from "react-native";

function Item({ handleMakeNew }) {
  return (
    <Button
      title="追加"
      onPress={() => {
        handleMakeNew();
      }}
    />
  );
}

export default function TestListItem() {
  const [count, setCount] = useState(1);

  function handleMakeNew() {
    setCount((v) => v + 1);
  }

  return (
    <View>
      {[...Array(count).keys()].map((i) => ( //①ここで...Array()が利用されている
        <Item handleMakeNew={handleMakeNew} key={i} i={i} />
      ))}
    </View>
  );
}

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

Arrayは変数等で宣言されていなく

いえ、Arrayは、JavaScript標準で存在する関数です。

• Array(0以上の整数)という形で呼び出すと、その数がlengthとなった配列を返します。
• それ以外の引数（整数でないもの、あるいは2個以上の引数、空）をArray()に与えると、引数リストを入れた配列を返します。

以上の動作をします（MDN英語版）。

Comments

[tomaa]

ご回答いただきありがとうございます。
例えば、...Array(counter)のcounterが3だとすると、
[' ',' ',' ']が
[ , , ]になるように...Array()としているのでしょうか？

[maisumakun]

元の使い方自体があまり良くないのは間違いないですね。

自分が書くのでしたら、Array.from({length: counter}, (_, i) =>(/* JSX略 */))のように書きたいです。

[tomaa]

アドバイスありがとうございます。
紹介して頂いたコードも参考にして、開発を続けようと思います。