JavaScript - 배열의 마지막 요소 가져오기

자바스크립트에서 배열의 마지막 값에 접근하여 가져오는 방법을 소개합니다. 첫번째로 length를 이용하여 마지막 인덱스에 접근하는 방법과 두번째로 slice를 이용하여 마지막 요소에 접근하는 방법이 있습니다. 세번째로 신규 메소드인 at()을 사용하는 방법이 있고, 마지막으로 pop()으로 배열에서 요소를 제거하고 값을 읽는 방법이 있습니다.

1. 'Array.length - 1'으로 배열의 마지막 요소 접근

일반적으로 배열의 요소에 접근할 때는 아래와 같이 Index로 접근합니다. Index는 0부터 시작하며, 아래 예제에서 배열의 마지막 요소에 접근하려면 arr[3]처럼 접근할 수 있습니다.

const arr = ['apple', 'kiwi', 'grape', 'mango'];

console.log(arr[0]); // apple
console.log(arr[1]); // kiwi
console.log(arr[2]); // grape
console.log(arr[3]); // mango

하지만 배열을 정의할 때마다 길이는 달라질 수 있기 때문에 고정된 정수로 마지막 요소에 접근하면 안됩니다. 아래와 같이 배열의 길이(length)에서 1을 뺀 값이 항상 배열 마지막 요소의 Index가 되기 때문에 이렇게 마지막 요소를 가져오면 됩니다.

const arr = ['apple', 'kiwi', 'grape', 'mango'];

let last = arr[arr.length - 1];
console.log(last);

Output:

mango

2. 'Array.slice(-1)[0]'으로 배열의 마지막 요소 접근

slice()는 배열의 특정 구간을 자를 때 사용하는 함수입니다. slice(-1)은 배열의 마지막 Index에서, 배열의 마지막까지 범위에 해당하는 요소들을 잘라서 배열로 리턴합니다.

const arr = ['apple', 'kiwi', 'grape', 'mango'];
console.log(arr.slice(-1));

위 코드 실행 결과를 보면 배열에 마지막 요소만 포함되었습니다.

[ 'mango' ]

slice(-1)는 마지막 요소만 있는 배열을 리턴하기 때문에, 배열에서 요소만 가져오려면 아래와 같이 slice(-1)[0]으로 가져오면 됩니다.

const arr = ['apple', 'kiwi', 'grape', 'mango'];

let last = arr.slice(-1)[0];
console.log(last);

Output:

mango

slice에 대한 자세한 내용은 JavaScript - substring()과 slice()의 차이점 또는 JavaScript - 문자열 자르기 (split, substr, substring, slice) 문서를 참고해주세요.

3. Array.at()으로 배열의 마지막 요소 접근

Array.at()이라는 새로운 함수가 있는데, at(-1)은 마지막에서 첫번째 요소에 접근하고, at(-2)는 마지막에서 두번째 요소에 접근합니다. 신규 함수이기 때문에 호환성 문제가 생길 수 있습니다. 지원하는 브라우저는 Chrome 92, FireFox 90 이상 버전에서 지원합니다. 지원하는 자세한 브라우저 정보는 developer.mozilla.org - Array.at()에서 확인하시면 됩니다.

const colors = ['red', 'green', 'blue'];

const atWay = colors.at(-1);
console.log(atWay); // 'blue'

const atWay = colors.at(-2);
console.log(atWay); // 'green'

4. Array.pop()으로 배열의 마지막 요소 가져오기

Array.pop()은 배열에서 마지막 요소를 삭제하고, 그 값을 리턴합니다. 위의 방법들은 배열에서 마지막 요소를 삭제하지 않고, 단순히 접근하여 요소 값을 가져왔는데요. pop()은 배열에서 삭제된다는 차이점이 있습니다.

const arr = ['apple', 'kiwi', 'grape', 'mango'];

let last = arr.pop();
console.log(last);
console.log(arr);

Output:

mango
[ 'apple', 'kiwi', 'grape' ]