JavaScript 배열 요소에 접근하는 at() 메소드

at() 메서드는 ES2021(ES12라고도 함)에 도입된 비교적 새로운 JavaScript 추가 기능이다. String 및 Array 클래스의 인스턴스에서 사용할 수 있는 메서드이며 간결하고 읽기 쉬운 방식으로 지정된 인덱스에서 요소를 검색할 수 있다.

at() 메서드를 사용하기 위한 기본 구문은 아래와 같다.

// For a string:
string.at(index);

// For an array:
array.at(index);

두 경우 모두 index는 검색하려는 요소의 인덱스이다.

at() 메서드의 주요 이점 중 하나는 대괄호 표기법([])을 사용하는 것보다 문자열이나 배열에서 요소를 검색하는 더 간결하고 읽기 쉬운 방법을 제공한다는 것이다. 예를 들어 인덱싱을 사용하여 배열의 세 번째 요소를 검색하는 방법은 다음과 같다.

const myArray = ['foo', 'bar', 'baz'];
const thirdElement = myArray[2];

그리고 at() 메서드를 사용하여 동일한 작업을 수행하는 방법은 다음과 같다.

const myArray = ['foo', 'bar', 'baz'];
const thirdElement = myArray.at(2);

at() 메서드는 문자열이나 배열의 끝에서 세는 것으로 처리되는 음수 인덱스도 처리한다. 예를 들면 아래와 같다.

const myArray = ['foo', 'bar', 'baz'];
const lastElement = myArray.at(-1); // 'baz'

마찬가지로 음수 인덱스를 사용하여 문자열 끝에서 문자를 검색할 수 있다.

const myString = 'hello world';
const lastChar = myString.at(-1); // 'd'

at() 메서드에 제공된 인덱스가 배열 범위를 벗어나면 메서드는 undefined를 반환다. 예를 들어

const fruits = ['apple', 'banana', 'orange', 'pear'];

console.log(fruits.at(4)); // undefined

위 예에서 배열에는 인덱스가 0에서 3인 4개의 요소가 있다. at() 메서드를 사용하여 배열의 범위를 벗어난 인덱스 4의 요소에 액세스하려고 하면 이 메서드는 undefined를 반환한다.

일부 구형 브라우저에서는 at() 메서드가 지원되지 않으므로 폴리필을 사용하거나 이러한 경우 대괄호 표기법으로 대체해야 할 수 있다.