Array APIs - splice(), slice(), concat()

splice :  삭제한 배열을 반환하고 기존의 배열을 업데이트함

splice(start: number, deleteCount?: number): T[];
/**
 * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
 * @param start The zero-based location in the array from which to start removing elements.
 * @param deleteCount The number of elements to remove.
 * @returns An array containing the elements that were deleted.
 */
splice(start: number, deleteCount: number, ...items: T[]): T[];
/**
 * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
 * @param start The zero-based location in the array from which to start removing elements.
 * @param deleteCount The number of elements to remove.
 * @param items Elements to insert into the array in place of the deleted elements.
 * @returns An array containing the elements that were deleted.
 */

//배열 요소들 중간에 삭제 및 추가
const fruits = ['🍌', '🍉', '🍇', '🍓'];
const newArr = fruits.splice(1); //인덱스 1부터 시작해서 뒤에 모든 요소들 삭제하고 그 요소들을 리턴
console.log(fruits); //['🍌'], 기존의 배열을 업데이트 함
console.log(newArr); //['🍉', '🍇', '🍓'], 삭제한 요소들

const fruits2 = ['🍌', '🍉', '🍇', '🍓'];
const newArr2 = fruits2.splice(1, 2); //인덱스 1부터 시작해서 뒤로 2개만 삭제
console.log(fruits2); //['🍌', '🍓'], 기존의 배열을 업데이트 함
console.log(newArr2); //['🍉', '🍇'], 삭제한 요소들

const fruits3 = ['🍌', '🍉', '🍇', '🍓'];
const newArr3 = fruits3.splice(1, 2, '🍑','🥝'); //삭제하고 원하는 요소들 추가
console.log(fruits3); //['🍌', '🍑', '🥝', '🍓'], 기존의 배열을 업데이트 함
console.log(newArr3); //['🍉', '🍇'], 삭제한 요소들

const fruits4 = ['🍌', '🍉', '🍇', '🍓'];
const newArr4 = fruits4.splice(1, 0, '🍓','🥝'); //삭제하지 않고 원하는 요소들 추가
console.log(fruits4); //['🍌', '🍓', '🥝', '🍉', '🍇', '🍓'], 기존의 배열을 업데이트 함
console.log(newArr4); //[], 삭제한 요소가 없음

 

slice : 기존의 배열은 유지하고, 잘라진 새로운 배열을 반환

slice(start?: number, end?: number): T[];
/**
 * Returns a copy of a section of an array.
 * For both start and end, a negative index can be used to indicate an offset from the end of the array.
 * For example, -2 refers to the second to last element of the array.
 * @param start The beginning index of the specified portion of the array.
 * If start is undefined, then the slice begins at index 0.
 * @param end The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.
 * If end is undefined, then the slice extends to the end of the array.
 */

//기존 배열은 유지하고, 잘라진 새로운 배열을 리턴
const fruits = ['🍎', '🍐', '🍊', '🍋'];
let newArr = fruits.slice(0, 2); //인덱스 0부터 시작해서 인덱스 2 이전까지(인덱스 2 요소는 불포함) 리턴
console.log(fruits); //['🍎', '🍐', '🍊', '🍋']
console.log(newArr); //['🍎', '🍐']

let newArr2 = fruits.slice(); //인덱스 0부터 끝까지, 배열 전체를 리턴
console.log(newArr2); //['🍎', '🍐', '🍊', '🍋']

let newArr3 = fruits.slice(1); //인덱스 1부터 끝까지 리턴
console.log(newArr3); //['🍐', '🍊', '🍋']

let newArr4 = fruits.slice(-1); //뒤에서 하나의 요소만 slice
console.log(newArr4); //['🍋']

 

concat : 여러 개의 배열을 합쳐서 새로운 배열을 반환

concat(...items: ConcatArray<T>[]): T[];
/**
 * Combines two or more arrays.
 * This method returns a new array without modifying any existing arrays.
 * @param items Additional arrays and/or items to add to the end of the array.
 */
concat(...items: (T | ConcatArray<T>)[]): T[];
/**
 * Combines two or more arrays.
 * This method returns a new array without modifying any existing arrays.
 * @param items Additional arrays and/or items to add to the end of the array.
 */

//여러개의 배열을 합쳐줌
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = arr1.concat(arr2); 
console.log(newArr); //[1, 2, 3, 4, 5, 6]