length 속성

자바스크립트에서 length 속성은 다음과 같은 세 가지 용도로 사용됩니다.

  1. 배열의 길이를 반환
  2. 문자열의 길이를 반환
  3. 유사 배열 객체의 길이를 반환

주의할 점은 length 속성이 읽기 전용(immutable)이며, 직접 수정할 수 없다는 것입니다.

배열의 길이를 반환

배열에서 length 속성은 배열에 포함된 요소의 개수를 반환합니다.

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

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

문자열의 길이를 반환

문자열에서 length 속성은 문자열에 포함된 문자의 개수를 반환합니다.

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

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

유사 배열 객체의 길이를 반환

일부 객체는 배열처럼 인덱스를 통해 접근할 수 있고, length 속성을 가지고 있습니다.

JavaScript 함수의 arguments 객체에서는 매개변수의 개수를 반환합니다. 
function myFunction(a, b, c) {
  console.log(arguments.length);
}

myFunction(); // 0
myFunction(1); // 1
myFunction(1, 2); // 2
myFunction(1, 2, 3); // 3
JavaScript DOM NodeList 객체에서는 리스트의 노드 개수를 반환합니다. 
const elements = document.querySelectorAll("p");
console.log(elements.length); // 요소의 개수
자바스크립트 NodeList 이해하기
JavaScript Array.from() 메서드로 생성한 이터러블(iterable) 객체에서는 이터러블 객체의 요소의 개수를 반환합니다. 
const numbers = [1, 2, 3, 4, 5];
const fromNumbers = Array.from(numbers);

console.log(fromNumbers.length); // 5

참고로 객체 리터럴(Object literal)에서는 length 속성이 없습니다

JavaScript 
const obj = {
    name: "홍길동",
    age: 30,
    address: "서울특별시 서초구 사임당로 123"
};

console.log(obj.length); // undefined
자바스크립트 undefined 값

주의할 점

length 속성은 읽기 전용(immutable)이며, 직접 수정할 수 없습니다.

JavaScript 배열에서의 예시 
const myArray = [1, 2, 3, 4, 5];

// 읽기: length 속성을 통해 배열의 길이를 확인
console.log(myArray.length); // 출력: 5

// 쓰기 시도: length 속성을 직접 수정하는 것은 불가능
myArray.length = 10; // 이 코드는 동작하지 않습니다.

// 변경 후 읽기: length 속성이 변경되지 않았음을 확인
console.log(myArray.length); // 출력: 5
JavaScript 문자열에서의 예시 
const myString = "Hello, World!";

// 읽기: length 속성을 통해 문자열의 길이를 확인
console.log(myString.length); // 출력: 13

// 쓰기 시도: length 속성을 직접 수정하는 것은 불가능
myString.length = 10; // 이 코드는 동작하지 않습니다.

// 변경 후 읽기: length 속성이 변경되지 않았음을 확인
console.log(myString.length); // 출력: 13

예외 사항

arguments 객체의 length 속성은 읽기 전용이지만, 대부분의 브라우저의 경우 arguments 객체의 length 속성을 직접 수정할 수 있습니다. 이는 ECMAScript의 표준을 위배하는 구현이지만, 대부분 브라우저에서 지원하고 있습니다.

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

myFunction(); // 10
myFunction(1); // 10
myFunction(1, 2); // 10
myFunction(1, 2, 3); // 10

참고문헌

같이 보기