Array.prototype.at()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2022년 3월⁩.

Array 인스턴스의at() 메서드는 정숫값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용할 수 있습니다. 음의 정수는 배열의 마지막 항목부터 거슬러 셉니다.

시도해 보기

const array1 = [5, 12, 8, 130, 44];let index = 2;console.log(`An index of ${index} returns ${array1.at(index)}`);// Expected output: "An index of 2 returns 8"index = -2;console.log(`An index of ${index} returns ${array1.at(index)}`);// Expected output: "An index of -2 returns 130"

구문

at(index)

매개변수

index: 반환할 배열 요소의 0부터 시작하는 인덱스로,정수로 변환됩니다. 음수 인덱스는 배열 끝부터 거슬러 셉니다.index < 0인 경우,index + array.length로 접근합니다.

반환 값

주어진 인덱스와 일치하는 배열의 요소입니다.index < -array.length 또는index >= array.length인 경우, 해당 속성에 접근하지 않고 항상undefined를 반환합니다.

인덱스가 음수가 아니라면,at() 메서드는 대괄호 표기법과 동일합니다. 예를 들어,array[0]과array.at(0)은 모두 배열의 첫 번째 항목을 반환합니다. 그러나 배열의 끝에서부터 요소를 계산할 땐 Python이나 R처럼array[-1]을 사용할 수 없습니다. 대괄호 안의 모든 값은 문자 그대로 문자열 속성으로 처리되므로array["-1"]을 읽게 됩니다. 이는 배열 인덱스가 아닌 일반 문자열 속성입니다.

일반적인 방법은length에 접근하고, 그로부터 인덱스를 계산하는 것입니다(예:array[array.length - 1]).at() 메서드는 상대 인덱싱을 허용하므로 이를array.at(-1)로 단축할 수 있습니다.

at()와with()를 결합하면 음수 인덱스를 사용하여 각각 배열을 읽고 쓸 수 있습니다.

at() 메서드는범용적입니다.this 값에는length 속성과 정수 키 속성만 있을 것으로 예상합니다.

예제

배열의 끝 값 반환

아래 예제는 주어진 배열에서 맨 마지막에 위치한 값을 반환하는 함수를 정의합니다.

// 몇 가지 요소가 있는 배열const cart = ["사과", "바나나", "배"];// 주어진 배열의 마지막 요소를 반환하는 함수function returnLast(arr) {  return arr.at(-1);}// 'cart' 배열에서 마지막 요소를 가져옴const item1 = returnLast(cart);console.log(item1); // '배'// 'cart'배열에 요소를 추가cart.push("오렌지");const item2 = returnLast(cart);console.log(item2); // '오렌지'

메서드 비교

아래 예제에서는Array의 뒤에서 두 번째 요소를 가져오는 서로 다른 방법을 비교합니다. 모든 방법이 유효하긴 하지만at() 메서드의 간결성과 가독성을 확인할 수 있습니다.

// 몇 가지 요소가 있는 배열const colors = ["빨강", "초록", "파랑"];// length 속성 사용const lengthWay = colors[colors.length - 2];console.log(lengthWay); // '초록'// slice() 메서드 사용. 배열을 반환하는 것에 유의const sliceWay = colors.slice(-2, -1);console.log(sliceWay[0]); // '초록'// at() 메서드 사용const atWay = colors.at(-2);console.log(atWay); // '초록'

배열이 아닌 객체에서 at() 호출

at() 메서드는this의length 속성을 읽고 접근할 인덱스를 계산합니다.

const arrayLike = {  length: 2,  0: "a",  1: "b",  2: "c", // length가 2이므로 at()은 이 값을 무시합니다.};console.log(Array.prototype.at.call(arrayLike, 0)); // "a"console.log(Array.prototype.at.call(arrayLike, 2)); // undefined