📘 7.2.3 앞에 추가하기 (unshift) - 맨 앞에 새로운 값 넣기
push와 pop에 대한 이야기를 나누었던 지난 시간이 아직도 생생합니다. 그때 우리는 배열의 뒤에서 값을 넣고 빼는 방법을 배웠습니다. 이번에는 그와는 반대편 이야기를 해보려 합니다. 배열의 맨 앞에 새로운 값을 넣어주는 unshift라는 기능에 대해서 말이지요.
생각해보면 참 흥미로운 일입니다. 줄을 서 있는 사람들 앞에 누군가 새로 들어오는 모습을 말이에요. 모든 사람들이 자연스럽게 한 자리씩 뒤로 물러나면서 새로운 사람에게 맨 앞자리를 내어주는 것처럼, unshift도 그런 방식으로 작동합니다.
unshift라는 이름은 처음 들으면 조금 낯설 수 있습니다. 하지만 이 안에는 "shift"라는 단어가 들어있지요. 이동한다는 뜻입니다. 그리고 앞에 붙은 "un"은 반대를 의미합니다. 즉, push와는 반대 방향으로 이동하면서 값을 넣어준다는 뜻이 담겨있습니다.
이 기능을 배우면 우리는 중요한 것, 우선순위가 높은 것들을 배열의 맨 앞에 배치할 수 있게 됩니다. 마치 도서관에서 새로 들어온 중요한 책을 눈에 잘 띄는 맨 앞쪽에 진열하는 것처럼요.
🧠 새로운 말들과 친해지기
새로운 개념들을 만날 때면, 어려운 단어들이 우리를 멀어지게 하지 않았으면 좋겠습니다. 그래서 이렇게 정리해보았습니다.
| 단어 | 따뜻한 설명 |
|---|---|
| unshift | 배열의 맨 앞에 새로운 값을 조심스럽게 넣어주는 기능입니다. |
| 인덱스 이동 | 새로운 값이 앞에 들어오면서 기존 값들의 자리 번호가 하나씩 뒤로 밀리는 현상입니다. |
| 반환값 | unshift를 사용한 후 배열이 우리에게 알려주는 새로운 크기입니다. |
✨ unshift가 가진 특별함
unshift는 push와 완벽한 한 쌍을 이룹니다. push가 배열의 뒤에서 값을 추가해주는 역할이라면, unshift는 배열의 앞에서 값을 추가해주는 역할을 합니다.
unshift의 가장 흥미로운 점은 새로운 값이 앞에 들어올 때 기존에 있던 모든 값들이 자동으로 한 자리씩 뒤로 이동한다는 것입니다. 이는 마치 극장에서 늦게 온 손님을 위해 모든 관객들이 자연스럽게 한 자리씩 옆으로 이동해주는 것과 같습니다.
push처럼 unshift도 여러 개의 값을 한 번에 추가할 수 있고, 작업을 마친 후에는 변경된 배열의 새로운 크기를 돌려줍니다. 이런 특징들 덕분에 배열의 앞쪽에 중요한 정보나 최신 정보를 배치할 때 매우 유용합니다.
일상의 모습: 우리집 신문 배달함
unshift를 더 쉽게 이해하기 위해 일상 속 이야기를 해보겠습니다.
우리집 문 앞에 신문을 받는 작은 통이 있다고 생각해보세요. 이 통에는 지금까지 배달된 신문들이 차례로 쌓여있습니다.
매일 아침 새로운 신문이 배달되면, 배달원 아저씨는 새 신문을 기존 신문들 위에 올려놓지 않습니다. 대신 맨 앞쪽에 조심스럽게 끼워넣어 주시지요. 그러면 어떻게 될까요?
기존에 있던 신문들이 모두 자연스럽게 한 자리씩 뒤로 밀려납니다. 어제 신문은 오늘 신문 뒤로, 그제 신문은 어제 신문 뒤로 이동하면서 새로운 신문이 맨 앞자리를 차지하게 됩니다.
이렇게 하면 우리는 항상 가장 최신 신문을 맨 앞에서 쉽게 찾을 수 있고, 필요하면 뒤쪽에 있는 예전 신문들도 순서대로 찾아볼 수 있습니다.
unshift가 하는 일이 바로 이런 것입니다. 새로운 값에게 가장 중요한 맨 앞자리를 내어주고, 기존 값들은 정중하게 한 자리씩 뒤로 물러나게 하는 것이지요.
🎯 unshift를 사용하는 이유
unshift가 왜 필요한지 생각해보면, 우리 일상과 많이 닮아있습니다.
가장 대표적인 경우는 최신 정보를 맨 앞에 배치하는 것입니다. 뉴스 목록이나 게시판에서 가장 새로운 글이 항상 맨 위에 나타나도록 할 때 unshift를 사용합니다.
또한 우선순위가 높은 작업을 할 일 목록의 맨 앞에 추가하거나, 중요한 공지사항을 알림 목록의 최상단에 배치할 때도 활용됩니다.
게임에서는 최고 점수를 점수 순위표의 맨 앞에 추가하거나, 새로 획득한 중요한 아이템을 인벤토리의 가장 앞쪽에 배치할 때도 사용됩니다.
무엇보다 unshift를 이해하면 push와 함께 사용하여 배열의 양쪽 끝을 자유롭게 조작할 수 있게 되어, 더욱 유연하고 다양한 프로그램을 만들 수 있습니다.
⚙️ unshift 사용법 천천히 살펴보기
unshift의 사용법은 push와 매우 비슷하지만, 값이 추가되는 위치가 반대입니다.
기본적인 사용법:
배열이름.unshift(새로운값);여러 값을 한 번에 추가할 때:
배열이름.unshift(값1, 값2, 값3);새로운 크기를 받고 싶을 때:
let 새크기 = 배열이름.unshift(새로운값);기억해둘 특징들:
- unshift는 항상 배열의 맨 앞에 값을 추가합니다
- 새로운 값이 추가되면서 기존 값들의 인덱스가 모두 1씩 증가합니다
- 원래 배열이 직접 변경되어 크기가 늘어납니다
- 추가된 후의 새로운 배열 크기를 돌려줍니다
🧪 실제로 사용해보기
이제 실제 예제들을 통해 unshift가 어떻게 작동하는지 차근차근 살펴보겠습니다.
🔹 예제 1: 우리 반 줄서기
체육시간에 줄을 서 있는 상황에서 새로 온 전학생을 맨 앞에 세우는 과정을 따라해보겠습니다.
// 체육시간에 우리 반 친구들이 줄을 서 있습니다
let classLine = ["철수", "영희", "민수"];
// 처음 줄서기 상황을 확인해봅시다
console.log("처음 줄서기:", classLine);
console.log("맨 앞 친구:", classLine[0]); // 0번 자리에 있는 친구를 확인합니다
console.log("두 번째 친구:", classLine[1]); // 1번 자리에 있는 친구를 확인합니다
// 새로 온 전학생 지수를 맨 앞에 세워줍니다
let newLength = classLine.unshift("지수"); // 지수를 맨 앞 자리에 넣습니다
// 변경된 줄서기 상황을 확인해봅시다
console.log("전학생 추가 후:", classLine);
console.log("이제 맨 앞 친구:", classLine[0]); // 지수가 될 것입니다
console.log("두 번째가 된 친구:", classLine[1]); // 철수가 밀려났을 것입니다
console.log("전체 친구 수:", newLength);
// 모든 친구들의 새로운 위치를 확인해봅시다
console.log("1번째:", classLine[0]); // 지수
console.log("2번째:", classLine[1]); // 철수 (원래 0번이었습니다)
console.log("3번째:", classLine[2]); // 영희 (원래 1번이었습니다)
console.log("4번째:", classLine[3]); // 민수 (원래 2번이었습니다)이 예제를 통해 unshift의 핵심 동작을 확인할 수 있습니다. 새로운 값이 맨 앞에 추가되고, 기존 값들의 위치 번호가 모두 1씩 증가하며, 배열의 크기도 함께 늘어나는 것을 볼 수 있습니다.
🔹 예제 2: 오늘 할 일 목록에 긴급한 일 추가하기
일상생활에서 자주 경험하는 상황인 할 일 목록에 갑자기 긴급한 일이 생겼을 때를 상상해보겠습니다.
// 오늘 할 일 목록이 이미 있습니다
let todoList = ["숙제하기", "책읽기", "친구와 놀기"];
// 현재 할 일 목록을 확인해봅시다
console.log("원래 할 일들:", todoList);
console.log("첫 번째 할 일:", todoList[0]);
// 갑자기 엄마가 "심부름 다녀와!" 하셨습니다 (긴급!)
todoList.unshift("심부름 가기"); // 긴급한 일을 맨 앞에 추가합니다
// 변경된 할 일 목록을 확인해봅시다
console.log("긴급 일 추가 후:", todoList);
console.log("이제 첫 번째 할 일:", todoList[0]); // 심부름이 될 것입니다
// 또 갑자기 "양치하는 것도 잊었네!" 하며 추가해봅시다
todoList.unshift("양치하기"); // 또 다른 긴급한 일을 맨 앞에 추가합니다
// 최종 할 일 목록을 확인해봅시다
console.log("최종 할 일 목록:", todoList);
console.log("가장 먼저 할 일:", todoList[0]); // 양치하기
console.log("두 번째로 할 일:", todoList[1]); // 심부름 가기
console.log("세 번째로 할 일:", todoList[2]); // 숙제하기 (원래 0번이었습니다)
console.log("전체 할 일 개수:", todoList.length); 이 예제를 통해 실생활에서 unshift가 어떻게 유용한지 이해할 수 있습니다. 우선순위가 높은 일이나 긴급한 일을 기존 목록의 맨 앞에 추가하여 먼저 처리하도록 관리할 수 있습니다.
🔹 예제 3: 여러 개의 값을 한 번에 앞에 추가하기
unshift의 강력한 기능 중 하나인 여러 개의 값을 동시에 추가하는 방법을 살펴보겠습니다.
// 우리 반 친구들의 좋아하는 색깔 목록이 있습니다
let favoriteColors = ["파란색", "노란색"];
// 처음 색깔 목록을 확인해봅시다
console.log("처음 색깔들:", favoriteColors);
console.log("첫 번째 색깔:", favoriteColors[0]);
// 새로 온 친구들이 좋아하는 색깔 2개를 한 번에 앞에 추가해봅시다
let newLength = favoriteColors.unshift("빨간색", "초록색"); // 두 색깔을 동시에 맨 앞에 추가합니다
// 변경된 색깔 목록을 확인해봅시다
console.log("친구들 추가 후:", favoriteColors);
console.log("이제 첫 번째 색깔:", favoriteColors[0]); // 빨간색
console.log("이제 두 번째 색깔:", favoriteColors[1]); // 초록색
console.log("이제 세 번째 색깔:", favoriteColors[2]); // 파란색 (원래 0번이었습니다)
console.log("이제 네 번째 색깔:", favoriteColors[3]); // 노란색 (원래 1번이었습니다)
console.log("전체 색깔 개수:", newLength);
// push와 비교해봅시다
let animalsPush = ["고양이", "강아지"]; // push 비교용 배열
let animalsUnshift = ["고양이", "강아지"]; // unshift 비교용 배열
animalsPush.push("토끼"); // 뒤에 토끼를 추가합니다
animalsUnshift.unshift("토끼"); // 앞에 토끼를 추가합니다
console.log("push 사용 결과:", animalsPush); // 뒤에 추가됨
console.log("unshift 사용 결과:", animalsUnshift); // 앞에 추가됨이 예제를 통해 unshift로 여러 값을 동시에 추가할 때의 순서와 push와의 차이점을 명확히 이해할 수 있습니다.
🔄 unshift 사용하는 과정 정리하기
지금까지의 경험을 바탕으로 unshift를 사용하는 과정을 정리해보겠습니다.
먼저 배열을 준비합니다. 값이 들어있는 기존 배열을 준비하고 현재 상태를 확인합니다.
다음으로 값 추가를 실행합니다. 배열이름.unshift(값) 형태로 맨 앞에 새로운 값을 추가합니다.
그리고 인덱스 변화를 확인합니다. 기존 값들이 모두 한 자리씩 뒤로 밀려나면서 인덱스가 변경되는 것을 확인합니다.
마지막으로 결과를 확인합니다. 새로운 배열의 상태와 크기를 점검합니다.
이 과정을 반복하면서 unshift의 동작 원리를 완전히 이해하고, push와 함께 사용하여 배열의 양쪽 끝을 자유자재로 조작할 수 있게 됩니다.
🧚♀️ 일상 속 이야기: 우리 동네 버스 정류장
지금까지 배운 내용을 하나의 이야기로 다시 정리해보겠습니다.
우리 동네 버스 정류장에는 특별한 규칙이 있었습니다. 사람들이 줄을 서서 버스를 기다리는데, 때때로 급한 일이 있는 분들이 오시면 그 분들을 맨 앞에 세워드리는 것이었습니다.
어느 날 오후, 정류장에는 학생 세 명이 차례로 줄을 서 있었습니다. 첫 번째에는 중학생 은지, 두 번째에는 고등학생 민호, 세 번째에는 대학생 수진이가 서 있었습니다.
그때 병원에 급히 가야 하는 할머니가 오셨습니다. 사람들은 자연스럽게 할머니를 맨 앞에 모셨습니다. 그러자 은지는 두 번째로, 민호는 세 번째로, 수진이는 네 번째로 자리를 옮겼습니다.
조금 후에는 아픈 아이를 안고 있는 엄마가 오셨습니다. 사람들은 또다시 자연스럽게 그 엄마를 맨 앞에 모셨습니다. 이번에는 할머니가 두 번째로, 은지는 세 번째로, 민호는 네 번째로, 수진이는 다섯 번째로 자리를 옮겼습니다.
신기한 것은 아무도 불평하지 않았다는 것입니다. 모든 사람들이 자연스럽게 한 자리씩 뒤로 물러나면서 더 급한 분들에게 자리를 내어드렸습니다.
unshift가 하는 일이 바로 이런 것입니다. 새로운 값에게 가장 중요한 맨 앞자리를 내어주고, 기존 값들은 정중하게 한 자리씩 뒤로 물러나게 하는 것이지요.
🧠 주의할 점들
unshift를 사용할 때 가끔 실수하는 부분들을 미리 알아두면 도움이 됩니다.
❌ 실수 1: push와 unshift 헷갈리기
가장 많이 하는 실수는 어디에 값을 추가하고 싶은지 헷갈리는 것입니다.
let fruits = ["바나나", "오렌지"];
// ❌ 잘못된 예: 앞에 추가하고 싶은데 push를 사용
fruits.push("사과"); // 뒤에 추가됩니다
console.log(fruits); // ["바나나", "오렌지", "사과"] - 사과가 뒤에!
// ✅ 올바른 예: 앞에 추가하려면 unshift 사용
let colors = ["파란색", "노란색"];
colors.unshift("빨간색"); // 앞에 추가됩니다
console.log(colors); // ["빨간색", "파란색", "노란색"] - 빨간색이 앞에!기억하는 방법: push는 "밀어넣다"라는 뜻으로 뒤로 밀어넣는 것이고, unshift는 맨 앞에 "끼어들기"라고 생각하면 됩니다.
❌ 실수 2: 인덱스 변화를 잊어버리기
unshift 후에 기존 값들의 인덱스가 바뀐다는 것을 잊고 원래 인덱스로 접근하려는 실수가 자주 발생합니다.
let students = ["철수", "영희"];
console.log("원래 첫 번째 학생:", students[0]); // "철수"
// ❌ 잘못된 생각: unshift 후에도 철수가 여전히 0번째일 거라고 생각
students.unshift("민수");
console.log("unshift 후 0번째:", students[0]); // "민수" (철수가 아닙니다!)
// ✅ 올바른 이해: 철수는 이제 1번째로 이동했습니다
console.log("unshift 후 1번째:", students[1]); // "철수" (여기로 이동)❌ 실수 3: 반환값을 잘못 이해하기
unshift의 반환값이 무엇인지 정확히 알지 못해서 생기는 실수입니다.
let animals = ["고양이"];
// ❌ 잘못된 생각: 추가한 값이 반환될 거라고 생각
let result = animals.unshift("강아지");
console.log("반환값:", result); // 2 (크기가 반환됩니다, "강아지"가 아닙니다!)
// ✅ 올바른 이해: unshift는 새로운 배열 크기를 반환합니다
console.log("새로운 크기:", result); // 2
console.log("변경된 배열:", animals); // ["강아지", "고양이"]
console.log("추가된 동물:", animals[0]); // "강아지"✏️ 연습문제로 실력 기르기
문제를 풀어보면서 unshift에 대한 이해를 더욱 깊게 만들어보겠습니다.
연습문제를 풀 때마다 마치 새로운 작은 실험을 하는 것 같습니다. 코드를 한 줄씩 써보면서 예상과 결과를 비교해보는 과정에서 진정한 이해가 생겨나는 것 같습니다.
Q1. 숫자 배열의 맨 앞에 새로운 숫자를 추가하고 결과를 확인해보세요.
여러분만의 숫자 이야기를 만들어보세요. unshift를 사용해서 숫자 1을 맨 앞에 추가해보세요.
정답을 확인해보세요
let numbers = [2, 3, 4];
console.log("처음 숫자들:", numbers);
// 맨 앞에 1을 추가해보세요
numbers.unshift(1);
console.log("변경된 숫자들:", numbers);
console.log("첫 번째 숫자:", numbers[0]);Q2. 동물 배열에 여러 동물을 한 번에 앞에 추가해보세요.
unshift에 여러 값을 쉼표로 구분해서 넣을 수 있다는 것을 실험해보세요.
정답을 확인해보세요
let animals = ["토끼", "햄스터"];
console.log("처음 동물들:", animals);
// 맨 앞에 "강아지"와 "고양이"를 동시에 추가해보세요
animals.unshift("강아지", "고양이");
console.log("변경된 동물들:", animals);
console.log("총 동물 수:", animals.length);Q3. push와 unshift의 차이를 직접 확인해보세요.
같은 배열을 두 개 만들어서 하나는 push, 하나는 unshift를 사용해보세요.
정답을 확인해보세요
let fruits1 = ["바나나", "오렌지"];
let fruits2 = ["바나나", "오렌지"];
console.log("처음 상태:", fruits1);
// fruits1에는 push로 "사과" 추가
fruits1.push("사과");
// fruits2에는 unshift로 "사과" 추가
fruits2.unshift("사과");
console.log("push 결과:", fruits1);
console.log("unshift 결과:", fruits2);🤔 조금 더 깊이 생각해보기
기본적인 연습을 마친 후에는 조금 더 깊이 있는 문제들을 통해 unshift에 대한 이해를 확인해보겠습니다.
Q1. 다음 코드의 실행 결과를 예상해보세요.
let arr = ["A", "B", "C"];
console.log("처음:", arr);
arr.unshift("X");
console.log("X 추가 후:", arr);
arr.unshift("Y", "Z");
console.log("Y, Z 추가 후:", arr);
console.log("A의 현재 위치:", arr[3]);정답:
- 처음: ["A", "B", "C"]
- X 추가 후: ["X", "A", "B", "C"]
- Y, Z 추가 후: ["Y", "Z", "X", "A", "B", "C"]
- A의 현재 위치: "A" (3번째 자리로 이동)
설명: unshift로 값을 추가할 때마다 기존 값들이 뒤로 밀려나므로, A는 처음 0번째에서 → 1번째 → 3번째로 계속 이동합니다.
Q2. unshift와 pop을 함께 사용해서 "앞에서 넣고 뒤에서 빼기" 시스템을 만들어보세요.
정답을 확인해보세요
let queue = []; // 빈 대기열로 시작합니다
console.log("📝 대기열 시스템 실험");
// 사람들을 대기열 앞에 추가하기 (unshift)
console.log("\n사람 추가하기:");
queue.unshift("철수");
console.log("철수 추가:", queue);
queue.unshift("영희");
console.log("영희 추가:", queue);
queue.unshift("민수");
console.log("민수 추가:", queue);
// 사람들을 대기열 뒤에서 빼기 (pop)
console.log("\n서비스 받기:");
while(queue.length > 0) {
let person = queue.pop();
console.log("서비스 받는 사람:", person, "/ 남은 사람들:", queue);
}
console.log("\n🎯 결론: 먼저 온 사람이 먼저 서비스를 받았습니다!");설명: unshift로 앞에서 값을 추가하고 pop으로 뒤에서 값을 제거하면 "선입선출" 구조가 만들어집니다. 이는 실제 은행 대기줄과 같은 원리입니다.
📚 이전 단원들과 함께 복습하기
7단원까지 공부한 내용들을 다시 떠올려보면서 unshift와 함께 사용해보겠습니다.
복습 1) 함수와 배열 함께 사용하기 (5-7단원 복습)
// 배열에 안전하게 값을 앞에 추가하는 함수를 만들어보세요
function addToFront(array, newValue) {
if(newValue !== undefined && newValue !== null) {
array.unshift(newValue);
return true;
} else {
console.log("추가할 값이 올바르지 않습니다");
return false;
}
}
let testArray = ["바나나", "오렌지"];
let success = addToFront(testArray, "사과");
console.log("추가 성공:", success); // 이 결과는 무엇일까요?
console.log("배열 상태:", testArray);정답: "추가 성공: true"와 "배열 상태: ['사과', '바나나', '오렌지']"가 출력됩니다.
설명: 함수에서 조건문으로 값의 유효성을 검사한 후, 유효한 경우에만 unshift로 배열 앞에 추가하고 성공 여부를 돌려줍니다.
복습 2) 반복문과 조건문 함께 사용하기 (3-4단원 복습)
// for문을 사용해서 홀수만 배열 앞에 추가하는 코드를 작성해보세요
let oddNumbers = [];
for(let i = 1; i <= 10; i++) {
if(i % 2 === 1) {
oddNumbers.unshift(i); // 홀수를 앞에 추가합니다
}
}
console.log("홀수 목록:", oddNumbers);
console.log("홀수 개수:", oddNumbers.length);정답: "홀수 목록: [9, 7, 5, 3, 1]"과 "홀수 개수: 5"가 출력됩니다.
오늘 우리는 unshift라는 기능을 통해 배열의 맨 앞에 새로운 값들을 추가하는 방법을 배웠습니다. 마치 줄을 서 있는 사람들 앞에 누군가 새로 들어와서 모든 사람들이 자연스럽게 한 자리씩 뒤로 물러나는 것처럼, unshift도 그런 자연스러운 방식으로 작동한다는 것을 느꼈기를 바랍니다.
이제 여러분은 push, pop, unshift를 자유자재로 조합해서 배열의 앞과 뒤에서 값을 넣고 빼는 완벽한 시스템을 만들 수 있게 되었습니다. 마치 숙련된 도서관 사서가 된 것처럼, 정보들을 적절한 위치에 배치하고 관리할 수 있는 능력을 갖추게 된 것입니다.
다음 시간에는 배열의 맨 앞에서 값을 제거하는 방법에 대해서도 이야기해보겠습니다. 오늘도 함께 해주어서 고맙습니다.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 차근차근 확인해보세요.
| 학습 내용 | 확인 |
|---|---|
| unshift의 기본 개념 이해하기 | ☐ |
| 기본 사용법과 문법 익히기 | ☐ |
| 인덱스 변화 이해하기 | ☐ |
| push와 unshift 차이 알기 | ☐ |
| 여러 값 동시 추가하기 | ☐ |
📂 마무리 정보
오늘 배운 7.2.3 내용이 여러분의 마음에 잘 자리 잡았나요? 다음 시간에도 함께 새로운 이야기를 써내려가겠습니다.
기억해둘 점: 오늘 배운 내용을 꼭 직접 써보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 천천히 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'7. 여러 개 모아두기 (배열) > 7.2 배열에 넣고 빼기' 카테고리의 다른 글
| 7.2.4 배열의 맨 앞에서 값 꺼내기 - shift() (0) | 2025.07.08 |
|---|---|
| 7.2.2 뒤에서 빼기 (pop) - 마지막 것을 쏙 꺼내는 방법 (0) | 2025.07.08 |
| 7.2.1 뒤에 추가하기 (push) - 자동 확장 목록 만들기 (0) | 2025.07.08 |