이 글에서는 순수 자바스크립트(바닐라 JavaScript)를 사용해 배열의 마지막 요소를 가져오는 3가지 방법을 알아봅니다. 먼저 실습에 사용할 배열을 하나 만들어 보겠습니다. 여기서는 운동 목록을 활용하겠습니다.
운동 배열 만들기
const exercises = ['pull-up', 'push-up', 'squat', 'deadlift']목록에서 첫 번째 항목을 가져오려면 exercises[0], 두 번째 항목을 가져오려면 exercises[1]을 사용하면 됩니다. 그런데 만약 목록에 운동이 총 몇 개 있는지 모른다면 어떻게 해야 할까요?
걱정하지 않으셔도 됩니다. 몇 가지 방법으로 해결할 수 있습니다.
1. array.length 속성으로 마지막 요소 찾기
첫 번째 방법은 자바스크립트의 array.length 속성을 활용하는 것입니다. 먼저 변수를 선언하고 배열 값을 할당해야 합니다.
const lastExercise = exercises[exercises.length - 1]이후 console.log(lastExercise)를 실행하면 콘솔에 배열의 마지막 요소, 즉 deadlift가 출력됩니다.
2. pop() 메서드로 마지막 요소 찾기
자바스크립트 배열 메서드인 pop()을 사용할 수도 있습니다. 이 메서드 역시 배열의 마지막 요소를 가져오지만, 동작 방식은 조금 다릅니다. 직접 실행해 볼까요?
exercises.pop()pop() 메서드는 실제로 배열의 마지막 요소를 대상으로 하지만, 주의할 점이 있습니다. 이 메서드는 마지막 요소를 찾기만 하는 것이 아니라 배열에서 제거까지 해버립니다.
exercises.pop() 바로 아래에서 console.log(exercises)를 실행해 보면, 원래 4개였던 배열 요소가 이제 3개만 남아 있는 것을 확인할 수 있습니다. 이것이 의도한 동작일 수도 있고 아닐 수도 있는데, 사용 사례에 따라 판단하시면 됩니다.
3. slice() 메서드로 마지막 요소 찾기
마지막으로 소개할 방법은 length 방식과 비슷하지만, 대신 slice()를 사용한다는 점이 다릅니다.
const lastExercise = exercises.slice(-1)console.log(lastExercise)를 실행하면 앞선 length 예제와 동일한 결과를 얻을 수 있습니다. 많은 개발자들이 slice 메서드가 length 메서드보다 가독성이 뛰어나다고 평가하지만, 안타깝게도 성능 면에서는 훨씬 느린 편입니다.
직접 확인해 보고 싶다면 jsperf.com에서 slice와 length 비교 테스트를 실행해 보세요.
그렇다면 성능이 좋은 메서드를 선택해야 할까요, 아니면 가독성이 좋은 메서드를 선택해야 할까요? 정답은 없으며, 상황에 따라 달라집니다.
일반적으로 저는 이미지 처리처럼 무거운 작업을 할 때는 편의성보다 성능을 우선하는 편입니다. 하지만 이것이 흑백논리적인 문제는 아닙니다. 단순한 배열에서 마지막 요소를 찾는 경우라면, 초당 수백만 번의 함수를 실행하지 않는 한 애플리케이션에서 slice와 length 간의 성능 차이를 전혀 체감하기 어렵습니다.
결국 중요한 것은 항상 맥락에 맞게 판단하고 결정하는 것입니다.