Array[인덱스] 사용 중지, 대신 Array.at() 사용

Array.at()는 배열의 요소에 액세스하는 표준Array[index] 방법과 관련된 많은 일반적인 문제를 해결하는 완전히 새로운 Javascript 배열 방법입니다. 이를 통해 마침내 Javascript에서 기본적으로 네거티브 인덱싱을 수행할 수 있습니다.

네거티브 인덱싱

음수 인덱싱은 시작이 아닌 끝에서 배열의 요소에 액세스하기 위해 음수를 인덱스로 사용하는 기능입니다. 예를 들어 arr 라는 배열의 마지막 요소를 원하면 arr[-1] 를 원할 것입니다. 슬프게도 [] 구문은 배열과 문자열에 속하지 않고 모든 개체에 속하기 때문에 Javascript에서 원하는 방식으로 동작하지 않습니다.

객체가 포함된 [] 구문은 해당 키를 사용하여 객체의 속성을 가져오는 것을 의미합니다. 배열과 문자열은 객체이므로 이것도 적용됩니다. 후드 아래에서 배열과 문자열은 각 요소를 현재 인덱스와 일치하는 키에 할당합니다.

// When it comes to indexing, 'arr' behaves exactly like 'obj'
const arr = ['cat', 'dog', 'fish', 'bird'];

const obj = {
   0: 'cat',
   1: 'dog',
   2: 'fish',
   3: 'bird'
};

따라서 arr[-1]는 이미 유효한 Javascript이지만 마지막 요소를 반환하는 대신 배열의 "-1"키 값을 반환하려고 합니다. 일반적으로 undefined 입니다.

기존 해결 방법

현재 이 동작이 올바르게 작동하도록 하는 몇 가지 방법이 있습니다. 첫 번째는 배열의 길이에서 음수 인덱스를 빼는 것입니다.

const pets = ['cat', 'dog', 'fish', 'bird'];
const lastPet = pets[pets.length - 1];

console.log(lastPet); // Prints out 'bird'

이것은 작동하며 대부분의 개발자가 이 제한을 해결하는 방법이지만 몇 가지 문제가 있습니다.

배열의 이름이 두 번 호출되며 일반적으로 꽤 깁니다.

변수에 할당되지 않은 값에는 사용할 수 없습니다.

먼저 임시 변수에 저장하지 않는 한 함수 반환 값의 마지막 항목을 가져오는 데 사용할 수 없습니다.

['cat', 'dog', 'fish', 'bird'][ **what do you put here** - 1];

const a = () => ['cat', 'dog', 'fish', 'bird']; 
a()[ **What do you out here** - 1];

다른 방법은 음수 인덱싱이 내장된 Array.slice()를 사용하는 것입니다.

const pets = ['cat', 'dog', 'fish', 'bird'];
const lastPet = pets.slice(-1)[0];

console.log(lastPet); // Prints out 'bird'

이것은 실제로 이전 방법의 많은 문제를 해결하지만 몇 가지 새로운 문제를 소개합니다.

슬라이스가 배열을 반환하므로 구문, 특히 후행[0]을 즉시 이해할 수 없습니다.

임시 배열은 원하는 인덱스부터 배열 끝까지 생성되며 즉시 삭제됩니다.

배열.at()

이것이 Array.at()가 구현된 이유입니다. 양수와 정확히 작동하지만Array[index] 음수에 대해 음수 인덱싱을 올바르게 구현합니다.

const pets = ['cat', 'dog', 'fish', 'bird'];
const lastPet = pets.at(-1);

console.log(lastPet); // Prints out 'bird'

이는 이전 방법보다 더 깔끔한 구문을 제공하며 성능 저하를 겪지 않습니다. 현재 필요한 경우 Polyfill을 사용할 수 있는 대부분의 최신 브라우저에서 사용할 수 있습니다.

자세한 내용은 MDN 참조를 확인하십시오. original proposal을 읽을 수도 있습니다.