[JavaScript] 매번 헷갈리는 slice(), splice(), substr(), substring() 비교 정리

🚩 Array

Array의 prototype인 slice(), splice()는 이름부터 비슷한.. 배열을 다루는 함수들인데 차이점을 알아보자
✅ [참고] Array.prototype.slice() - JavaScript - MDN Web Docs
✅ [참고] Array.prototype.splice() - JavaScript - MDN Web Docs

✔ Array.prototype.slice()

• .slice(begin, end) : [begin, end) 에 대한 얕은 복사본을 새로운 배열 객체로 반환 (🚨 원본 배열 수정 ❌)
  • begin
    • 음수일 경우 → 배열 인덱스를 뒤에서부터 카운트하여 추출 (맨 마지막 인덱스가 -1)
    • undefined일 경우 → 0번 인덱스부터 slice
    • 배열의 길이보다 큰 경우 → 빈 배열을 반환
  • end
    • 음수일 경우 →배열 인덱스를 뒤에서부터 카운트하여 추출
    • 생략할 경우 → 배열의 끝까지 추출
    • 배열의 길이보다 큰 경우 → 배열의 끝까지 추출
  • 반환값 👉 추출한 요소를 포함한 새로운 배열

// example
const numbers = [1, 2, 3, 4, 5];

console.log(numbers.slice(0, 2)); // [1, 2]
console.log(numbers.slice(-3, -1)); // [3, 4]
console.log(numbers.slice(undefined, 4)); // [1, 2, 3, 4]
console.log(numbers.slice(6)); // []
console.log(numbers.slice(2)); // [3, 4, 5]
console.log(numbers.slice(3, 6)); // [4, 5]

✔ Array.prototype.splice()

• .splice(start[, deleteCount[, item1[, item2[, ...]]]]) : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경 (🚨 원본 배열 자체를 수정 ⭕)
  • start 👉 배열의 변경을 시작할 인덱스
    • 배열의 길이보다 큰 값인 경우 → 배열의 길이로 설정
    • 음수인 경우 → 뒤에서부터 인덱스 카운팅
    • 값의 절댓값이 배열의 길이보다 큰 경우 → 0으로 설정
  • deleteCount 👉 배열에서 제거할 요소의 수
    • 생략하거나 값이 array.length - start보다 클 경우 → start부터 모든 요소를 제거
    • 0 이하일 경우 → 어떤 요소도 제거하지 않음
  • items 👉 배열에 추가할 요소
    • 아무 것도 지정하지 않을 경우 → 삭제만 진행
  • 반환값 👉 제거한 요소를 담은 배열

// example
const numbers = [1, 2, 3, 4, 5];

// 2번 인덱스부터 3개의 요소를 삭제하고 "a", "b", "c"를 추가
const eliminated = numbers.splice(2, 3, "a", "b", "c");

console.log(eliminated); // [3, 4, 5]
console.log(numbers); // [1, 2, 'a', 'b', 'c']

// 맨 마지막 인덱스부터 0개의 요소를 삭제하고 "d"를 추가
const noElimination = numbers.splice(-1, 0, "d");

console.log(noElimination); // []
console.log(numbers); // [1, 2, 'a', 'b', 'c', 'd']

🚩 String

String의 prototype인 slice(), substr(), substring()은 모두 문자열을 잘라주는 기능을 하고, 원본 문자열을 수정하지 않고 새로운 문자열을 반환한다. 단, arguments 등에 있어서 조금씩 차이점이 존재한다
[참고] String.prototype.slice() - JavaScript - MDN Web Docs
[참고] String.prototype.substr() - JavaScript - MDN Web Docs
[참고] String.prototype.substring() - JavaScript - MDN Web Docs

✔ String.prototype.substr()

• .substr(start[, length])
  • start 👉 추출하고자 하는 문자들의 시작 위치
    • 양수이고 문자열 길이보다 크거나 같을 경우 → 빈 문자열을 반환
    • 음수일 경우 → 뒤에서부터 인덱스 카운팅
    • 음수이고 문자열 길이보다 크거나 같을 경우 → 0번째 인덱스로 간주
  • length 👉 추출할 문자들의 총 숫자
    • 0 또는 음수일 경우: 빈 문자열을 반환
    • 생략될 경우: 문자열의 끝까지 추출하여 반환

const str = "dianestar";

console.log(str.substr(0, 5)); // diane
console.log(str.substr(-4)); // star
console.log(str.substr(-10)); // dianestar

✔ String.prototype.substring()

• .substring()
  • indexStart 👉 반환될 문자열에 포함할 첫 번째 문자의 인덱스 (반환 문자열의 시작 인덱스)
  • indexEnd 👉 반환될 문자열에서 제외할 첫 번째 문자의 인덱스 (반환 문자열의 마지막 인덱스로 포함하지 않음)

✔ String.prototype.slice()

• .slice(indexStart, indexEnd) 👉 Array.prototype.slice(), 그리고 String.prototype.substring() 과 유사!

🤔 substring()과 slice()의 차이

• indexStart > indexEnd인 경우
  • substring()은 indexStart 값과 indexEnd 값을 바꾸어서 처리
  • slice()는 빈 문자열 ""을 반환
• indexStart 또는 indexEnd가 음수일 경우
  • substring()은 음수 값을 0으로 처리
  • slice()는 뒤에서부터 인덱스 카운팅

const str = "dianestar";

str.substring(5, 0); // 'diane' -> str.substring(0, 5); 처럼 동작
str.slice(5, 0); // '' -> 범위를 벗어났다고 판단하여 빈 문자열 반환

str.substring(-4); // 'dianestar' -> str.substring(0); 처럼 동작
str.slice(-4); // 'star' -> 뒤에서부터 (-1 부터) 인덱스 카운팅