[javascript] 배열 요소에 접근하는 새로운 자바스크립트 메서드 Array.at()

자바스크립트에서 배열 요소의 값을 얻는 방법은 기본적으로 Array[index] 입니다.

다른 언어에서도 배열 요소에 접근하는 방법은 Array[index] 로 대동소이 합니다.

배열의 첫 번째 요소는 Array[0]으로 접근하고, 배열의 마지막 요소는 Array[Array.length-1]로 접근할 수 있습니다.

배열 요소에 접근하기 위해 사용할 수 있는 인덱스는 0 ~ Array.length-1 까지입니다.

이외의 배열 요소 접근 인덱스는 undefined를 반환합니다.

Array[-1] 과 같은 접근 방식은 사용할 수 없습니다.

Array.at()을 이용한 배열 요소 접근

Array.at(index) 메서드를 사용해 배열 요소에 접근하면 사용할 수 있는 인덱스의 제약이 다소 개선됩니다.

물론 메서드를 이용한 객체지향적인 접근이 가능해진 점이 가장 중요합니다.

Array[index] 에서는 사용이 불가능했던 Array[-1] 과 같은 방식의 접근이 가능해집니다.

Array.at(-1) 은 배열의 마지막 요소가 됩니다.

무한정 마이너스 인덱스를 사용 가능한 것은 아니고 배열 길이 까지만 마이너스 값을 허용합니다.

예제 코드를 이용해 알아보겠습니다.

const arr = ['라이언','어피치','단무지','콘',];
console.log(arr[0]);        // '라이언'
console.log(arr[-1]);       // undefined
console.log(arr.at(3));     // '콘'
console.log(arr.at(-1));    // '콘'
console.log(arr.at(-4));    // '라이언'
console.log(arr.at(-6));    // undefined
console.log(arr.at(4));     // undefined

브라우저 호환성

배열에 대한 접근 방식을 개선해주는 훌륭한 배열 객체 메서드지만 최신 자바스크립트 규격이기 때문에 업데이트가 늦거나 구형 웹브라우저에서는 지원되지 않는 단점이 있습니다.

현재 Array.at() 메서드는 크롬92 버전부터 지원되며, 파이어폭스90, 신형 엣지 브라우저 92 버전부터 지원됩니다.

인터넷 익스플로러, 사파리, 오페라 웹 브라우저는 지원되지 않습니다.

사파리의 경우 시간이 지나면 업데이트가 되면서 지원이 될 가능성이 높지만, 구버전 웹브라우저인 인터넷 익스플로러와 오페라는 더 이상 지원될 가능성이 없습니다.