JavaScript에서 length 속성은 객체의 크기를 반환합니다. 배열 객체에 사용하면 요소의 개수를 알려주고, 문자열 객체에 사용하면 문자의 개수를 반환합니다.
length 속성의 특징
length는 속성(property)이 아니라 메서드가 아니므로 뒤에 괄호()를 붙이지 않습니다.- 배열의 마지막 요소는 항상
arr[arr.length - 1]로 접근할 수 있습니다. length값은 읽기 전용처럼 보이지만 실제로는 값을 변경해 배열 크기를 늘리거나 줄일 수도 있습니다.
다음은 버튼을 클릭할 때 배열의 길이를 화면에 출력하는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript length property</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to find the length of the array
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let arr = [1, 2, "A", "B", "D"];
sampleEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML += "The array length is = " + arr.length;
});
</script>
</body>
</html>
코드 설명
위 예제에서는 숫자와 문자가 섞여 있는 배열 [1, 2, "A", "B", "D"]를 생성한 후, 페이지에 해당 배열의 내용을 표시합니다. 그리고 CLICK HERE 버튼에 클릭 이벤트 리스너를 등록하여, 버튼을 누르면 arr.length로 계산된 배열의 길이가 결과 영역에 출력되도록 구현했습니다.
실행 결과
페이지를 처음 열면 아래와 같이 배열의 내용이 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 배열의 길이가 결과 영역에 추가로 출력됩니다.
이처럼 length 속성을 활용하면 별도의 반복문 없이도 배열 또는 문자열의 크기를 즉시 확인할 수 있어, 조건문이나 반복 처리 시 매우 유용하게 사용됩니다.