JS | 배열의 추가/삭제

💡 알고리즘 문제(JS100제) 풀기 시작하면서 배열 메소드에 대해서 알게 됨 + 다음 날 수업시간에 다루게 되어 정리해 두면 좋을 것 같아서 간단하게 정리해보기

배열을 추가할 수 있는 메소드

1) array.push

const arr = [1, 2];
arr.push(3,4);
console.log(arr); // [1, 2, 3, 4]

• 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가
• 원본 배열을 직접 변경
  -> 스프레드 용법을 사용하는 편이 더 좋다

2) array.unshift

const arr = [1, 2];
arr.unshift(3,4);
console.log(arr); // [3, 4, 1, 2]

• 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가
• 원본 배열을 직접 변경
  -> 스프레드 용법을 사용하는 편이 더 좋다
  

배열을 삭제할 수 있는 메소드

1) array.pop

const arr = [1, 2, 3];
arr.pop();
console.log(arr); // [1,2]

arr.pop();
console.log(arr); // [1]

• 원본 배열에서 마지막 요소를 제거하고 제거한 요소 반환
  (pop한 것을 console에 찍어보면 제거된 요소가 나온다는 뜻)
• 원본 배열이 빈 배열이면 undefined 반환
• 원본 배열을 직접 변경

2) array.shift

const arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3]

arr.shift();
console.log(arr); // [3]

• 원본 배열에서 첫번째 요소를 제거하고 제거한 요소 반환
• 원본 배열이 빈 배열이면 undefined 반환
• 원본 배열을 직접 변경

배열의 중간에 요소를 추가/삭제 할 수 있는 메소드

array.splice

let fish = ['정어리', '고등어', '돌고래', '참치', '고래상어', '코끼리'];

// 1. splice 를 이용해 코끼리를 제거해보세요.
fish.splice(5,1);
console.log(fish);

// 2. 참치 다음에 다금바리를 추가해보세요.
fish.splice(4, 0, "다금바리");
console.log(fish);

// 3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요.
fish.splice(2,1,"옥돔", "갈치");
//or fish.splice(2,1,...["옥돔", "갈치"]);
console.log(fish);

• 배열의 중간에 요소를 추가하거나 제거하는 경우 사용
• 원본 배열을 직접 변경한다
  - splice(start, deleteCount, items)
  1) start
  - 원본 배열의 요소를 변경하기 시작할 인덱스
  - start가 음수인 경우 마지막 요소에서부터 인덱스 나타냄
  2) deleteCount
  - start부터 제거할 요소의 개수
  - 0인 경우 아무런 요소도 제거되지 않음
  3) items
  - 제거한 위치에 삽입할 요소들의 목록
  

배열에서 특정 요소를 제거하려면?

• indexOf 메소드를 통해 특성 요소의 인덱스 취득 후 splice 메소드 사용

  const arr = [1, 2, 3, 1, 2]
  
  function remove(array, item) {
  	const index = array.indexOf(item);
  
  if (index != -1) 
  	{array.splice(index,1)
      return array}
  	}
  console.log(remove(arr,2)); // [1,3,1,2]

• filter 메소드 사용 가능하지만 특정 요소가 중복된 경우 모두 제거됨