.png)
배열 메서드 중 원본 배열을 직접 변경하는 메서드에 대해 정리한다
원본 배열을 직접 변경하는 메서드❗
Array.prototype.pop
- 배열의 제일 끝의 요소 한 개씩 제거한다(여러 줄 사용할 수 도있다)
- 원본 배열에서 마지막 요소를 제거하고 제가한 요소를 반환한다(예시2)
- 원본 배열을 직접 변경한다(예시1)
- delete 연산자 대신 배열의 요소를 삭제하는 메서드로 자주 사용된다
- 예시1-
let lala = [19, 44, 'good', false]
lala.pop()
console.log(lala); // [19, 44, 'good']
lala.pop()
console.log(lala); // [19, 44]
lala.pop()
console.log(lala); // [19]
-예시2-
let haha = [1, 2]
let result = haha.pop() // 2
Array.prototype.push
- push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고, 변경된 length 프로퍼티 값(변경된 원본배열의 길이)을 반환한다
- 원본 배열을 직접 변경한다(예시1)
const lalala = [1, 2];
let result1 = lalala.push(3, 4)
console.log(result1); // 4
console.log(lalala) // [1, 2, 3, 4]
- length 프로퍼티를 사용하여 배열의 마지막 요소를 직접 추가할 수도 있다
const hohoho = [1, 2, 3]
hohoho[hohoho.length] = 4
console.log(hohoho) // [1, 2, 3, 4]
Array.prototype.unshift
- unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 제일 앞에 요소로 추가하고, 변경된 length 프로퍼티 값을 반환한다
- 원본 배열을 직접 변경한다
const numbers = [1, 2, 3, 4, 5]
let result3 = numbers.unshift(0)
console.log(result3) // 6
console.log(numbers) // [0, 1, 2, 3, 4, 5]
Array.prototype.shift
- unshift 메서드는 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다
- 원본 배열이 빈 배열이면 undefined를 반환한다
- 원본 배열을 직접 변경한다
let everything = [19, 44, 'good', false]
let result4 = everything.shift()
console.log(result4) // 19
console.log(everything); // [44, 'good', false]
Array.prototype.splice
- 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하고 싶을 때 splice 메서드를 사용한다
- splice 메서드는 3개의 매개변수가 있다. splice(start, deleteCount, items)
- start : 원본 배열의 요소를 제거하기 시작할 인덱스. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. (예시2) start가 음인 경우 배열의 끝에서 인덱스를 나타낸다. 만약 start가 -1인 경우 마지막 요소를 가리키고 -n이면 마지막에서 n번째 요소를 가리킨다.
- deleteCount(옵션) : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수이다. deleteCount가 0인 경우 아무런 요소도 제거되지 않는다(예시3)
- items(옵션) : 제거할 위치에 삽입할 요소들의 목록이다. 생략할 경우 원본 배열에서 요소들을 제거하기만 한다. splice의 두 번째 인수, 즉 제거할 요소의 개수를 0으로 지정하고 세 번째 인수에 추가할 요소를 넣으면 새로운 요소가 start 자리부터 삽입된다(예시4)
- splice 메서드는 제거한 요소를 반환하고, 원본 배열을 직접 변경한다
slice 메서드는 특정한 아이템을 제거하는 용도로 사용이 되는데, 특정한 아이템을 원하는 자리에 끼워넣는 용도로도 사용한다
-예시1-
const arr11 = [1, 2, 3, 4];
const result11 = arr11.splice(1, 2, 20, 30)
console.log(result11) // [2, 3]
console.log(arr11) // [1, 20, 30, 4]
-예시2-
const arr12 = [1, 2, 3, 4, 5];
const result12 = arr12.splice(1)
console.log(result12) // [2, 3, 4, 5]
console.log(arr12) // [1]
-예시2.5-
const numbers = [1, 2, 3, 4]
numbers.splice(2, 1)
console.log(numbers) // [1, 2, 4]
-예시3-
const arr13 = [1, 2, 3, 4, 5, 6];
const result13 = arr13.splice(1,0)
console.log(result13)
console.log(arr13)
-예시4-
const arr13 = [1, 2, 3, 4, 5, 6];
const result13 = arr13.splice(1,0,10,20)
console.log(result13) // []
console.log(arr13) // [1, 10, 20, 2, 3, 4, 5, 6]
Array.prototype.reverse
- reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다. 변경된 배열을 반환값으로 받는다.
- 즉, 원본 배열이 변경된다
const papa = [1, 2, 3]
const result555 = papa.reverse();
console.log(result555) // [3, 2, 1]
console.log(papa) // [3, 2, 1]
const fruits = ['Apple', 'Banna', 'Cherry']
fruits.reverse()
console.log(fruits) // ["Cherry", "Banna", "Apple"]
Array.prototype.fill
- fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. 변경된 배열을 반환한다
- fill 메서드는 인수를 3개 받을 수 있다. fill(start, middle, end). 두 번째와 세 번째 인수는 생략이 가능하다. 첫 번째 인수만 전달받는 경우 해당하는 요소로 배열 전체를 채운다.(예시1)
- start : 채울 요소를 지정한다
- middle : 요소 채우기를 시작할 인덱스를 전달할 수 있다(예시2)
- end : 요소 채우기를 멈출 인덱스를 전달할 수 있다(예시3). 이 때, 인수로 들어간 인덱스는 미포함한다(요소로 들어간 인수 직전 item까지가 반환값의 범위)
- fill 메서드를 사용하면 배열을 생성하면서 특정 값으로 요소를 채울 수 있다(예시4)
- 원본 배열이 변경된다
-예시1-
const f = [1, 2, 3]
let result6 = f.fill(0)
console.log(result6) // [0, 0, 0]
console.log(f) // [0, 0, 0]
-예시2-
const ff = [1, 2, 3]
let result7 = ff.fill(0, 1)
console.log(result7) // [1, 0, 0]
console.log(ff) // [1, 0, 0]
-예시3-
const fff = [1, 2, 3, 4, 5]
let result8 = fff.fill(0, 1, 3)
console.log(result8) // [1, 0, 0, 4, 5]
console.log(fff) // [1, 0, 0, 4, 5]
-예시4-
const fffff = new Array(4);
console.log(fffff) // [empty * 4]
fffff.fill(5)
console.log(fffff) // [5, 5, 5, 5]
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ