7.4.1 배열의 어느 곳에서든 자유자재로 편집하기 - `splice()`

📘 7.4.1 배열의 어느 곳에서든 자유자재로 편집하기 - splice()

아이들이 놀이터에서 줄을 서 있는 모습을 보면, 때때로 중간에 있는 친구가 다른 곳으로 가야 하거나 새로운 친구가 중간에 끼어들어야 하는 일이 생기죠. 그럴 때면 아이들은 자연스럽게 자리를 만들어주고, 새로운 순서를 만들어냅니다. 우리가 지금까지 배운 배열 조작 방법들은 마치 줄의 맨 앞이나 맨 뒤에서만 친구들이 들어오고 나가는 것과 같았어요. 하지만 때로는 정말로 줄의 한가운데서 무언가 일어나야 할 때가 있습니다. 바로 그런 순간을 위해 splice()라는 도구가 우리 곁에 있어요.

🧠 먼저 용어를 알아볼까요?

언어는 때로 우리의 마음을 담는 그�그릇이 되기도 하고, 때로는 복잡한 개념을 단순하게 만들어주는 다리가 되기도 해요. splice()와 관련된 용어들을 하나씩 살펴보며, 이 도구가 품고 있는 의미를 천천히 이해해보겠어요.

용어	의미
splice()	배열의 특정 위치에서 요소를 제거하거나 추가할 수 있는 만능 기능입니다.
시작 인덱스	splice() 작업을 시작할 배열의 위치 번호입니다.
삭제 개수	시작 위치부터 제거할 요소의 개수를 의미합니다.
추가 요소들	제거한 자리에 새로 넣을 값들을 의미합니다.

splice라는 단어는 영어로 "이어 붙이다", "연결하다"를 뜻해요. 마치 끊어진 실을 다시 이어 붙이듯, 또는 낡은 테이프의 손상된 부분을 새것으로 교체하듯, 배열 안에서 우리가 원하는 부분을 정교하게 다룰 수 있게 해주는 이름이에요.

✨ splice()의 핵심 개념

우리는 지금까지 배열의 앞과 뒤에서만 작업하는 법을 배웠어요. push()와 pop()은 배열의 끝에서, shift()와 unshift()는 배열의 시작에서 조용히 일을 해왔죠. 하지만 splice()는 다릅니다. 이 함수는 배열의 어느 곳에서든 일할 수 있어요.

때로는 삶에서도 그렇듯이, 가장 필요한 변화는 한가운데서 일어나죠. splice()는 바로 그런 중간의 변화를 다루는 법을 알고 있어요. 특정 위치에서 필요 없는 것들을 조심스럽게 제거하고, 그 자리에 새로운 것들을 정성스럽게 넣어줄 수 있어요.

더 특별한 점은 splice()가 원본 배열을 직접 바꾼다는 거예요. 새로운 배열을 만들어내는 게 아니라, 지금 있는 배열 자체를 우리가 원하는 모습으로 바꿔주죠. 그리고 제거된 요소들은 따로 모아서 새로운 배열로 돌려주어요. 마치 정리를 하면서 버리는 것들도 따로 모아두어 혹시 나중에 필요할지 모르니 챙겨두는 것처럼요.

재미있는 비유: 줄 서기에서 친구들 자리 바꾸기

이 개념을 좀 더 친근하게 이해해보기 위해 하나의 이야기를 들려드릴게요.

운동장에서 체육 시간이 시작되려고 해요. 아이들이 한 줄로 서 있는데, 선생님이 말씀하시죠. "3번째 서 있는 친구부터 2명은 다른 조로 가야 하고, 그 자리에는 저기 서 있던 새로운 친구 2명이 들어와야 해."

이때 일어나는 일들을 차근차근 생각해보세요. 먼저 3번째 자리를 찾아야 하죠. 그다음 그 자리부터 2명의 친구가 줄에서 나와요. 빈 자리가 생기면, 새로운 친구 2명이 그 자리에 들어가죠. 나간 친구들은 다른 곳에 가서 새로운 줄을 만들어요.

이 모든 과정이 splice()가 하는 일이에요. 자연스럽고, 정확하고, 모든 사람이 자신의 자리를 찾을 수 있도록 도와주는 일이죠.

🎯 splice()를 사용하는 이유

어떤 도구든 그것이 필요한 순간이 있어요. splice()가 필요한 순간들을 생각해보면, 우리 일상과 참 닮아있어요.

학생 명단을 관리하는 선생님을 생각해보세요. 중간에 전학 온 학생의 이름을 잘못 적었다면, 그 이름을 올바른 이름으로 바꿔야 하죠. 성적 관리를 할 때도 특정 학생의 점수를 수정해야 하는 경우가 있어요.

또한 어떤 목록의 중간에 급히 새로운 항목을 넣어야 하는 경우도 있어요. 오늘 할 일 목록에 갑자기 중요한 일이 생겨서 중간에 끼워 넣어야 한다거나, 메뉴판에서 특정 위치에 새로운 메뉴를 추가해야 할 때가 그렇죠.

때로는 필요 없게 된 것들을 정리해야 하는 일도 있어요. 목록에서 조건에 맞지 않는 항목들을 찾아서 깔끔하게 제거하거나, 중복되어 있는 데이터를 정리할 때 splice()가 큰 도움이 되어요.

⚙️ 기본 문법 살펴보기

splice()의 문법은 처음에는 조금 복잡해 보일 수 있어요. 하지만 차근차근 이해하면 실은 매우 논리적이고 직관적이에요.

// 기본 형태
배열이름.splice(시작위치, 삭제개수, 추가할값1, 추가할값2, ...);

// 제거만 하기
배열이름.splice(시작위치, 삭제개수);

// 추가만 하기 (삭제개수를 0으로)
배열이름.splice(시작위치, 0, 추가할값1, 추가할값2);

// 교체하기 (1개 제거하고 1개 추가)
배열이름.splice(시작위치, 1, 새로운값);

매개변수 설명:

• 시작위치: 작업을 시작할 인덱스 (0부터 시작)
• 삭제개수: 제거할 요소의 개수 (0이면 제거하지 않음)
• 추가할값들: 제거한 자리에 넣을 새로운 값들 (선택사항)

예시:

let fruits = ["사과", "바나나", "오렌지", "포도"];

// 1번째부터 2개 제거하고 "딸기", "키위" 추가
let removed = fruits.splice(1, 2, "딸기", "키위");
// removed: ["바나나", "오렌지"]
// fruits: ["사과", "딸기", "키위", "포도"]

🧪 예제로 익혀보기

이제 실제 예제를 통해 splice()의 다양한 사용법을 천천히 살펴보겠어요. 각각의 예제는 우리가 실제로 마주할 수 있는 상황들이에요.

🔹 예제 1: 학급 명단에서 잘못 입력된 이름 수정하기

새 학기가 시작되고, 담임선생님이 학급 명단을 정리하고 계세요. 그런데 명단을 작성하다가 한 학생의 이름을 잘못 적으셨네요. 이런 상황에서 splice()가 어떻게 도움을 줄 수 있는지 보여드릴게요.

// 우리 반 학생 명단인데, 중간에 잘못 입력된 이름이 있어요
let classRoster = ["김철수", "잘못된이름", "박영희", "이민수"];

// 현재 명단을 확인해봅시다
console.log("수정 전 명단:", classRoster);
console.log("총 학생 수:", classRoster.length);           // 4명

// 1번째 위치의 잘못된 이름을 "최지영"으로 수정합니다
let correctedName = classRoster.splice(1, 1, "최지영");

// 수정 결과를 확인해봅시다
console.log("제거된 잘못된 이름:", correctedName);         // ["잘못된이름"]
console.log("수정 후 명단:", classRoster);                // ["김철수", "최지영", "박영희", "이민수"]
console.log("여전히 학생 수:", classRoster.length);       // 4명 (개수는 그대로)

// 명단이 올바르게 수정되었는지 확인
console.log("1번째 학생:", classRoster[1]);               // "최지영"
console.log("수정이 완료되었습니다!");

이 예제에서 우리는 splice()로 정확한 위치의 값을 바꾸는 법을 배웠어요. 하나를 제거하고 하나를 추가해서 배열의 길이는 그대로 유지하면서 내용만 바뀌었죠. 마치 잘못 쓴 글자를 지우개로 지우고 올바른 글자를 다시 쓰는 것처럼요.

🔹 예제 2: 할 일 목록 중간에 긴급한 일 추가하기

어떤 아침, 여러분이 오늘 할 일들을 차근차근 계획해 놓았는데, 갑자기 엄마가 몇 가지 일을 더 부탁하시는 상황을 상상해보세요. 그런데 그 일들은 특정 시간에 해야 하는 일들이라 목록 중간에 끼워 넣어야 해요.

// 오늘의 할 일 목록이 이미 계획되어 있어요
let todoList = ["아침운동", "아침식사", "학교가기", "숙제하기", "저녁식사"];

// 현재 할 일 목록을 확인해봅시다
console.log("원래 할 일들:", todoList);
console.log("원래 할 일 개수:", todoList.length);          // 5개

// 갑자기 엄마가 "학교 가기 전에 방 청소도 해야지!"라고 하셨어요
// 2번째 위치(학교가기 앞)에 "방 청소하기"를 추가합니다
let removedItems = todoList.splice(2, 0, "방 청소하기");

// 추가 결과를 확인해봅시다
console.log("제거된 항목들:", removedItems);               // [] (아무것도 제거하지 않음)
console.log("업데이트된 할 일들:", todoList);
console.log("새로운 할 일 개수:", todoList.length);        // 6개 (1개 증가)

// 또 갑자기 "양치도 잊지 마!"라고 하시네요
// 1번째 위치(아침식사 앞)에 "양치하기"를 추가합니다
todoList.splice(1, 0, "양치하기");

// 최종 할 일 목록을 확인해봅시다
console.log("최종 할 일 목록:", todoList);
console.log("최종 할 일 개수:", todoList.length);          // 7개

// 순서대로 출력해봅시다
console.log("오늘의 스케줄:");
for (let i = 0; i < todoList.length; i++) {
    console.log((i + 1) + ". " + todoList[i]);
}

이 예제를 통해 우리는 splice()로 배열 중간에 새로운 요소를 넣는 방법을 익혔어요. 삭제 개수를 0으로 설정하면 아무것도 제거하지 않고 새로운 값만 추가할 수 있어요. 마치 이미 써진 일기장 중간에 새로운 내용을 끼워 넣는 것처럼요.

🔹 예제 3: 과일 바구니에서 상한 과일들 제거하고 새 과일로 교체하기

마지막 예제는 조금 더 복잡한 상황이에요. 과일 바구니를 정리하면서 여러 가지 일을 동시에 해야 하는 경우죠. 상한 과일들을 제거하고, 그 자리에 신선한 과일들을 넣는 과정을 통해 splice()의 복합적인 기능을 배워보겠어요.

// 과일 바구니에 여러 과일이 들어있는데, 일부가 상했어요
let fruitBasket = ["신선한사과", "상한바나나", "상한오렌지", "신선한포도", "신선한딸기"];

// 현재 과일 바구니 상태를 확인해봅시다
console.log("처음 과일 바구니:", fruitBasket);
console.log("과일 개수:", fruitBasket.length);             // 5개

// 1번째부터 2개의 상한 과일을 제거하고 신선한 과일로 교체합니다
let spoiledFruits = fruitBasket.splice(1, 2, "신선한키위", "신선한망고");

// 교체 결과를 확인해봅시다
console.log("제거된 상한 과일들:", spoiledFruits);         // ["상한바나나", "상한오렌지"]
console.log("교체 후 과일 바구니:", fruitBasket);          // ["신선한사과", "신선한키위", "신선한망고", "신선한포도", "신선한딸기"]
console.log("과일 개수:", fruitBasket.length);             // 5개 (개수 동일)

// 이번에는 맨 마지막 과일을 제거해보겠습니다
let lastFruit = fruitBasket.splice(fruitBasket.length - 1, 1);
console.log("제거된 마지막 과일:", lastFruit);             // ["신선한딸기"]
console.log("마지막 과일 제거 후:", fruitBasket);

// 마지막에 두 개의 새로운 과일을 추가해보겠습니다
fruitBasket.splice(fruitBasket.length, 0, "신선한체리", "신선한복숭아");
console.log("최종 과일 바구니:", fruitBasket);
console.log("최종 과일 개수:", fruitBasket.length);

// 모든 과일이 신선한지 확인해봅시다 (간단한 방법으로)
console.log("모든 과일이 신선한지 하나씩 확인:");
for (let i = 0; i < fruitBasket.length; i++) {
    if (fruitBasket[i] === "신선한사과" || fruitBasket[i] === "신선한키위" || fruitBasket[i] === "신선한망고" || fruitBasket[i] === "신선한포도" || fruitBasket[i] === "신선한체리" || fruitBasket[i] === "신선한복숭아") {
        console.log(fruitBasket[i] + "는 신선해요!");
    }
}

이 예제를 통해 우리는 splice()의 여러 기능을 함께 사용하는 법을 배웠어요. 여러 요소를 동시에 제거하고 교체하는 과정과, 배열의 끝에서 작업하는 방법도 함께 익혔죠. 마치 정원사가 시든 꽃을 제거하고 새로운 꽃을 심는 것처럼, 세심하면서도 효율적인 작업이었어요.

✏️ 연습문제로 개념 다지기

이제 우리가 배운 내용을 연습문제를 통해 더욱 단단하게 만들어보겠어요. 연습은 우리의 이해를 깊게 하고, 실제로 사용할 수 있는 능력으로 바꿔주는 소중한 과정이에요.

Ex1) 색깔 배열에서 특정 위치의 색깔을 다른 색깔로 교체해보자

let colors = ["빨강", "파랑", "노랑", "초록"];

console.log("처음 색깔들:", colors);

// 1번째 색깔(파랑)을 "보라"로 교체하기
let oldColor = colors.splice(1, 1, "보라");

console.log("교체된 색깔:", oldColor);              // ["파랑"]
console.log("변경된 색깔들:", colors);               // ["빨강", "보라", "노랑", "초록"]

Ex2) 숫자 배열의 중간에 여러 숫자를 한 번에 삽입해보자

let numbers = [1, 2, 5, 6];

console.log("처음 숫자들:", numbers);

// 2번째 위치에 3과 4를 삽입하기 (아무것도 제거하지 않음)
numbers.splice(2, 0, 3, 4);

console.log("삽입 후 숫자들:", numbers);             // [1, 2, 3, 4, 5, 6]
console.log("최종 개수:", numbers.length);          // 6개

Ex3) 동물 배열에서 연속된 여러 동물을 제거해보자

let animals = ["강아지", "고양이", "토끼", "햄스터", "거북이"];

console.log("처음 동물들:", animals);

// 1번째부터 3개 동물을 제거하기
let removedAnimals = animals.splice(1, 3);

console.log("제거된 동물들:", removedAnimals);       // ["고양이", "토끼", "햄스터"]
console.log("남은 동물들:", animals);               // ["강아지", "거북이"]

지금까지 splice()의 모든 특성과 활용법을 자세히 알아보았어요. splice()는 배열을 자유자재로 편집할 수 있게 해주는 강력한 도구예요. 앞으로 배열의 특정 부분을 정교하게 수정해야 할 때는 주저하지 말고 splice()를 활용해보세요.

🔄 복습 문제 - 이전에 배운 내용들 기억하나요?

새로운 것을 배우는 것만큼 중요한 일이 하나 더 있어요. 바로 이전에 배운 것들을 잊지 않는 것이죠. 기억은 사용하지 않으면 천천히 흐려지지만, 가끔씩 꺼내어 사용하면 더욱 선명해져요.

🔁 5단원 복습: 함수 만들어보기

따뜻한 마음으로 함수를 떠올려보세요. 함수는 우리가 반복해서 사용할 코드를 하나의 이름으로 묶어준 편리한 도구였죠.

// 문제: 두 숫자를 더하는 함수를 만들어보세요
function addNumbers(a, b) {
    return a + b;
}

// 사용해보기
let result1 = addNumbers(5, 3);
console.log("5 + 3 =", result1);     // 8

let result2 = addNumbers(10, 7);
console.log("10 + 7 =", result2);    // 17

// 화살표 함수로도 만들어보세요
const multiply = (x, y) => x * y;
console.log("4 × 6 =", multiply(4, 6));  // 24

🔁 4단원 복습: for문과 배열 함께 사용하기

반복문도 기억나시나요? 같은 일을 여러 번 해야 할 때 우리를 도와주던 친구였어요.

// 문제: 배열의 모든 요소를 for문으로 출력해보세요
let fruits = ["사과", "바나나", "오렌지"];

console.log("과일 목록:");
for (let i = 0; i < fruits.length; i++) {
    console.log((i + 1) + ". " + fruits[i]);
}

// 문제: 1부터 5까지의 숫자를 배열에 넣어보세요
let numbers = [];
for (let i = 1; i <= 5; i++) {
    numbers.push(i);
}
console.log("숫자 배열:", numbers);  // [1, 2, 3, 4, 5]

✅ 학습 완료 체크리스트

우리가 오늘 함께 걸어온 길을 돌아보며, 각각의 내용을 마음속에 잘 정리했는지 확인해보세요.

학습 내용	이해했나요?
splice()의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

더 많은 연습을 통해 우리의 이해를 더욱 깊게 만들고 싶은 여러분을 위해 몇 가지 문제를 더 준비했어요.

추가 문제 1. 동물 배열에서 특정 위치의 동물을 제거해보세요.

let animals = ["강아지", "고양이", "토끼", "햄스터"];

console.log("처음 동물들:", animals);

// 1번째부터 2개 제거
let removed = animals.splice(1, 2);
console.log("제거된 동물들:", removed);
console.log("남은 동물들:", animals);

추가 문제 2. 숫자 배열의 중간에 새로운 숫자를 삽입해보세요.

let numbers = [1, 2, 4, 5];

console.log("처음 숫자들:", numbers);

// 2번째 위치에 3 삽입
numbers.splice(2, 0, 3);
console.log("삽입 후 숫자들:", numbers);
console.log("최종 개수:", numbers.length);

추가 문제 3. 과일 배열에서 특정 과일을 다른 과일로 교체해보세요.

let fruits = ["사과", "바나나", "오렌지"];

console.log("처음 과일들:", fruits);

// 1번째 과일을 "포도"로 교체
let old = fruits.splice(1, 1, "포도");
console.log("교체된 과일:", old);
console.log("변경된 과일들:", fruits);

추가 문제 4. 다음 코드의 실행 결과를 예상해보세요.

let arr = [1, 2, 3, 4, 5];
let result = arr.splice(2, 2, 10, 20);
console.log("result:", result);
console.log("arr:", arr);

답:

• result: [3, 4] (제거된 요소들)
• arr: [1, 2, 10, 20, 5] (변경된 배열)

설명: splice(2, 2, 10, 20)은 2번째부터 2개를 제거하고 그 자리에 10, 20을 추가해요.

추가 문제 5. splice를 사용해서 배열의 첫 번째와 마지막 요소를 동시에 제거해보세요.

let colors = ["빨강", "파랑", "노랑", "초록", "보라"];

console.log("처음 색깔들:", colors);

// 첫 번째 제거
colors.splice(0, 1);
console.log("첫 번째 제거 후:", colors);

// 마지막 제거 (길이가 줄어들어서 인덱스 변경됨)
colors.splice(colors.length - 1, 1);
console.log("마지막 제거 후:", colors);

답: 위 코드가 정답이에요.

설명: splice를 사용하면 첫 번째와 마지막 요소를 제거할 수 있어요. 첫 번째 제거 후 배열 길이가 바뀌므로 마지막 인덱스도 변경돼요.

🔄 단계별 진행 과정 정리

우리가 지금까지 배운 내용을 단계별로 다시 한번 차근차근 정리해보겠어요.

1단계: 배열 준비 → splice로 특정 위치에서 제거 → 제거된 요소들 확인 → 남은 배열 확인 → 길이 변화 확인

2단계: 배열 시작 → splice로 중간에 삽입 → 제거된 것 확인 (빈 배열) → 변경된 배열 확인 → 최종 개수 확인

3단계: 배열 준비 → splice로 1개 제거하고 1개 추가 → 교체된 요소 확인 → 변경된 배열 확인 → 추가 교체 실행

📂 마무리 정보

오늘 우리가 함께 배운 7.4.1의 내용이 여러분의 마음속 지식 정원에 잘 심어졌기를 바라요. 다음 시간에는 또 다른 흥미로운 내용으로 만나게 될 거예요.

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요. 그것이 바로 진정한 학습이 일어나는 방식이니까요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---