[Javascript] length 속성의 이해

 

 

 

자바스크립트에서 length 속성은 다음의 세 가지 용도로 사용된다.

 

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

 

 

 

 

1. 배열의 길이 반환

 

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

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

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

 

 

한 가지 특징적인 점은 배열에서의 length 속성은 아래 예시와 같이 수정이 가능하다는 것이다.

 

 

 

2. 문자열의 길이 반환

 

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

const greeting = "안녕하세요. 반갑습니다!";
console.log(greeting.length); // 13

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

 

배열과는 달리 문자열에서의 length 속성은 읽기 전용(immutable)이며, 직접 수정할 수 없다.

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

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

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

 

 

 

 

3. 유사 배열 객체의 길이 반환

 

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

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

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

 

// DOM NodeList 객체에서는 리스트의 노드 개수를 반환함
const elements = document.querySelectorAll("div");
console.log(elements.length); // 요소의 개수

 

// Array.from()로 생성한 iterable 객체에서는 객체 요소의 개수를 반환함
const numbers = [1, 2, 3, 4, 5];
const fromNumbers = Array.from(numbers);

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

 

 

cf) 객체 리터럴(Object literal)에서는 length 속성이 없다.

const obj = {
    name: "홍길동",
    age: 99,
    address: "대한민국 서울특별시"
};

console.log(obj.length); // undefined