Array.prototype.at()

① MDN 스타일 요약 at() 메서드는 정수 값을 인수로 받아 해당 인덱스에 있는 항목을 반환합니다. 가장 큰 장점은 음수 인덱스를 사용할 수 있다는 것입니다. 음수를 넣으면 배열의 끝에서부터 거꾸로 요소를 찾습니다. 기존의 array[array.length - 1] 같은 번거로운 문법을 대체하기 위해 등장했습니다.

---

② React 실무 예시 React에서 **브레드크럼(Breadcrumbs)**의 현재 위치를 표시하거나, 사용자가 입력한 리스트의 마지막 항목을 강조해야 할 때 매우 유용합니다.

import React, { useState } from 'react';

const RecentLog = () => {
  const [logs, setLogs] = useState([
    "시스템 시작",
    "데이터 로드 완료",
    "사용자 로그인",
    "설정 변경"
  ]);

  // 기존 방식: logs[logs.length - 1] -> 길고 복잡함
  // 최신 방식: logs.at(-1) -> "마지막 요소"라는 의미가 명확함
  const lastLog = logs.at(-1);

  return (
    <div className="p-4 border rounded-lg shadow-sm bg-white">
      <h4 className="font-bold text-gray-700 mb-2">최근 활동 내역</h4>
      <ul className="text-sm text-gray-500 mb-4">
        {logs.map((log, i) => <li key={i}>• {log}</li>)}
      </ul>
      
      <div className="p-3 bg-blue-50 border-l-4 border-blue-500">
        <span className="text-xs font-bold text-blue-600 uppercase">현재 상태</span>
        <p className="text-blue-900 font-medium">{lastLog}</p>
      </div>

      <button 
        onClick={() => setLogs([...logs, "새로운 이벤트 발생"])}
        className="mt-3 px-3 py-1 bg-gray-800 text-white text-xs rounded"
      >
        로그 추가
      </button>
    </div>
  );
};

export default RecentLog;

 

실무 활용 포인트:

• 마지막 데이터 접근: at(-1)은 마지막 요소, at(-2)는 끝에서 두 번째 요소를 가져옵니다.
• 가독성 향상: 대괄호 [] 안에서 길게 계산식을 쓰는 것보다 코드가 훨씬 깔끔해집니다.
• 문자열에도 사용 가능: 배열뿐만 아니라 "Hello".at(-1) 처럼 문자열의 마지막 글자를 가져올 때도 똑같이 쓸 수 있습니다.