Array.prototype.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

명세서

브라우저 호환성

같이 보기

• core-js의 Array.prototype.at 폴리필
• 인텍스 된 컬렉션
• Array
• Array.prototype.findIndex()
• Array.prototype.indexOf()
• TypedArray.prototype.at()
• String.prototype.at()