substr vs substring

두가지 메소드의 차이점을 보자면

str.substr(시작 인덱스, 추출 갯수)
substr은 시작 인덱스번호, 몇개를 추출할것인지를 입력받는 반면에

str.substring(시작 인덱스번호, 끝 인덱스번호)
substring은 시작 인덱스 번호, 끝 인덱스번호를 입력받는다

var str= "ABCDEFGH";
var str_substr = str.substr(1,4); // 1번 인덱스부터 4개의 문자를 추출하라!
var str_substring = str.substring(1,4); // 1번 인덱스부터 4번 인덱스까지 추출하
    
console.log(str_substr); // BCDE
console.log(str_substring); // BCD

Slice

• slice()는 배열 메서드로 원하는 부분을 복사하고 새로운 배열로 리턴한다.
• 기존배열을 변경하지 않습니다.
• slice (begin, end)
• 배열 begin 부터 end 까지 잘라냅니다.

const arr = [1,2,3,4,5];
array.slice(0,4)  // [1,2,3,4]
array // [1,2,3,4,5] 원본은 변하지 않습니다

Splice

• splice() 배열 메서드로 배열에 원하는 엘리먼트 갯수를 추가하거나 제거 할 수 있습니다.
• 기존 배열을 변경합니다.
• 배열의 start 부터 deleteCount 만큼 요소를 제거한 다음 그 자리에 items 를 삽입합니다
• start
  배열의 변경을 시작할 index
  배열의 길이보다 큰 값일 경우 배열의 길이로 설정
  음수인 경우 배열의 끝에서부터 요소를 센다.
  예 ) array.splice(-n) -> array.length -n과 같다.
  값의 절대값이 배열의 길이보다 큰 경우 0으로 설정
• deleteCount(Optional)
  배열에서 제거할 요소의 수
  생략하거나 값이 array.length - start보다 클 경우 start 부터의 모든 요소를 제거
  0이하의 값을 설정 할 경우 어떤 요소도 제거하지 않음, 이 경우 최소한 하나의 새로운 요소를 추 가해야한다.
• item1, item2, ...(Optional)
  배열에 추가할 요소
  생략할 경우 요소를 제거하기만 한다.
  반환 값
  제거한 요소를 담은 배열, 아무것도 제거하지 않을 경우 빈 배열을 반환

1. 제거만 할 경우

let arr = ['1','2','3','4','5','6'];
arr.splice(1, 3);
["2", "3", "4"]
//output:["1", "5", "6"]

2. 제거후 새로운 엘리먼트를 추가 할 경우

let arr = ['1','2','3','4','5','6'];
arr.splice(1, 3 , 'A','B');
["2", "3", "4"]
//output:['1', 'A', 'B', '5', '6']

3. 추가만 하는 경우

let arr = ['1','2','3','4','5','6'];
arr.splice(3, 0 , 'A','B');
['1',"2", "3", "4",'A','B','5','6']
//output:['1', 'A', 'B', '5', '6']

4. 끝에서 제거하는 경우

let arr = ['1','2','3','4','5','6'];
arr.splice(-2, 2 , 'A','B');
//output:['1', '2','3','4','A', 'B',]

5. 1번 index 포함 이후 모든 요소의 제거

let arr = ['1','2','3','4','5','6'];
arr.splice(1);
//output:['1']