문제 상황
오픈 API를 통해 받아온 데이터, 본인이 직접 설정한 데이터 등에서 배열은 흔히 찾아 볼 수 있다. 그런데, 특정 상황에서 배열의 끝 원소만 빼서 사용하고 싶을 때가 있을 것이다.
예를 들어, 축구 오픈 API에서 어떤 리그의 시즌 정보가 들어가 있는 배열 중 가장 최신 시즌만 뽑아서 쓰고 싶은 경우가 있겠다.
어떻게 해야 좀 더 쉽게 원소를 뽑아낼 수 있을까?
방법 1. 배열 길이 활용하기
const exArr = [{1시즌 정보}, {2시즌 정보}, ..., {현재 시즌 정보}];
const latestSeason = exArr[exArr.length - 1]; // 현재 시즌 정보(배열의 길이 - 1)은 가장 마지막 원소를 가르키기 때문에, 이런 방식을 사용할 수 있겠다.
방법 2. slice() 메서드 활용하기
const exArr = [{1시즌 정보}, {2시즌 정보}, ..., {현재 시즌 정보}];
const latestSeason = exArr.slice(-1)[0]; // 현재 시즌 정보slice() 메서드는 원본 배열을 건드리지않는다.
따라서, 원본은 유지하면서 사용할 때 유용하다.
그런데 왜 slice(-1)을 하고 [0]을 쓰는 걸까? [0]을 안써도 되지않을까?
const latestSeason = exArr.slice(-1); // [현재 시즌 정보]
const latestSeason = exArr.slice(-1)[0]; // 현재 시즌 정보slice()를 사용하면 배열 형태로 나오기 때문에, 인덱스를 명시하지 않으면 배열 그 자체가 나와버린다.
따라서, 배열의 "원소"를 사용하고자 한다면, slice() 후에 인덱스 번호를 꼭 명시해주자.
방법 3. at() 메서드 활용하기
const [state, setState] = useState();
axios.get("https://example.com")
.then((response) => setState(response.data)
.catch((err) => console.log(err));
// axios 통신으로 받아온 데이터가 다음과 같다고 해보자.
// [{1시즌 정보}, {2시즌 정보}, ..., {현재 시즌 정보}]
// 현재 시즌 정보를 뽑아내려면 인덱스는 -1 을 사용하면 된다!
return (
<p>{state.at(-1)}</p>
);어쩌다보니 순수 js가 아니라 리액트 예시를 작성해버렸다...
중요한 것은 at() 메서드이다.
at() 메서드는 꼭 배열 마지막 원소가 아니라 인덱스 위치를 지정해서 원소를 뽑아낼 수 있다.
인덱스 번호
배열의 인덱스는 앞에서부터 측정하면 다음과 같다.
[0, 1, 2, 3, 4, 5, 6, 7]반대로 측정할 때는 어떻게 될까?
[-8, -7, -6, -5, -4, -3, -2, -1]그럼 -1을 인덱스로 주면 되겠네?!
안된다. 아쉽게도, 이건 js에서는 안 먹힌다.
const exArr = [{1시즌 정보}, {2시즌 정보}, ..., {8시즌 정보}];
const latestSeason = exArr[7]; // 8시즌 정보
const latestSeason = exArr[-1]; // undefined따라서, 역방향 인덱스를 사용하고 싶다면 메서드 사용법을 알아보고 사용하자.
다른 방법은....?
물론, 다른 방법도 많다.(참고 자료에 링크를 걸어두겠다)
필자는 원본에 변화를 주지 않는 방법을 찾다보니 위 방법들을 알게 된 것이다.
음, 예를 들어 pop() 메서드는 원본 배열에 변화가 생기므로, 주의해서 사용해야한다.
참고 자료
