JavaScript, Array.slice, Array.Splice 비교

Array.slice(start?: number, end?: number): T[];

    const array = [1, 2, 3, 4, 5];

    // 인자값을 넘기지 않으면 array배열을 반환한다.

    // result : [1, 2, 3, 4, 5]

    const result1 = array.slice();

    // 인자값을 하나 넣으면 start로 지정되고 지정된 Index부터 마지막까지 반환한다.

    // result : [3, 4, 5] 

    const result2 = array.slice(2);

    // 인자값을 두개(모두) 넣으면 start 와 end가 지정된 배열을 반환한다.

    // result : [2, 3]

    const result3 = array.slice(1, 3);

Array.splice(start:number, deleteCount?: number): T[];

    const array = [1, 2, 3, 4, 5];

    // 인자값을 넘기지 않으면 빈배열을 반환한다.

    // result : []

    const result1 = array.splice();

    const array = [1, 2, 3, 4, 5];

    // 인자값을 하나 넣으면 start로 지정되고 지정된 Index부터 마지막까지 반환한다.

    // result : [3, 4, 5]

    const result2 = array.splice(2);

    const array = [1, 2, 3, 4, 5];

    // 인자값을 두개(모두) 넣으면 start 와 end가 지정된 배열을 반환한다.

    // result : [2, 3, 4]

    const result3 = array.splice(1, 3);

slice와 splice는 비슷한 기능을 수행하지만 위 코드를 보면 차이가 있는걸 확인할수 있다.

1. 인자값을 넘기지 않았을때의 반환되는 값

    slice()는 대상 배열의 모든값을 반환하지만 splice()는 아무것도 반환하지 않는다.

2. 두번째 인자값의 처리방법

    slice(), end?:number, 배열의 처음부터 index만큼 움직인다고 생각하면 된다. 또한 index항목의 값은 포함하지 않는다.

    splice(), deleteCount?: number, 배열의 처음이 아닌 첫 인자(start: number)값을 기준으로 두번째 인자값 만큼의 배열값을 반환한다.

Array.slice(), Array.splice()는 처리 대상의 배열이 처리전과 처리후의 값이 다르다.

Array.slice()는 처리후에도 원래의 값을 유지하고 있는 반면 Array.splice()는 처리후 원래의 값이 변경된다.

Array.slice();

    const array = [1, 2, 3, 4, 5];

    // result : [4, 5]

    // array : [1, 2, 3, 4, 5]

    const result = array.slice(3);

Array.splice();

    const array = [1, 2, 3, 4, 5];

    // result : [4, 5]

    // array : [1, 2, 3]

    const result = array.splice(3);

어떤 처리를 하느냐에 따라 두 기능을 활용하면 될것같다.