이해와 사용 방법

length 속성은
배열, 문자열, 유사 배열 객체처럼 인덱스로 항목에 접근할 수 있는 구조에서, 전체 항목의 개수를 숫자 값으로 나타냅니다.

또한, 자바스크립트의 특수한 객체(Window, History 등)에서도 각 객체의 특성에 맞는 개수나 길이를 반환하는 용도로 사용됩니다.

항목의 개수가 없으면 숫자 값은 0을 나타냅니다.

length 속성을 가지고 있는 객체

  • 배열: 배열의 길이(요소의 개수)
  • 문자열: 문자열의 길이(문자열의 개수)
  • 유사 배열: 객체에 포함된 요소의 개수
  • TypedArray: TypedArray의 요소의 개수
  • Window: window의 frame 개수, 즉 현재 창(window) 안에 포함된 <iframe> 요소의 개수
  • History: 현재 페이지를 포함해, 세션 기록의 길이
  • Storage: Storage 객체에 저장된 데이터 항목의 수

배열의 length 속성

배열에서 length 속성은 배열에 포함된 요소의 개수를 숫자 값으로 나타냅니다.

JavaScript 
const fruits = ["apple", "orange", "banana"];
console.log(fruits.length); // 3

const emptyArr = [];
console.log(emptyArr.length); // 0

배열에서 length 속성에 대한 더 자세한 설명은 자바스크립트 배열 length 속성 - 배열의 길이 확인을 참고하세요.

문자열의 length 속성

문자열에서 length 속성은 문자열에 포함된 문자의 개수를 숫자 값으로 나타냅니다.

JavaScript 
const greeting = "환영합니다. 반값습니다!";
console.log(greeting.length); // 13

const emptyStr = "";
console.log(emptyStr.length); // 0

문자열에서 length 속성에 대한 더 자세한 설명은 자바스크립트 문자열 length 속성 - 문자열의 길이 확인을 참고하세요.

유사 배열의 length 속성

자바스크립트에서는 배열과, 배열과 비슷한 성격을 가진 유사 배열 객체(Array-like Objects)가 있습니다. 이들은 실제 배열은 아니지만 유사한 구조입니다. 예를 들어 함수의 arguments 객체나 DOM 컬렉션인 NodeList가 해당됩니다. 유사 배열은 length 속성을 가지고 있습니다.

예: 함수의 arguments 객체

함수의 arguments 객체는 매개변수의 개수를 숫자 값으로 나타냅니다.

JavaScript 
function myFunction(a, b, c) {
  console.log(arguments.length);
}

myFunction(); // 0
myFunction(1); // 1
myFunction(1, 2); // 2
myFunction(1, 2, 3); // 3
예: NodeList 객체

NodeList 객체에서는 리스트의 노드 개수를 숫자 값으로 나타냅니다.

JavaScript 
const elements = document.querySelectorAll("p");
console.log(elements.length); // 요소의 개수

주의할 점

length 속성은 문자열, History, Storage에서 읽기 전용(immutable)이며, 직접 수정할 수 없습니다. 반면, 배열의 length 속성은 직접 수정이 가능합니다. 배열의 length를 줄이면 배열의 요소가 실제로 삭제되고, 늘리면 빈 공간이 생기는 특징이 있습니다.

읽기 전용(immutable) length 예제: 문자열

문자열은 length 값을 직접 할당하여 길이를 조절하려고 해도 원본 데이터와 길이가 변하지 않습니다.

JavaScript 
let str = "Hello, World!";
console.log(str.length); // 13

// length 속성을 수정하려고 시도
str.length = 5;

console.log(str.length); // 여전히 13
console.log(str);        // "Hello, World!" 그대로 유지됨

수정 가능한 length 예제: 배열

배열은 length를 수정하면 메모리상의 데이터가 물리적으로 조절됩니다.

JavaScript 
let arr = ["Apple", "Banana", "Orange", "Grape"];
console.log(arr.length); // 4

// 1. length를 현재보다 작게 수정 (배열 단축)
arr.length = 2; 
console.log(arr.length); // 2
console.log(arr);        // ["Apple", "Banana"] -> 나머지 요소는 영구적으로 삭제됨

// 2. length를 현재보다 크게 수정 (배열 확장)
arr.length = 5;
console.log(arr.length); // 5
console.log(arr);        // ["Apple", "Banana", empty × 3] -> 빈 공간(hole)이 생김

// 3. 다시 원래 데이터로 복구하려고 해도 삭제된 데이터는 돌아오지 않음
console.log(arr[2]);     // undefined

참고문헌

같이 보기