Array.prototype.at()

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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