JavaScript에서 배열(Array)의 length 속성은 해당 배열에 포함된 전체 요소의 개수를 반환하거나, 원하는 값으로 배열의 길이를 직접 설정할 수 있는 속성입니다.
즉, length 속성을 읽으면 배열의 크기를 알 수 있고, 값을 할당하면 배열의 길이를 변경할 수도 있습니다.
length 속성의 주요 특징
- 배열의 마지막 인덱스는 항상
length - 1입니다. - length보다 큰 인덱스에 값을 할당하면 배열이 자동으로 확장되며, 빈 구간은
undefined로 채워집니다. - length를 현재보다 작은 값으로 설정하면 그 이후의 요소들은 잘려나갑니다.
예제 코드
다음은 버튼을 클릭하면 배열의 길이를 화면에 표시하는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Array length</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 배열 length 속성</h1>
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 배열의 길이가 표시됩니다.</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ['H','E','L','L','O'];
fillEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = '배열의 길이는 ' + arr.length + '입니다.';
});
</script>
</body>
</html>실행 결과
페이지를 처음 열면 배열의 요소들이 화면에 출력됩니다.
이후 “클릭하세요” 버튼을 누르면 아래와 같이 배열의 길이가 표시됩니다.
정리
배열의 length 속성은 단순히 요소 개수를 확인하는 용도뿐만 아니라, 배열을 동적으로 확장하거나 축소하는 데에도 활용할 수 있는 매우 유용한 기능입니다. 반복문 처리나 배열 조작 시 자주 사용되므로 정확히 이해해 두는 것이 좋습니다.