배열(Array)은 여러 개의 요소가 모인 자료구조로, 각 요소는 고유한 인덱스(index) 값을 가지고 있습니다. 이 인덱스를 활용하면 배열 안의 어떤 요소든 자유롭게 접근할 수 있습니다. 다만 마지막 요소의 경우, 배열에 담긴 요소의 총개수를 알기 전까지는 정확한 인덱스를 알 수 없기 때문에 약간의 논리적 처리가 필요합니다. 이번 글에서는 JavaScript 배열의 첫 번째 요소와 마지막 요소를 가져오는 다양한 방법을 살펴보겠습니다.
첫 번째 요소 접근하기
배열의 인덱스는 항상 0부터 시작하므로, 첫 번째 요소의 인덱스는 이미 알려져 있다고 볼 수 있습니다. 따라서 매우 간단하게 값을 가져올 수 있습니다. 배열 이름이 arr이라면, 첫 번째 요소의 값은 arr[0]으로 표현됩니다.
예제
아래 예제에는 array1과 array2라는 두 개의 배열이 있으며, 두 배열 모두 4개의 요소로 구성되어 있습니다. 첫 번째 요소의 인덱스는 '0'이므로, 첫 번째 요소의 값은 각각 array1[0]과 array2[0]이 됩니다.
<html>
<body>
<script>
var array1 = ["Tutorix", "Tutorialspoint", "Javascript", "Java"];
document.write(array1[0]);
document.write("</br>");
var array2 = ["Elon musk", "Bilgates", "Larry page", "slim helu"];
document.write(array2[0]);
</script>
</body>
</html>출력 결과
Tutorix Elon musk
마지막 요소 접근하기
배열에 들어 있는 요소의 개수를 미리 알고 있다면, 인덱스만으로 마지막 요소를 손쉽게 찾을 수 있습니다. 예를 들어 arr이라는 배열이 5개의 요소를 가지고 있다면, 마지막 요소는 arr[4]입니다.
하지만 요소의 개수를 모르는 상황이라면 논리적으로 접근해야 합니다. 핵심 원리는 간단합니다. 마지막 요소란 '배열의 길이(length)에서 1을 뺀' 인덱스 위치에 있는 요소입니다. 즉, 배열의 길이가 4라면 마지막 요소는 arr[3]이 됩니다.
예제
다음 예제에서는 array1과 array2라는 두 배열의 마지막 요소를 구하여 화면에 출력합니다. 앞선 배열은 일반 인덱스를 직접 지정하는 방식을 사용했고, 뒤의 배열은 배열의 length 속성을 활용하는 방식을 사용했습니다.
<html>
<body>
<script>
var array1 = ["Javascript", "Java", "Spring", "springboot"];
document.write(array1[3]);
document.write("</br>");
var array2 = ["Elon musk", "Bilgates", "Larry page", "slim helu", "jackma", "Ambani"];
document.write(array2[array2.length - 1]);
</script>
</body>
</html>출력 결과
springboot Ambani
참고: at() 메서드로 더 간결하게
최신 JavaScript(ES2022)에서는 at() 메서드를 사용할 수도 있습니다. 음수 인덱스를 지원하기 때문에 arr.at(-1)을 입력하면 배열의 길이를 계산할 필요 없이 바로 마지막 요소를 가져올 수 있어 코드가 한층 간결해집니다. 물론 구버전 브라우저 호환성이 필요한 환경이라면 위에서 설명한 arr[arr.length - 1] 방식을 사용하는 것이 안전합니다.