[JS] 배열 순서 바꾸기 (맞교환)

splice() 메서드에 대해서

// Array.splice(시작위치, 삭제할 아이템 개수, 추가할 아이템)

const array = [1, 2, 3];

array.splice(0, 1);
// [1]

array.splice(0, 0, 5);
// []

console.log(array);
// [5, 2, 3]

1. splice() 메서드의 두 번째 인자는 삭제할 개수입니다. (1은 fromIndex 위치의 value 값)
2. 두 번째 인자의 값이 0일 시, value 값이 제거되지 않습니다.
3. 세 번째 인자 값에는 배열에 추가할 요소입니다. (없을 시 제거만 진행)

 

Array.splice() 메서드는 원본배열에 직접적인 관여를 합니다. (참조)

 

위치 이동하기

function moveValue(array, fromIndex, toIndex) {
  const item = array.splice(fromIndex, 1)[0];
  array.splice(toIndex, 0, item);
}

fromIndex의 위치의 값을 제거해 주고, toIndex위치에 새로운 값을 추가해 주는 방식입니다.

 

const array = [0, '!', 2, 3, 4];

moveValue(array, 1, 3);

console.log(array);
// [0, 2, 3, '!', 4]

 

맞교환 (서로 이동)

function switchValues(arr, index1, index2) {
  [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
}

배열에서 index1, index2 값을 추출하고 구조 분해 할당 구문을 사용하여 두 인덱스의 값을 역순으로 새 배열에 할당해 줍니다.

 

function switchValues(arr, index1, index2) {
  const tmp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = tmp;
}

동일한 기능을 하는 코드이지만, 구조 분해 할당 구문을 사용하지 않고 구현한 코드입니다.

 

const array = [0, '!', 2, 3, '?'];

switchValues(array, 1, 4);

console.log(array);
// [0, '?', 2, 3, '!']

 

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN