[JavaScript] 배열 인덱싱으로 특정 원소 출력/제거/추가하기(slice, splice 함수)

💡 목표

JavaScript에서 배열 인덱싱을 통해 원소를 출력, 제거, 추가하는 방법에 대해 학습한다.

1.  slice 함수: 특정 구간 인덱스의 원소 반환

함수 원형

배열.slice(시작 인덱스, 끝 인덱스)

slice 함수는 특정 구간의 인덱스에 해당하는 원소를 반환합니다.

2개의 정수형 매개변수를 전달하는데 각각 시작 인덱스, 끝 인덱스입니다.

특히, 끝점 인덱스는 포함하지 않기 때문에,

원소를 추출하는 구간을 수학적으로 표현하면 [시작점, 끝점)입니다.

예제 코드

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
let arrSlice = arr1.slice(2, 6); // [start, end) 구간 인덱싱
console.log(arrSlice); // 3, 4, 5, 6

위의 예제에서 시작점은 2이고 끝점은 6이므로 2번째부터 5번째 원소를 반환합니다.

2.  splice 함수: 특정 구간 인덱스의 원소 삭제/추가

함수 원형

배열.splice(시작 인덱스, 삭제할 데이터 개수, 추가할 원소 나열)

splice 함수는 특정 인덱스에서부터 시작하여 원소 N개를 삭제하거나 사용자 임의대로 원소를 추가합니다.

아래 예제 코드를 보면 직관적으로 함수 사용방법을 이해하실 수 있습니다.

예제 코드 1

let arr2 = [1, 2, 3];
arr2.splice(1, 0, 4, 5); // 시작 인덱스: 1, 원소 삭제 개수: 0, 데이터 [4, 5] 추가
console.log(arr2); // [1, 4, 5, 2, 3]

예제 코드 2

let arr3 = [10, 20, 30, 40, 50];
arr3.splice(2, 2, 6, 7, 88, 99, 77); // 시작 인덱스: 2, 원소 삭제 개수: 2, 데이터 [6, 7, 88, 99, 77] 추가
console.log(arr3); // [10, 20, 6, 7, 88, 99, 77, 50]

---

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요!

그럼 오늘도 즐겁고 멋진 만드시길 바랍니다.

고맙습니다 :-)