[JavaScript][clean-code] Array.length

* Array.length

- 배열의 길이는 실무 혹은 간단한코드에서 많이 사용된다.

ex) if문, 리액트 등등

 

* Array.length (if문 예시)

const arr = [1, 2, 3];

if (arr.length를 이용한 조건 검색) {
  // ... some code
}

* Array.length (리액트 예시)

const arr = [1, 2, 3];

arr.length > 10 && arr.map((el) => <Some>{el}<Some>

* JavaScript array의 구멍

const arr = [1, 2, 3];

console.log(arr.length); // 3

arr.length = 10;
console.log(arr.length); 10

// arr을 찍어보면 아래와 같이 출력된다.
arr [1, 2, 3, , , , , , , ]

• JavaScript 배열에는 구멍이 있다. 객체처럼 동작하기 때문에 구멍이 생긴다.
• 해당 구멍을 자동으로 매꿀수도 없고 자동으로 바뀌지도 않는다.
• 이 부분이 프로그래밍에서 매우 큰 문제를 준다.
• 즉, JavaScript의 array의 length는 배열의 길이보단 배열의 마지막 index에 가깝다.

* 또 다른 예시

const arr = [1, 2, 3];

arr[3] = 4;

arr // [1, 2, 3, 4]
console.log(arr.length); 4

arr[9] = 10;
arr // [1, 2, 3, 4, , , , , , 10]

• console.log(arr.length)의 값이 5가 나올거라 예상을 하지만 10이 나온다.
• JavaScript의 배열의 length는 절대배열의 길이를 보장하지 못한다.
• 그렇기 때문에 마지막 index를 알려준다.

* 또 하나의 예시 (역으로 이용)

Array.prototype.clear = function() {
  this.length = 0;
}

function clearArray(array) {
  array.length = 0;

  return array;
}

const arr = [1, 2, 3]

// 배열의 길이를 0으로 변경했을뿐인대 배열이 초기화가 된다.
arr.clear()
arr // []

// 배열의 길이가 변경되었다는 이유만으로 배열이 초기화가 되었다.
console.log(clearArray(arr)) // []

(결론적으로) length는 마지막 인덱스를 표출해내는것에 가깝다.