TIL 68 | 배열3(배열 메서드2)

배열 메서드 중 원본 배열을 직접 변경하는 메서드에 대해 정리한다

원본 배열을 직접 변경하는 메서드❗

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]