웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트 배열이 여러 개의 값을 가지고 있을 때 만약 배열 값의 순서를 바꾸려면 어떻게 하는지 알아봅니다.
# 자바스크립트 배열의 값 순서 바꾸기
자바스크립트의 배열은 순서대로 정렬되어 저장됩니다. 즉 원하는 순서대로 배열 값을 위치시키는 것이 가능하다는 뜻입니다. 만약 기존의 배열 순서를 다른 순서로 변경해야 한다면 어떻게 할까요? 몇 가지 방법들이 있는데요... 루프를 사용하여 모든 값들을 다시 순서대로 추가하는 방법도 있고 아니면 이동할 값만 잘라내서 원하는 위치에 추가하는 방법도 있습니다.
여기서는 두 번째 방법인 배열의 값 중 이동해야 할 값만 다른 원하는 곳으로 옮기는 방법을 알아보려고 합니다. 이를 구현하기 위해서 배열에 사용하는 내장 함수가 필요한데 바로 splice() 함수입니다.
Array.splice(startIndex, deleteCount, ...item)
라이브러리를 사용할 수도 있지만 자바스크립트 배열에 사용되는 내장 함수는 굉장히 많으므로 이 중 하나를 사용할 수도 있습니다. 이번에 사용 할 splice() 함수 역시 매우 자주 사용되는 함수입니다.
! 배열의 splice() 함수는?
이 함수는 원하는 위치의 값을 추출합니다. 값을 빼오면서 새로운 변수에 저장할 수 있는데 기존에 저장되어 있던 변수의 값 역시 해당 값이 빠진 상태로 업데이트되는 특징이 있습니다.
이제 예제코드를 만들어보려고 합니다. 순서를 변경하는 함수 changeArrayOrder()를 만들고 이 함수는 아래의 순서대로 수행하게 됩니다.
1. 함수는 세 가지 인자를 받음(배열값, 옮길 대상의 index, 이동할 값)
; 여기서 이동할 값은 +2, +1, -1, -2와 같이 앞, 뒤 방향으로 이동할 수 있음
2. 전달 받은 배열을 새로운 변수에 임시 저장
3. 임시 저장한 변수에서 splice()를 사용하여 새로운 변수에 추출 및 저장
4. 3에서 저장한 값을 이동하게 될 index 위치에 삽입, splice()를 사용
위 과정대로 작성된 함수 changeArrayOrder()는 아래와 같습니다.
@ changeArrayOrder.js
const changeArrayOrder = function(list, targetIdx, moveValue) {
// 배열값이 없는 경우 나가기
if (list.length < 0) return;
// 이동할 index 값을 변수에 선언
const newPosition = targetIdx + moveValue;
// 이동할 값이 0보다 작거나 최대값을 벗어나는 경우 종료
if (newPosition < 0 || newPosition >= list.length) return;
// 임의의 변수를 하나 만들고 배열 값 저장
const tempList = JSON.parse(JSON.stringify(list));
// 옮길 대상을 target 변수에 저장하기
const target = tempList.splice(targetIdx, 1)[0];
// 새로운 위치에 옮길 대상을 추가하기
tempList.splice(newPosition, 0, target);
return tempList;
};
// 배열값이 없는 경우 나가기
if (list.length < 0) return;
// 이동할 index 값을 변수에 선언
const newPosition = targetIdx + moveValue;
// 이동할 값이 0보다 작거나 최대값을 벗어나는 경우 종료
if (newPosition < 0 || newPosition >= list.length) return;
// 임의의 변수를 하나 만들고 배열 값 저장
const tempList = JSON.parse(JSON.stringify(list));
// 옮길 대상을 target 변수에 저장하기
const target = tempList.splice(targetIdx, 1)[0];
// 새로운 위치에 옮길 대상을 추가하기
tempList.splice(newPosition, 0, target);
return tempList;
};
드디어 코드가 완성되었습니다. 잘 동작하는지 테스트 해볼까요? 임의의 배열 myList를 선언하고 여러가지 테스트 케이스를 만들어보았스니다.
myList = [1, 2, 3, 4, 5];
// 2의 값을 뒤로 세 칸 이동
changeArrayOrder(test, 1, 3);
// 마지막 5를 앞으로 두 칸 이동
changeArrayOrder(test, 1, -2);
// 맨 앞의 1을 뒤로 한 칸 이동
changeArrayOrder(test, 0, 1);
// 2의 값을 뒤로 세 칸 이동
changeArrayOrder(test, 1, 3);
// 마지막 5를 앞으로 두 칸 이동
changeArrayOrder(test, 1, -2);
// 맨 앞의 1을 뒤로 한 칸 이동
changeArrayOrder(test, 0, 1);
각각 출력된 결과는 아래와 같습니다.
[1, 3, 4, 5, 2]
[1, 2, 5, 3, 4]
[2, 1, 3, 4, 5]
[1, 2, 5, 3, 4]
[2, 1, 3, 4, 5]
확인해보니 예상대로 잘 동작하는 것을 확인할 수 있습니다. 위와 같이 원하는 곳으로 쉽게 이동할 수 있는 함수를 만들어 보았습니다.
! 마치면서
위 예제는 단순하게 숫자 타입 값을 가지는 배열을 사용하였지만 실제 앱을 개발하는 경우 컬렉션 데이터를 사용하는 경우가 많습니다. 컬렉션 데이터의 순서를 변경하는 경우가 많을 수 있는데 위의 함수 역시 활용하여 적용할 수 있겠습니다. 여기까지 배열이 가진 값의 순서를 변경하는 방법에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
