Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

new Array(n) でできる Array オブジェクトや length プロパティについて

初投稿です。
JavaScript初心者なのでおかしな点がありましたらご指摘お願いします。

複数の要素をもつ配列を作成するイディオム

JavaScript の勉強をしていたらこのようなイディオムが出てきました。

 [...new Array(5)].map((_) => 'hello')
// [ 'hello', 'hello', 'hello', 'hello', 'hello' ]

ふむふむ、スプレッド構文を使ってほしい要素数分の配列を作ってるんだな。
だけど new Array(n) だけで長さ n の配列ができるんじゃなかったっけ?

new Array(5).map((_) => 'hello')
// [ <5 empty items> ]

あらら、ダメみたい。
"hello" が入りません。

new Array(5)
// [ <5 empty items> ]

そもそも empty とは何でしょうか?

Array() コンストラクター

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

arrayLength
Array コンストラクターに渡された唯一の引数が 0 から 232-1 の間 (両端を含む) の整数であった場合は、新しい JavaScript の配列を返し、その length プロパティがその値になります (注: これは arrayLength 個の空のスロットを持つ配列であり、実際に undefined の値が入ったスロットではありません)。この引数がそれ以外の数値であった場合は、 RangeError 例外が発生します。

空のスロット??
どうやらnew Array(n)は length が n で要素がない配列ができるようです。
要素がないのに length が n とは??

length プロパティ

Array.length
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length

length は Array 型のインスタンスであるオブジェクトのプロパティで、配列の要素の数を設定または取得します。値は符号なし 32 ビット整数で、常に配列の最も大きなインデックスよりも数値的に大きくなります。

設定できる!?
JavaScript の Array.length は設定ができるみたいです。

const array1 = [1, 2, 3];
console.log(array1);
// [ 1, 2, 3 ]

array1.length = 10;

console.log(array1);
// [ 1, 2, 3, <7 empty items> ]
console.log(array1.length);
// 10

おー、これは私には衝撃的でした。
要素数と length プロパティは一致させなくすることができるのですね。
length は readonly なプロパティで要素数を返すだけなのかと思い込んでいました。

以下のページに詳しく書いてありました。

length と数値プロパティとの関係
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#relationship_between_length_and_numerical_properties

スプレット構文

スプレッド構文
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

細かいところまでは書いてないですが、スプレッド構文は要素数分ではなく length 分だけ展開してくれるみたいですね。
(lengthプロパティがあるのにわざわざ要素数を計算するわけないので当たり前といえば当たり前ですが)

const array1 = [1, 2, 3];
array1.length = 5;
console.log([...array1]);
// [ 1, 2, 3, undefined, undefined ]

おわりに

  • new Array(n)は要素がなくて length が n の配列ができる
  • スプレッド構文は length 分展開する

というわけでこのイディオムが理解できました。
便利ですね。

 [...new Array(5)].map((_) => 'hello')
// [ 'hello', 'hello', 'hello', 'hello', 'hello' ]

以上です。

paleApricot
JavaScript初心者です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away