unshift 메서드
원본 배열 앞단에 요소를 추가하고 원본 배열의 변화된 길이를 반환하는 함수. 원본 배열을 직접 변화시킨다.
const arr = [1,1,1,1]
let result = arr.unshift(1,2)
console.log(result)
// 6
console.log(arr)
// [ 1, 2, 1, 1, 1, 1 ]자 이제 unshift 동작 원리를 생각해보며 메서드 사용하지 않고 같은 동작을 구현해봅시답.
1. 원본 배열을 변화시키지 않고 새로운 배열을 반환하는 함수 만들어 보기
함수의 argument 변수를 활용해서 arguments 값 뒤에 원본 배열의 요소를 더해 주고 argument 배열을 새로 반환 시켰더니 오히려 쉽게 구현됐다.
const arr = [1,1,1,1]
function unshift(arr,...args){
for(let i = 0; i < arr.length; i++){
args[args.length] = arr[i]
}
arr = args
return arr
}
const newArr = unshift(arr,1,2)
console.log(arr)
// [ 1, 1, 1, 1 ]
console.log(newArr)
// [ 1, 2, 1, 1, 1, 1 ]2. 원본 배열을 변화시키고 길이 값 반환하는 함수 만들어보기
기존 unshift 메서드와 똑같이 동작하도록 만들어보았는데 꽤나 애를 먹었다. for 문에서 이터레이션이 무한으로 돌아서 한참 고민했다 도대체 뭐가 문제였는지...
- 처음에 썼던 반복문:
여기서 i 값이 뭐가 잘못 된건지 이해가 안돼서 한참...한참 고민하다가 생각해보니 arr.length 만큼 돌고 있으면서 arr.length를 늘려주고 있으니 끝이 없이 계속 돌게 되는것이였다.
function unshift(arr,...args){
const from = args.length
// 여기서 10001번씩 돌면서 무한루프 돌기 시작...
for(let i = 0; i < arr.length; i++){
arr[from + i] = arr[i]
}
return arr.length
}
unshift(arr,1,2)
console.log(arr)
// RangeError: Potential infinite loop: exceeded 10001 iterations.
- 두번째로 썼던 함수:
여기서 이제 정상 작동 하길래 완성한줄 알았으나 아니였다.
만약 원본 arr의 길이가 args의 길이보다 짧을 때는 undefined 값을 넣어주고 있는거였다.
const arr = [1,2]
function unshift(arr, ...args) {
arr.length = arr.length + args.length;
// args의 길이만큼 돌고있다
for(let i = 0; i < args.length; i++){
arr[args.length + i] = arr[i];
arr[i] = args[i]
}
return arr.length;
}
unshift(arr, 0,0,0,0);
// 8
console.log(arr);
// [ 0, 0, 0, 0, 1, 2, undefined, undefined ]- 마지막으로 쓴 함수:
arr.length 가 가변으로 계속 변하지 않도록 미리 for문 밖에서 저장해두고 그 값 안에서만 돌도록 변경해줬다. 바보같은 실수 데헷!
const arr = [1,2]
function unshift(arr, ...args) {
const arrLength = arr.length
// 첫번째 반복문에서는 arr의 모든 요소들의 위치에 args 길이를 더해주고
for(let i = 0; i < arrLength; i++){
arr[args.length + i] = arr[i]
}
// 두번째 반복문에서는 args 요소들만큼 남겨둔 자리에 요소들을 할당해주었다.
for(let i = 0; i < args.length; i++){
arr[i] = args[i]
}
return arr.length;
}
unshift(arr, 0,0,0,0);
// 6
console.log(arr);
// [ 0, 0, 0, 0, 1, 2 ]