자바스크립트에서 배열은 여러 개의 값을 담을 수 있는 자료 구조입니다. 배열의 중요한 속성 중 하나는 길이(length)입니다. 배열의 길이는 배열에 포함된 요소의 개수를 나타내며, .length 속성을 통해 접근할 수 있습니다.

배열 길이 확인하기

자바스크립트에서 배열의 길이를 확인하는 가장 간단한 방법은 .length 속성에 접근하는 것입니다. 예시를 통해 확인해보겠습니다.

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

위 코드에서는 “apple”, “banana”, “orange”로 구성된 배열 fruits를 선언하고, .length 속성을 사용하여 배열의 길이를 출력합니다. 출력 결과는 3이 됩니다.

배열 길이 변경하기

자바스크립트에서 배열의 .length 속성을 변경하여 배열의 길이를 조절할 수 있습니다. 예시를 통해 확인해보겠습니다.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5

numbers.length = 3;
console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3

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

위 코드에서는 numbers 배열의 길이를 조절하는 예시입니다. 초기에는 [1, 2, 3, 4, 5] 와 같이 5개의 요소로 구성되어 있습니다. 이후 .length 속성을 변경하여 배열의 길이를 줄였습니다.

첫 번째 변경에서는 .length 속성을 3으로 변경하였으므로, 배열의 마지막 2개 요소가 삭제된 [1, 2, 3] 형태로 바뀌게 됩니다.

두 번째 변경에서는 .length 속성을 0으로 변경하였으므로, 배열의 모든 요소가 삭제되어 [] 형태로 바뀌게 됩니다.

.length 속성을 직접 변경함으로써 배열의 길이를 조절할 수 있지만, 주의해야 할 점은 요소를 삭제하는 것이 아니라 직접적으로 배열의 길이를 변경하는 것이라는 점입니다.

배열 길이와 인덱스(index) 관계

자바스크립트 배열의 인덱스는 0부터 시작하며, 배열의 길이는 마지막 요소의 인덱스 값에 1을 더한 값과 동일합니다. 예시를 통해 확인해보겠습니다.

const colors = ["red", "blue", "green"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "green"
console.log(colors[3]); // undefined

console.log(colors.length); // 3
console.log(colors.length - 1); // 2

위 코드에서는 colors 배열의 인덱스를 이용하여 요소에 접근합니다. colors[0]은 배열의 첫 번째 요소인 “red”를, colors[2]는 배열의 세 번째 요소인 “green”을 나타냅니다.

colors[3]은 배열의 길이를 초과하는 인덱스로, 존재하지 않는 요소에 접근하려고 하므로 undefined가 출력됩니다.

마지막으로, 배열의 길이인 colors.length와 마지막 요소의 인덱스인 colors.length - 1은 동일한 값인 2입니다.

자바스크립트 배열에서 길이는 요소의 개수와 관련이 있으며, .length 속성을 통해 쉽게 접근하여 확인 및 조작할 수 있습니다. 이를 활용하여 배열을 다루는 작업을 보다 편리하게 할 수 있습니다.