[자바스크립트] 배열의 마지막 요소를 가져오는 방법에 대하여

이번 포스트에서는 배열의 마지막 요소를 가져오는 방법에 대해 알아보도록 하겠다.

파이썬의 경우 배열의 마지막 요소는 array[-1]로 가져올 수 있다.

과연 자바스크립트에서도 동작할까?

let array = [0,1,2,3,4];
console.log(array[-1]); // undefined

안된다. 이로써 가장 간단한 방법이라고 생각했던 것이 안된다.

그러면 길이를 계산해서 마지막 요소를 가져오는 방법이 있다.

let array = [0,1,2,3,4];
console.log(array[array.length -1]); // 4

아주 깔끔하다.

---

추가로 다른 방법이 있나 더 찾아보도록 하자.

아래는 stackoverflow에 올라온 질문에 대한 답이다.

Selecting last element in JavaScript array

가장 많은 따봉을 받은 답변이

앞에서 했던 것과 같다.

추가로 이 형님은 array 객체의 프로토타입에 메소드를 추가해서 사용하라고까지 알려주신다.

다만 나는 prototype에 대해 추가적인 메소드를 선언하는 것을 좋아하지 않아서 그렇게 추천하고 싶은 방법은 아니다. 그냥 배열의 크기를 구해서 쓰도록 하자

---

두 번째 따봉이

slice를 이용하는 것이다.

slice(-1)이면 배열의 끝에만 뒤에서 1번째 인덱스만 잘라서 배열로 반환한다. 그것의 0번째이니 마지막 값이 나온다.

그런데 이게 속도가 느리다고 한다. 비교해보자

//첫 번째 방법
for (let repeat = 0; repeat < 10; repeat++) {
  let array = [0,1,2,3,4];
  console.time();
  for (let i = 0; i < 100000000; i++) {
    array[array.length-1]
  }
  console.timeEnd();
}

//두 번째 방법
for (let repeat = 0; repeat < 10; repeat++) {
  let array = [0,1,2,3,4];
  console.time();
  for (let i = 0; i < 100000000; i++) {
    array.slice(-1)[0];
  }
  console.timeEnd();
}

압도적인 성능 차이를 보인다. 

---

그렇다면 두 번째 방법은 안 쓰는 것이 좋은 것인가?

고민해보다가 두 번째 방법이 유용할 때를 찾아냈다. 첫 번째 방법과 달리 두 번째 방법은 배열의 메소드체이닝을 활용한 것이다.

만약 특정 문자열이 들어오고 그 문자열을 쪼개서 마지막 인덱스, 원하는 인덱스를 찾아보자고 할때 두 번째 방법이 매력적이다.

코드를 한번 보자.

let str = "1111_2222_3333_4444_5555";

str.split("_")[str.split("_").length -1] // <- 첫번째
str.split("_").slice(-1)[0]; // <- 두번째

두 방법 모두 문자열을 _로 쪼갠후 마지막에 있는 값을 가져온다.

첫 번째 방법은 메소드 체이닝이 이상해진다. 쪼갠 배열을 다시 한번 넣고 배열의 크기를 구해야 한다.

하지만 두 번째 방법은 메소드 체이닝으로 자연스럽게 연결된다.

첫번째 방법도 예시 코드로 보면 아주 간단해보이지만. 메소드 체이닝을 통해 여러번 연산된 배열의 마지막 값을 구할때는 더이상 간단하지 않을 것이다.

따라서 이럴 때는 첫 번째 방법보다 두 번째 방법을 통해 마지막에 .slice(-1)[0] 으로 가져오는 것이 더 좋은 방법이 아닐까 생각한다.

---

세번째 방법 ( 2021-09-08 기준 추가 )

위에서 파이썬의 array[-1]의 예를 들면서 자바스크립트가 해당 기능을 제공하지 않는다고 설명했었다. 

하지만 요새 인터넷 서빙중에 at이라는 배열 메소드를 발견했다.

Array.prototype.at() - JavaScript | MDN

//자바스크립트 Demo "at"
const array1 = [5, 12, 8, 130, 44];

let index = 2;

console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// expected output: "Using an index of 2 the item returned is 8"

index = -2;

console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
// expected output: "Using an index of -2 item returned is 130"

그림. 구글 크롬 기준 동작

 

버젼을 확인하고 쓰세요