안녕하세요! 자바스크립트로 코딩하다 보면 배열 다루는 게 은근 까다롭죠? 특히 배열 요소를 추가하거나 삭제할 때 어떤 메서드를 써야 할지 헷갈릴 때가 많았어요. 저도 그랬거든요. 그래서 오늘은 `splice()` 메서드와 `slice()` 메서드를 활용해서 자바스크립트 배열을 자유자재로 다루는 방법을 알려드리려고 해요. `splice()`와 `slice()`! 이름은 비슷하지만 기능은 완전히 다르답니다. 둘의 차이점을 확실하게 이해하고 나면, 배열 요소 추가는 물론이고, 삭제와 교체까지 훨씬 쉽게 할 수 있을 거예요. 자, 그럼 이제 흥미진진한 자바스크립트 배열 탐험을 시작해 볼까요?
splice() 메서드 이해하기
자, 이제 자바스크립트에서 가장 강력하면서도 가끔은 헷갈릴 수 있는 splice() 메서드에 대해 제대로 파헤쳐 볼까요? 마치 마법사의 만능 주문처럼, splice()는 배열을 자유자재로 조작할 수 있게 해준답니다! 추가, 삭제, 교체까지?! 한 번에 가능해요! 💫
splice()는 기본적으로 배열의 특정 위치에서 요소를 추가하거나 삭제하는 데 사용되는데요, 그 작동 방식을 좀 더 자세히 들여다보면 놀라울 정도로 유연하다는 것을 알 수 있을 거예요. 함수의 구조 자체가 그 유연함을 말해주고 있죠!
splice() 함수의 구조
array.splice(start, deleteCount, item1, item2, ...)
크게 세 가지 필수적인 매개변수와 선택적인 매개변수들로 구성돼요. start는 배열에서 작업을 시작할 인덱스(위치)를 나타내고, deleteCount는 start 인덱스부터 몇 개의 요소를 삭제할지 결정한답니다. 그리고 item1, item2, …는 삭제 후 그 자리에 추가할 새로운 요소들을 의미해요. 마치 레고 블럭을 끼워 넣듯이 말이죠! 🧱
start 값이 음수일 경우에는 배열의 끝에서부터의 위치를 나타내는데, 예를 들어 -1은 마지막 요소, -2는 끝에서 두 번째 요소를 가리킨답니다. 이런 방식은 배열의 길이가 정확히 몇인지 모르는 상황에서도 유용하게 활용할 수 있어요! 👍
deleteCount를 0으로 설정하면? 요소를 삭제하지 않고 새로운 요소만 추가할 수 있어요. 반대로 item들을 아예 지정하지 않으면? 단순히 특정 위치에서 지정된 개수만큼 요소를 삭제하는 기능으로 사용할 수 있죠! 정말 다재다능하지 않나요? 😄
splice() 메서드의 놀라운 점은 여기서 끝나지 않아요. 이 메서드는 변경된 원본 배열 자체를 수정하고, 삭제된 요소들을 새로운 배열로 반환한답니다. 즉, 원본 배열과 삭제된 요소들을 동시에 관리할 수 있다는 뜻이죠! 효율적이면서도 깔끔하게 코드를 작성할 수 있도록 도와준답니다. ✨
splice() 활용 예시
예를 들어, 1부터 5까지의 숫자를 가진 배열 [1, 2, 3, 4, 5]에서 인덱스 2(숫자 3)부터 2개의 요소(3, 4)를 삭제하고, 그 자리에 10, 11을 추가하고 싶다고 가정해 볼게요.
let myArray = [1, 2, 3, 4, 5];
let removedItems = myArray.splice(2, 2, 10, 11);
console.log(myArray); // 출력: [1, 2, 10, 11, 5]
console.log(removedItems); // 출력: [3, 4]
보이시나요? 원본 배열 myArray는 [1, 2, 10, 11, 5]로 변경되었고, 삭제된 요소 3과 4는 removedItems 배열에 담겼어요. 이처럼 splice()는 배열을 다루는 데 있어서 정말 강력한 도구랍니다. 💪
splice() 사용 시 주의사항
하지만 이 강력한 힘에는 책임이 따르는 법! splice()는 원본 배열을 직접 수정하기 때문에 사용할 때 주의해야 해요. 실수로 원하지 않는 요소를 삭제하거나 수정하면 데이터 손실로 이어질 수 있으니, 항상 신중하게 사용해야 한답니다. ⚠
자, 이제 splice() 메서드의 기본적인 작동 방식을 이해했으니, 다음에는 slice() 메서드와의 차이점에 대해 알아보도록 할게요. 두 메서드 모두 배열을 다루는 데 사용되지만, 그 기능과 사용법에는 중요한 차이가 있답니다. 과연 어떤 차이점들이 있을까요? 🤔 다음 섹션에서 자세히 살펴보도록 하겠습니다! 😉
slice() 메서드와의 차이점
splice()와 slice()? 이름도 비슷하고 둘 다 배열을 다루는 메서드라 헷갈리기 쉽죠? ^^; 사실 저도 처음엔 엄청 헷갈렸어요! ㅎㅎ 하지만 둘은 완전히 다른 역할을 한다는 사실! 마치 쌍둥이처럼 생겼지만, 한 명은 요리사, 한 명은 프로그래머인 것처럼 말이죠! 자, 이제 두 메서드의 차이점을 낱낱이 파헤쳐 보자구요~!
핵심적인 차이점
핵심적인 차이점은 바로 원본 배열의 변경 여부에 있어요. splice()는 원본 배열을 직접 수정하는 메서드입니다. 마치 조각가가 점토를 깎아 작품을 만드는 것처럼 말이죠! 반면, slice()는 원본 배열은 untouched! 그대로 둔 채, 새로운 배열을 생성해서 반환해 줘요. 사진을 복사해서 원본은 그대로 두고 복사본에 그림을 그리는 것과 같다고 할 수 있겠네요.
splice() 메서드
좀 더 자세히 설명해 드릴게요. splice() 메서드는 배열의 특정 위치에 요소를 추가하거나, 삭제하거나, 교체할 수 있는 만능 재주꾼이에요. 예를 들어, 100개의 요소를 가진 배열의 50번째 위치에 새로운 요소를 삽입한다고 생각해 보세요. splice()를 사용하면 원본 배열의 50번째 위치에 새로운 요소가 쏙! 들어가고, 기존의 50번째 요소부터는 한 칸씩 뒤로 밀려나게 됩니다. 원본 배열의 길이도 101개로 늘어나겠죠?
slice() 메서드
반대로 slice() 메서드는 원본 배열의 일부를 ‘잘라내어’ 새로운 배열을 만들어 줍니다. 예를 들어, 1부터 100까지의 숫자를 가진 배열에서 20번째 요소부터 30번째 요소까지를 잘라내고 싶다고 해 볼게요. slice(19, 30)을 사용하면 20, 21, 22, …, 30 이렇게 11개의 요소를 가진 새로운 배열이 짠! 하고 나타납니다. 원본 배열은? 네, 전혀 변하지 않고 그대로 1부터 100까지의 숫자를 가지고 있죠!
표로 정리한 splice()와 slice()의 비교
표로 정리해보면 더욱 명확하게 이해할 수 있을 거예요!
| 기능 | splice() | slice() |
|---|---|---|
| 원본 배열 변경 | 변경함 (Modifying) | 변경하지 않음 (Non-Modifying) |
| 반환 값 | 삭제된 요소들의 배열 | 새로운 배열 (원본의 일부 복사) |
| 주요 용도 | 배열 요소 추가, 삭제, 교체 | 배열의 일부 추출 |
| 사용 예시 | arr.splice(2, 1, 'new') (2번 인덱스부터 1개 삭제 후 ‘new’ 삽입) |
arr.slice(2, 5) (2번 인덱스부터 5번 인덱스 전까지 추출) |
splice()와 slice()의 활용
자, 이제 두 메서드의 차이점이 확실히 다가오시나요? ^^ splice()는 원본 배열을 직접 수정하는 ‘현장 편집 전문가’라면, slice()는 원본 배열은 건드리지 않고 새로운 배열을 만들어내는 ‘복제 전문가’라고 생각하면 쉽겠죠?!
개발을 하다 보면, 배열의 특정 부분만 가져와서 사용하고 싶을 때도 있고, 배열 자체를 수정해야 할 때도 있잖아요? 그럴 때 각각 slice()와 splice()를 적절히 사용하면 코드를 훨씬 효율적으로 작성할 수 있답니다! 마치 요리할 때 칼과 도마를 적재적소에 사용하는 것처럼 말이죠!
아직도 헷갈린다면? 걱정 마세요! 다음에 나올 예시들을 보면 더욱 확실하게 이해할 수 있을 거예요! 각 메서드의 다양한 활용법을 살펴보면서, 실제로 어떻게 동작하는지 눈으로 직접 확인해 보자구요! 그럼 다음 챕터에서 만나요~! 😉
배열 요소 추가 예시
자, 이제 splice() 메서드를 사용해서 배열에 요소를 추가하는 짜릿한(?) 예시들을 살펴볼까요? 기본적인 문법부터 찬찬히 살펴보고, 흥미진진한 활용 예시까지 팍팍! 보여드릴게요~ ^^
splice() 메서드는 기본적으로 배열의 특정 위치에서 요소를 추가, 삭제, 교체하는 데 사용되는 만능 재주꾼이에요! 추가 기능에 집중해서 살펴보자면, splice(시작 인덱스, 삭제할 요소 개수, 추가할 요소1, 추가할 요소2, ...) 이렇게 사용한답니다. 여기서 중요한 포인트! 요소를 추가만 하고 싶다면 삭제할 요소 개수를 0으로 설정하면 돼요! 참 쉽죠? 😀
1. 기본적인 추가
먼저 숫자로 이루어진 배열 numbers에 숫자 10을 인덱스 2 위치에 추가해 볼게요. numbers.splice(2, 0, 10) 이렇게 하면, 뿅! 하고 10이 쏙 들어간답니다. 원래 인덱스 2에 있던 요소와 그 뒤의 요소들은 한 칸씩 뒤로 밀려나게 돼요. 마치 마술 같죠? ✨
2. 문자열 배열
이번엔 문자열 배열 fruits에 “grape”를 추가해 볼까요? fruits.splice(1, 0, "grape")를 실행하면 “grape”가 인덱스 1 위치에 쏘옥~ 들어가면서 “banana”와 그 뒤에 있던 과일 친구들은 자리를 양보하게 된답니다. 참 재밌죠? 😊
3. 배열의 맨 앞에 추가
splice()를 사용하면 배열 맨 앞에도 간편하게 요소를 추가할 수 있어요! fruits.splice(0, 0, "mango") 이렇게 하면 “mango”가 맨 앞자리를 차지하게 돼요! 다른 과일 친구들은 뒤로 한 칸씩 밀려나겠죠? ㅎㅎ
4. 배열의 맨 뒤에 추가
push() 메서드도 있지만, splice()로도 맨 뒤에 요소를 추가할 수 있어요. fruits.splice(fruits.length, 0, "kiwi") 처럼 시작 인덱스를 fruits.length로 설정하면 “kiwi”가 맨 뒤에 붙게 된답니다! 마치 기차에 새로운 칸을 연결하는 것 같네요! 🚂
5. 여러 개의 요소 추가
splice() 메서드의 진정한 매력은 한 번에 여러 개의 요소를 추가할 수 있다는 점이에요! numbers.splice(1, 0, 15, 20, 25) 이렇게 하면 15, 20, 25가 한꺼번에 numbers 배열에 추가된답니다. 정말 효율적이죠? 👍
6. 다양한 자료형 추가
splice() 메서드는 숫자, 문자열뿐 아니라 다양한 자료형의 요소들을 추가할 수 있어요! 객체, 함수, 심지어 다른 배열까지도 가능하답니다! 예를 들어, mixedArray.splice(2, 0, {name: "John", age: 30}, function() {console.log("Hello!");}, [1, 2, 3]) 와 같이 사용할 수 있어요. 정말 놀랍지 않나요?! 🤩
7. 빈 배열에 추가
빈 배열에도 splice()를 사용해서 요소를 추가할 수 있어요. emptyArray.splice(0, 0, "first")를 실행하면 “first”가 빈 배열의 첫 번째 요소가 된답니다. 무에서 유를 창조하는 마법 같아요! ✨
8. 음수 인덱스 활용
splice() 메서드는 음수 인덱스도 지원한답니다! numbers.splice(-2, 0, 50)와 같이 사용하면 배열의 끝에서 두 번째 위치에 50을 추가할 수 있어요. 인덱스 계산이 훨씬 편리해지겠죠? 😉
자, 어떠셨나요? splice() 메서드를 사용하면 배열에 요소를 추가하는 것이 얼마나 쉽고 다재다능한지 아시겠죠? 이제 여러분도 splice() 마스터가 되어 자바스크립트 배열을 자유자재로 다뤄보세요! 💪 다음에는 배열 요소를 삭제하고 교체하는 예시를 살펴볼 거예요. 기대해주세요! 😉
배열 요소 삭제 및 교체 예시
자, 이제 본격적으로 splice() 메서드를 사용해서 배열 요소를 삭제하고, 교체하는 마법 같은 기술을 보여드릴게요! ✨ 앞에서 기본적인 splice() 사용법은 익혔으니, 이제 실제 상황에서 어떻게 활용하는지 다양한 예시를 통해 알아보도록 하죠!
먼저, 기본적인 배열을 하나 만들어 볼게요. const myArray = ['apple', 'banana', 'cherry', 'date', 'elderberry']; 이렇게 다섯 가지 과일 이름을 가진 배열이에요. 이 배열을 가지고 놀아볼 거예요! 😄
1. 특정 위치의 요소 삭제하기
만약 ‘cherry’가 갑자기 싫어졌다면? 🍒 myArray.splice(2, 1); 이렇게 하면 ‘cherry’를 삭제할 수 있어요. 두 번째 인수인 ‘1’은 삭제할 요소의 개수를 의미해요. splice() 메서드는 원본 배열을 직접 수정한다는 점, 잊지 않으셨죠? 수정된 myArray는 ['apple', 'banana', 'date', 'elderberry']가 될 거예요.
2. 여러 개의 요소 삭제하기
‘banana’부터 ‘date’까지, 한꺼번에 여러 개의 과일을 삭제하고 싶다면 어떻게 해야 할까요? 🤔 myArray.splice(1, 3); 이렇게 하면 돼요! 첫 번째 인수 ‘1’은 시작 위치, 두 번째 인수 ‘3’은 삭제할 요소의 개수를 나타내요. 결과적으로 myArray는 ['apple', 'elderberry']만 남게 되겠죠?
3. 요소 교체하기
‘banana’를 ‘grape’로 바꾸고 싶다면? 🍇 myArray.splice(1, 1, 'grape'); 이렇게 하면 돼요. 세 번째 인수부터는 추가할 요소를 지정할 수 있는데, 여기서는 ‘grape’를 추가했어요. 동시에 두 번째 인수 ‘1’을 통해 ‘banana’를 삭제했기 때문에 결과적으로 ‘banana’가 ‘grape’로 교체된 거죠! 참 쉽죠? 😉 myArray는 이제 ['apple', 'grape', 'cherry', 'date', 'elderberry']가 되었어요.
4. 여러 개의 요소 교체하기
‘cherry’와 ‘date’를 ‘fig’와 ‘grapefruit’로 바꿔볼까요? myArray.splice(2, 2, 'fig', 'grapefruit'); 이렇게 하면 돼요! ‘cherry’와 ‘date’가 삭제되고, 그 자리에 ‘fig’와 ‘grapefruit’가 추가되었어요. myArray는 ['apple', 'banana', 'fig', 'grapefruit', 'elderberry']가 되었네요!
5. 삭제 없이 요소 추가하기
삭제는 하지 않고, 특정 위치에 요소를 추가하고 싶을 때도 splice()를 사용할 수 있어요. ‘banana’ 다음에 ‘coconut’을 추가해 볼까요? 🥥 myArray.splice(2, 0, 'coconut'); 두 번째 인수에 0을 넣으면 삭제 없이, 세 번째 인수부터 지정한 요소들이 추가돼요. myArray는 ['apple', 'banana', 'coconut', 'cherry', 'date', 'elderberry']가 되었어요!
6. 배열의 처음에 요소 추가하기
배열 맨 앞에 ‘apricot’을 추가하고 싶다면? 🍑 myArray.splice(0, 0, 'apricot'); 이렇게 하면 돼요. 시작 위치를 0으로 지정하고, 삭제할 요소 개수를 0으로 지정하면 맨 앞에 요소가 추가돼요. myArray는 ['apricot', 'apple', 'banana', 'cherry', 'date', 'elderberry']가 되었네요!
7. 배열의 끝에 요소 추가하기
배열 맨 끝에 ‘mango’를 추가해 볼까요? 🥭 myArray.splice(myArray.length, 0, 'mango'); 이렇게 시작 위치를 myArray.length로 지정하면 배열의 끝에 요소가 추가돼요. myArray는 ['apple', 'banana', 'cherry', 'date', 'elderberry', 'mango']가 되었어요! push() 메서드와 같은 기능이지만, splice()를 사용하면 배열의 어느 위치든 요소를 추가할 수 있다는 장점이 있죠! 💯
휴, 다양한 예시를 통해 splice() 메서드의 강력함을 느끼셨나요?! 💪 splice() 메서드 하나면 배열 요소 추가, 삭제, 교체, 뭐든지 가능해요! 마치 마법사가 된 기분이죠? 🧙♂️ 다음에는 더욱더 신기하고 재미있는 자바스크립트 이야기로 찾아올게요! 기대해 주세요! 😉
자, 이제 splice()와 slice()! 완벽하게 이해했죠? 처음엔 조금 헷갈릴 수 있지만, 몇 번 연습하다 보면 금방 손에 익을 거예요. 마치 새로운 친구를 사귀는 것처럼 말이죠! splice()는 배열 원본을 직접 수정하고, slice()는 사본을 만들어 돌려준다는 점, 꼭 기억해 두세요. 이 두 가지 메서드만 잘 활용하면 자바스크립트 배열 다루기는 식은 죽 먹기랍니다! 앞으로 코딩하면서 배열 때문에 힘들어하는 일은 없을 거예요. 이제 여러분의 멋진 자바스크립트 여정을 응원할게요! 궁금한 점이 있다면 언제든지 질문하세요. 도움이 될 수 있다면 정말 기쁠 거예요.