Arrayの操作を間違えるとlengthと要素数が合わなくなったりする

既存コードに配列の要素をdeleteしているところがあったので、真似して要素の削除はdeleteを使っていたのですが、デバッグしていたらなんか要素数とlengthが合わない。調べてみたら、deleteはArrayのlengthを更新しないようでした。なんてこった！

var testArray = ["A", "B", "C"];
console.log(testArray); // A,B,C
console.log(testArray.length); // 3
delete testArray[2];
console.log(testArray); // A,B
console.log(testArray.length); // 3

Arrayオブジェクトが提供している要素の変更関連メソッドは正常にlengthプロパティも更新するようです。まぁ、この挙動が不安定だとうわーってなりますね。。

var testArray = ["A", "B", "C"];
console.log(testArray); // A,B,C
console.log(testArray.length); // 3

// push
testArray.push("D");
console.log(testArray); // A,B,C,D
console.log(testArray.length); // 4

// unshift
testArray.unshift("E");
console.log(testArray); // E,A,B,C,D
console.log(testArray.length); // 5

// pop
testArray.pop();
console.log(testArray); // E,A,B,C
console.log(testArray.length); // 4

// shift
testArray.shift();
console.log(testArray); // A,B,C
console.log(testArray.length); // 3

// splice
testArray.splice(2, 1, "D", "E");
console.log(testArray); // A,B,D,E
console.log(testArray.length); // 4

// concat
testArray2 = testArray.concat(["F","G"]);
console.log(testArray2); // A,B,D,E,F,G
console.log(testArray2.length); // 6

// slice
testArray3 = testArray2.slice(3);
console.log(testArray3); // E,F,G
console.log(testArray3.length); // 3

そしてlengthプロパティを変更すると、なんと指定したlength番目以降の要素を削除できたりするようです。すごいけれど、少しトリッキーな感じです。要素数以上のlengthを指定すると、要素数がlengthより少ない配列ができてしまって危ない感じになりました。

var testArray = ["A", "B", "C"];
console.log(testArray); // A,B,C
console.log(testArray.length); // 3

testArray.length = 2;
console.log(testArray); // A,B
console.log(testArray.length); // 2

testArray.length = 3;
console.log(testArray); // A,B
console.log(testArray.length); // 3