JS

slice vs splice

2025. 5. 15. 14:54

요약

둘 다 배열 메소드이지만 용도가 다름.

  • 복사/추출용 → slice (배열 일부 또는 전체, 원본 보존)
  • 수정/삽입/삭제용 → splice (원본 변경)

 

 

✅ slice()

  • 역할: 배열의 일부분을 잘라서 새 배열로 반환
  • 원본 배열 변경: ❌ 변경하지 않음
  • 문법:
array.slice(start, end)
  • `start`: 시작 인덱스 (포함)
  • `end`: 끝 인덱스 (미포함)
const fruits = ["apple", "banana", "cherry", "date"];
const result = fruits.slice(1, 3);
console.log(result);      // ["banana", "cherry"]
console.log(fruits);      // ["apple", "banana", "cherry", "date"]

 

 

 

✅ splice()

  • 역할: 배열에서 요소를 추가, 삭제 또는 교체
  • 원본 배열 변경: ✅ 변경함
  • 문법:
array.splice(start, deleteCount, item1, item2, ...)
  • `start`: 조작을 시작할 인덱스
  • `deleteCount`: 삭제할 요소 개수
  • item1, item2, ...: 추가할 요소들 (옵션)

splice - 추가

const arr = [1, 2, 5];
arr.splice(2, 0, 3, 4);  
console.log(arr); // [1, 2, 3, 4, 5]

 

splice - 삭제

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2);
console.log(removed); // [3, 4]
console.log(arr);     // [1, 2, 5]

 

splice - 수정

const arr = [1, 2, 99, 4, 5];
arr.splice(2, 1, 3);  
console.log(arr); // [1, 2, 3, 4, 5]

'JS' 카테고리의 다른 글

변경된 카카오맵 API 플랫폼 도메인 등록 위치  (0) 2026.02.11
this를 명시적으로 설정하는 2가지 함수, .call()과 .bind()의 차이 + .apply()  (0) 2025.11.14
클로저의 원리가 적용된 React Hooks  (0) 2025.05.13
함수 파라미터를 중괄호로 감싸서 받을 때와 그냥 받을 때의 차이  (0) 2025.05.10
자주 사용되는 JavaScript Web API들  (0) 2025.05.10
'JS' 카테고리의 다른 글
  • 변경된 카카오맵 API 플랫폼 도메인 등록 위치
  • this를 명시적으로 설정하는 2가지 함수, .call()과 .bind()의 차이 + .apply()
  • 클로저의 원리가 적용된 React Hooks
  • 함수 파라미터를 중괄호로 감싸서 받을 때와 그냥 받을 때의 차이
쥬피썬더의노예
쥬피썬더의노예
오히려 좋아
  • 쥬피썬더의노예
    d.log
    쥬피썬더의노예
    글쓰기 관리
    • 분류 전체보기 (112)
      • JS (37)
      • TS (3)
      • WEB (10)
      • React.js (20)
      • Next.js (4)
      • tanstack query (2)
      • Node.js (2)
      • HTML (5)
      • CSS (13)
      • CS (1)
      • 에이전트 (1)
      • Git (4)
      • JAVA (0)
      • SQL (0)
      • db (0)
      • GSAP (0)
      • 자료구조 (1)
      • 알고리즘 (0)
      • ✨회고 (5)
      • 포꾸 (0)
      • 인터뷰 (0)
      • 개발일지 (0)
      • 일기 (1)
      • etc (3)
      • 정처기 실기 (0)
        • C (0)
        • Java (0)
        • Python (0)
      • fonts (0)
      • articles (0)
      • 도서 (0)
  • 인기 글

  • 태그

    리액트
    폼
    React
    슬라이딩 윈도우
    state
    Next.js
    SSG
    css
    자바스크립트
    zustand
    리팩토링
    클로저
    javascript
    유효성 검사
    Til
    프론트엔드
    TypeScript
    SSR
    React Query
    GIT
    CSR
    안티그래비티
    useEffect
    useState
    HTML
    React.JS
    상태 관리
    아키텍처
    WEB
    조합 패턴
  • 최근 글

  • 전체
    오늘
    어제
  • hELLO· Designed By정상우.v4.10.3
쥬피썬더의노예
slice vs splice
상단으로

티스토리툴바