Javascript - 배열의 요소를 다룰 때 index 대신 at()을 사용해보자

일반적으로 Javascript의 배열의 요소에 접근하는 경우 index를 사용합니다. 예를 들면 array.length를 사용해서 말이죠. 하지만 at()라는 함수를 사용하면 조금 더 멋진 방법으로 배열(Array)의 요소를 다룰 수 있습니다. 이번에는 at()을 이용해 index 없이 배열을 사용하는 방법에 대해 알아보겠습니다.

index를 이용한 배열 요소 접근 방법

배열의 요소에 접근하는 방법으로 주로 사용되는 방법은 바로 index를 사용하는 방법입니다. index는 위치를 기준으로 정의된 값입니다. 배열에서의 index는 배열 시작으로부터 몇 번째에 위치하느냐를 가리키는 위치 값입니다. 그렇기 때문에 배열의 첫 번째 요소를 가리키는 경우 index의 값으로 0을 사용합니다.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers[0]); // output: 1
console.log(numbers[1]); // output: 2

 위의 예제 코드는 위치 값(index)을 사용해 배열의 첫 번째 요소와 두 번째 요소에 접근하는 방법입니다. 그렇다면 맨 마지막 요소에 접근할 수 있는 방법은 무엇이 있을까요?

console.log(numbers[-1]); // output: undefined

 index는 위치 값이라고 말했으니 뒤에서 1번에 위치한 -1이라는 값을 추측할 수 도 있지만, 아쉽게도 -1을 사용하면 배열의 마지막 요소를 반환하지 않고 undefined를 반환합니다.

 

 

 

index를 이용한 배열의 마지막 요소 접근하기

console.log(numbers[numbers.length - 1]); // output: 5

앞서 설명한 것처럼 -1과 같은 위치 값(index)을 사용해서 배열의 마지막 요소를 접근할 수 없습니다. 그러한 이유로 배열의 마지막 요소를 접근하는 방법으로 예제와 같이 주로 Array.length가 사용됩니다. Array.length는 배열의 크기를 나타내기 때문에 -1을 하면 손쉽게 배열의 마지막 요소 위치 값(index)을 만들어 낼 수 있기 때문입니다.

at()을 이용한 배열의 마지막 요소 접근하기

일반적으로 배열의 요소에 접근하는 방법으로는 대괄호([ ])에 위치 값(index)을 사용합니다. Javascript에서는 배열을 다루는 방법으로 대괄호([ ])를 사용하는 방법과 더불어 at()이라는 함수를 제공합니다. 그리고 at()은 Array.length를 사용하지 않고 배열의 마지막 요소를 접근할 수 있게 해 줍니다.

console.log(numbers.at(-1)); // output: 5

 at()을 사용하면 앞서 시도해서 성공하지 못한 음수로 정의된 위치 값(index)도 사용할 수 있습니다. 여기서 더 중요한 점은 at()은 대괄호([ ])를 사용하는 방식을 대체할 수 있다는 것입니다.

console.log(numbers.at(0)); // output: 1
console.log(numbers.at(1)); // output: 2

 index를 사용해 첫 번째 요소와 두 번째 요소를 가져오는 예제 코드를 at()으로 대체해도 아무런 문제 없이 이전과 같은 결과를 보여줍니다.

끝맺음

일반적으로 사용하는 방법인 대괄호([ ])를 이용해서 배열을 다루어도 좋지만, Javascript에서는 보다 멋진 방법으로 배열을 다룰 수 있는 at()라는 함수도 제공하고 있습니다. at()은 대괄호([ ])의 상위 호환 기능으로 기존의 구문을 대체할 수도 있고 보다 이해하기 쉬운 코드를 작성할 수 있게 합니다. 이제는 배열의 접근하는 방법으로 at()라는 기능도 있다는 걸 알았으니 한번 사용해보면 어떨까요?