알찬정보 툰코 개발 트렌드 이슈 코딩

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' ]