배열 마지막 요소(값) 깔끔하게 추출 하는 방법

Array.at()
우리의 멋진 바닐라 자바스크립트에서 지원하는 기본 함수 입니다. 해당 함수를 이용하여,  배열의 요소를 직관적으로 추출할 수 있습니다.

* 구문 

Array.at(Array Index)

 

아래 코드는 배열의 첫번째 요소를 추출 하는 함수입니다.  매개변수를 입력 하지 않는 경우 배열의 첫번째 요소를 가져옵니다.

["JavaScript","Spring","NodeJS"].at()
>> 'JavaScript'

//물론 아래 방식도 가능합니다.
["JavaScript","Spring","NodeJS"].at(0)
>> 'JavaScript'

제가 해당 함수를 보고 감탄 했던 이유는 아래처럼 배열의 마지막 요소를 깔끔하게 가져올 수 있어서 입니다.

const languages = ["JavaScript","Spring","NodeJS"];
const length = languages.length;

// 과거에 많이 쓰던 형태
languages[length-1]
>> 'NodeJS'

// at을 활용한 형태
["JavaScript","Spring","NodeJS"].at(-1)
>> 'NodeJS'

과거에는 length를 이용하여 계산을 하였습니다. 코드가 길어지고, length 변수의 명칭은 무엇으로 할지 항상 고민이었죠.

하지만 이젠 그럴 고민을 할 필요가 없습니다.

Array.at(-1)을 입력하면 항상 마지막 값을 가져오게 되니깐요. -1 기억 합시다.


아래는 본문 내용과 상관 없는 혹시 궁금 하신분이 있을까봐 적습니다.

-1이 마지막 값이라 하였는데 그럼 -2는 무엇일까? 라는 의문이 드신 분들이 있을 겁니다.
아래 코드 먼저 보시죠.

const languages = ["JavaScript","Spring","NodeJS"];

languages.at(-1)
> 'NodeJS'

languages.at(-2)
> 'Spring'

languages.at(-3)
> 'JavaScript'

네 코드를 보시면 이해 하셨겠지만, 배열의 마지막 요소(-1) 를  기준으로 '1' 씩 감소되며 배열을 역으로 탐색 합니다.

그럼 뒤에서 2번째 요소를 가져오는 방법은 at(-2)를 입력하면 되겠죠?

 

다양하게 활용 할 수 있으며, 깔끔하게 코드를 구현하게 할 수 있는 Array.at 꼭 기억 하시기 바랍니다.

 

우리의 멋진 브라우저 Internet Explorer 는 해당 기능을 지원 하지 않습니다.

* 멋진 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at