📘 8.3.2 목록 한 번에 정리하기 - 줄 서 있는 친구들 순서대로 부르기
어떤 오후였을까요. 여러분이 교실에서 친구들과 함께 앉아 있을 때, 선생님이 "줄을 서세요"라고 하시면 어떻게 하나요? 자연스럽게 한 줄로 서게 되죠.
그런데 생각해보세요. 그 줄에 서 있는 친구들을 각자의 자리로 배정하려면 어떻게 해야 할까요? 하나씩 하나씩 "첫 번째 친구는 이 자리, 두 번째 친구는 저 자리" 이렇게 해야 할까요?
자바스크립트에도 이런 상황이 있어요. 배열이라는 줄에 여러 값들이 순서대로 서 있을 때, 그 값들을 하나씩 변수로 만들어야 하는 경우 말이에요. 오늘은 그런 일을 훨씬 더 쉽고 자연스럽게 할 수 있는 방법을 배워볼 거예요.
🧠 먼저 용어를 알아볼까요?
아이들과 이야기할 때도 서로가 같은 말을 하고 있는지 확인하는 것이 중요하죠. 프로그래밍에서도 마찬가지예요.
| 용어 | 의미 |
|---|---|
| 배열 분해 할당 | 배열의 요소들을 순서대로 각각의 변수로 만드는 방법 |
| 구조 분해 | 복잡한 구조를 간단하게 풀어서 각 부분을 따로 사용하는 것 |
| 대괄호 문법 | [변수1, 변수2] 형태로 쓰는 특별한 방식 |
| 건너뛰기 | 필요 없는 요소는 빈 자리로 넘어가는 방법 |
| 나머지 수집 | 남은 모든 요소를 한꺼번에 가져오는 방법 |
이런 용어들을 알아두면 다른 사람과 이야기할 때도 훨씬 쉬워져요.
✨ 배열 분해 할당의 핵심 개념
배열 분해 할당이란 여러 개가 줄 서 있는 값들을 순서대로 각각의 이름을 가진 상자에 담는 일이에요.
예전에는 이렇게 해야 했어요:
let 첫번째 = 목록[0];
let 두번째 = 목록[1];
let 세번째 = 목록[2];하지만 이제는 이렇게 할 수 있어요:
let [첫번째, 두번째, 세번째] = 목록;한 줄로 같은 일을 할 수 있는 거죠. 마치 여러 개의 선물을 동시에 각자의 주인에게 전달하는 것 같아요.
비유로 이해하기: 소풍날의 점심 배급
이걸 더 쉽게 이해하기 위해 소풍날의 점심 배급 상황을 생각해볼까요?
여러분이 소풍을 가서 점심시간이 되었어요. 선생님이 도시락을 순서대로 나누어주려고 하는데, 아이들이 한 줄로 서 있어요. 맨 앞에 민호, 그 다음에 수진, 그 다음에 현우, 그 다음에 지은이가 서 있다고 해보죠.
보통의 점심 배급 방법은 이래요:
"줄에서 첫 번째 학생을 확인하고... 민호구나! 민호 도시락 여기!"
"줄에서 두 번째 학생을 확인하고... 수진이구나! 수진 도시락 여기!"
이런 식으로 하나씩 하나씩 확인해서 나누어주는 거죠.
하지만 효율적인 배급 시스템은 달라요! 선생님이 "민호, 수진, 현우, 지은이 순서로 도시락 받아!"라고 하면, 모든 아이들이 동시에 자신에게 맞는 도시락을 받는 거예요.
배열 분해 할당이 바로 이런 효율적인 배급 시스템과 같은 거예요!
let [민호도시락, 수진도시락, 현우도시락] = 줄서있는아이들;🎯 배열 분해 할당을 사용하는 이유
왜 이런 방법을 사용할까요?
첫째, 코드가 훨씬 간결해져요. 여러 요소를 사용할 때 일일이 배열[0], 배열[1] 이런 식으로 번호를 쓰지 않아도 되니까요.
둘째, 의도가 명확해져요. 코드를 보는 사람이 "아, 이 부분에서는 배열의 첫 번째와 세 번째 요소를 주로 사용하는구나"라는 것을 바로 알 수 있어요.
셋째, 값을 서로 바꾸는 것이 정말 쉬워져요. 두 변수의 값을 바꿀 때 복잡한 임시 변수 없이 [a, b] = [b, a] 한 줄로 끝낼 수 있어요.
넷째, 함수에서 여러 값을 받을 때 정말 유용해요. 함수가 배열로 여러 결과를 돌려주면, 그걸 바로 여러 변수로 나누어 받을 수 있거든요.
⚙️ 기본 문법 살펴보기
배열 분해 할당의 기본적인 사용 방법은 이래요.
기본 형태:
let [변수1, 변수2] = 배열;구체적인 예시:
let colors = ["빨강", "파랑", "노랑"];
let [first, second] = colors;
// 이제 first에는 "빨간", second에는 "파랑"이 들어있어요건너뛰기:
let [first, , third] = colors; // 두 번째는 건너뛰고 첫 번째와 세 번째만값 교환하기:
[a, b] = [b, a]; // a와 b의 값을 한 번에 바꾸기🧪 예제로 익혀보기
이제 실제 예제를 통해 배열 분해 할당을 어떻게 사용하는지 자세히 알아보겠어요.
🔹 예제 1: 기본 분해 할당 방법 익히기 - 과일 바구니 나누어주기
첫 번째 예제에서는 가장 기본적인 배열 분해 할당 방법을 배워보겠어요.
// 과일 바구니에 순서대로 들어있는 과일들
let fruitBasket = ["사과", "바나나", "오렌지", "포도", "딸기"];
console.log("과일 바구니 나누어주기!");
console.log("전체 과일:", fruitBasket);
// 기존 방법: 하나씩 인덱스로 꺼내기 (번거로움)
console.log("=== 기존 방법 ===");
let fruit1 = fruitBasket[0];
let fruit2 = fruitBasket[1];
let fruit3 = fruitBasket[2];
console.log("첫 번째 과일:", fruit1);
console.log("두 번째 과일:", fruit2);
console.log("세 번째 과일:", fruit3);
// 새로운 방법: 배열 분해 할당 (간단함!)
console.log("=== 분해 할당 방법 ===");
let [apple, banana, orange] = fruitBasket;
console.log("사과:", apple);
console.log("바나나:", banana);
console.log("오렌지:", orange);
// 처음 두 개만 필요한 경우
let [firstFruit, secondFruit] = fruitBasket;
console.log("처음 두 과일:", firstFruit + "와 " + secondFruit);이 과정을 단계별로 살펴보면, 먼저 여러 과일이 순서대로 들어있는 배열을 만들어요. 그다음 기존 방법으로 하나씩 인덱스를 사용해서 변수를 만들어보고, 배열 분해 할당으로 같은 일을 한 줄에 처리해보죠.
두 방법의 결과는 똑같지만 분해 할당 방법이 훨씬 간단하다는 걸 확인할 수 있어요.
이제 무언가 진정하다가 다시 시작되는 어떤 연습문제를 해보면 좋겠어요.
연습문제 1: 과일 바구니에서 분해하기
// 무지개 색깔들 순서대로
let rainbowColors = ["빨강", "주황", "노랑", "초록", "파랑"];
// 처음 두 색깔을 분해해보세요여러분이 직접 해보세요. 처음 두 색깔을 각각 다른 변수에 담아보세요.
🔹 예제 2: 건너뛰기와 선택적 분해하기 - 반장 선거 결과
두 번째 예제에서는 배열의 일부 요소만 선택해서 분해하는 방법을 알아보겠어요.
// 반장 선거 결과 (득표수 순서대로)
let electionResults = ["철수", "영희", "민수", "지수", "하늘"];
console.log("반장 선거 결과 발표!");
console.log("전체 후보자 순위:", electionResults);
// 상황 1: 1등과 3등만 필요한 경우 (2등은 건너뛰기)
console.log("=== 1등과 3등 확인 ===");
let [winner, , third] = electionResults;
console.log("1등 (반장):", winner);
console.log("3등:", third);
// 상황 2: 상위 3명만 필요한 경우
console.log("=== 상위 3명 시상 ===");
let [first, second, thirdPlace] = electionResults;
console.log("시상 대상자:");
console.log("금상:", first);
console.log("은상:", second);
console.log("동상:", thirdPlace);
// 상황 3: 마지막 두 명만 확인 (건너뛰기 활용)
console.log("=== 마지막 두 명 격려 ===");
let [, , , fourth, fifth] = electionResults;
console.log("격려 대상:");
console.log("4등:", fourth);
console.log("5등:", fifth);
console.log(fourth + "와 " + fifth + "도 정말 잘했어요!");이 예제를 통해 우리는 배열의 원하는 위치만 골라서 분해할 수 있다는 걸 배워요. 쉼표(,)를 사용해서 필요 없는 자리는 건너뛰고, 원하는 위치의 요소만 변수로 만들 수 있답니다.
🔹 예제 3: 값 교환의 편리함 - 게임 순위 바꾸기
세 번째 예제에서는 배열 분해 할당의 가장 멋진 활용법 중 하나인 값 교환을 알아보겠어요.
// 게임 대회 현재 순위
let player1 = "철수 (1등)";
let player2 = "영희 (2등)";
let player3 = "민수 (3등)";
console.log("게임 대회 순위 변동!");
console.log("=== 현재 순위 ===");
console.log("1위:", player1);
console.log("2위:", player2);
console.log("3위:", player3);
// 기존 방법: 임시 변수 사용해서 값 교환 (복잡함)
console.log("=== 1위와 2위 순위 바뀜! (기존 방법) ===");
let temp = player1;
player1 = player2;
player2 = temp;
console.log("교환 후 1위:", player1);
console.log("교환 후 2위:", player2);
// 새로운 방법: 배열 분해 할당으로 값 교환 (간단함!)
console.log("=== 1위와 3위 순위 바뀜! (분해 할당 방법) ===");
[player1, player3] = [player3, player1];
console.log("다시 교환 후 1위:", player1);
console.log("다시 교환 후 3위:", player3);
// 여러 값 동시 교환도 가능!
console.log("=== 모든 순위 섞기! ===");
[player1, player2, player3] = [player3, player1, player2];
console.log("최종 1위:", player1);
console.log("최종 2위:", player2);
console.log("최종 3위:", player3);이 예제는 배열 분해 할당의 진정한 편리함을 보여줘요. 기존에는 두 변수의 값을 바꾸려면 임시 변수가 필요했지만, 배열 분해 할당을 사용하면 [a, b] = [b, a] 한 줄로 끝낼 수 있어요.
심지어 여러 변수를 동시에 교환하는 것도 가능하답니다.
🧚♀️ 이야기로 다시 배우기: 학교 조회 시간의 줄서기
지금까지 배운 내용을 재미있는 이야기로 다시 정리해볼까요?
우리 학교에는 조회 시간 줄서기라는 특별한 시간이 있었어요. 이 시간에는 학생들이 효율적으로 순서대로 자리에 앉는 방법을 배웠답니다.
어느 날, 5명의 학생들이 운동장에 한 줄로 서 있었어요: 철수, 영희, 민수, 지수, 하늘 순서로 말이에요.
초보 선생님들은 자리 배정이 정말 번거로웠어요. "첫 번째 줄에 서 있는 학생을 확인하고... 철수구나! 철수는 A 테이블로!" 그다음 "두 번째 줄에 서 있는 학생을 확인하고... 영희구나! 영희는 B 테이블로!" 이런 식으로 하나씩 하나씩 확인해서 배정해야 했어요.
하지만 경험 많은 선생님들은 순서 배정 시스템을 알고 있었어요!
"배정 계획: 철수는 A테이블, 영희는 B테이블, 민수는 C테이블로!"
이 계획을 세우면 놀랍게도 학생들이 동시에 각자의 올바른 테이블로 이동하는 거예요!
더 신기한 건, 선택적 배정 시스템도 있었어요. "철수는 A테이블, 민수는 C테이블로!" 하면 영희는 건너뛰고 철수와 민수만 자리에 앉는 거죠.
그리고 가장 놀라운 것은 자리 바꾸기 시스템이었어요! "철수와 민수, 자리 바꾸기!" 하면 두 학생이 동시에 서로의 자리로 이동하는 거예요!
우리가 배운 배열 분해 할당도 이런 효율적인 줄서기 시스템과 똑같아요!
let [철수테이블, 영희테이블, 민수테이블] = 학생줄;한 줄이면 모든 학생이 순서대로 배정되는 거죠!
🧠 자주 하는 실수와 주의할 점
배열 분해 할당을 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있어요.
❌ 실수 1: 대괄호 빼먹기
// 동물원 동물들 순서
let animals = ["사자", "호랑이", "곰", "코끼리"];
// ❌ 틀린 방법: 대괄호 없이 시도
// let first, second = animals; // 문법 오류! 이렇게 하면 안돼요
// ✅ 올바른 방법: 대괄호 사용
let [first, second] = animals;
console.log("첫 번째 동물:", first);
console.log("두 번째 동물:", second);
// 나머지 동물들도 필요하면
let [lion, tiger, bear] = animals;
console.log("동물들:", lion, tiger, bear);배열 분해 할당에서는 반드시 대괄호 []를 사용해야 해요. 이 대괄호가 "이것은 배열 분해 할당이야!"라고 컴퓨터에게 알려주는 신호거든요!
❌ 실수 2: 순서 헷갈리기
// 점수 순위 (높은 순서대로)
let scores = [95, 87, 92];
// ❌ 잘못된 이해: 변수 이름과 실제 순서 헷갈림
let [lowest, middle, highest] = scores;
console.log("최고 점수라고 생각:", highest); // 실제로는 92 (세 번째 값)
console.log("최저 점수라고 생각:", lowest); // 실제로는 95 (첫 번째 값)
// ✅ 올바른 이해: 순서가 정말 중요해요!
let [actualFirst, actualSecond, actualThird] = scores;
console.log("진짜 첫 번째 점수:", actualFirst);
console.log("진짜 두 번째 점수:", actualSecond);
console.log("진짜 세 번째 점수:", actualThird);
// 올바른 의미의 변수명 사용
let [highest, second, third] = scores;
console.log("정말 최고 점수:", highest); 배열 분해 할당에서는 배열의 순서가 절대적이에요. 첫 번째 변수는 무조건 첫 번째 요소를 받아요!
❌ 실수 3: 빈 배열이나 짧은 배열에서 분해하려고 하기
// 빈 과일 바구니
let emptyBasket = [];
// 과일이 하나만 있는 바구니
let oneApple = ["사과"];
// ❌ 위험한 분해하기: 없는 요소까지 분해하려고 시도
let [fruit1, fruit2, fruit3] = emptyBasket;
console.log("첫 번째 과일:", fruit1); // undefined
console.log("두 번째 과일:", fruit2); // undefined
let [apple, banana] = oneApple;
console.log("사과:", apple);
console.log("바나나:", banana); // undefined (요소가 없음)
// ✅ 안전한 방법: 배열 길이 확인 후 분해하기
console.log("=== 안전한 분해하기 방법 ===");
if (emptyBasket.length >= 2) {
let [a, b] = emptyBasket;
console.log("과일들:", a, b);
} else {
console.log("과일이 부족해요! 현재 " + emptyBasket.length + "개");
}
// 필요한 만큼만 분해하기
if (oneApple.length >= 1) {
let [onlyApple] = oneApple;
console.log("유일한 과일:", onlyApple);
}배열에 없는 요소를 분해하려고 하면 undefined가 나와요. 항상 배열에 충분한 요소가 있는지 확인하는 습관을 기르세요!
✏️ 연습문제로 개념 다지기
연습문제를 시작하기 전에 잠시 멈춰서 생각해볼까요. 여러분이 학교에서 체육시간에 줄을 설 때를 떠올려보세요. 선생님이 "앞에서부터 세 명씩 나와서 각자 공 하나씩 들고 오세요"라고 하시면, 여러분은 자연스럽게 순서대로 나가서 공을 받아오죠. 프로그래밍에서도 이렇게 순서가 중요한 일들이 많아요.
Ex1) 색깔 목록에서 첫 번째와 두 번째 색깔을 분해해보자
// 무지개 색깔들 순서대로
let rainbowColors = ["빨강", "주황", "노랑", "초록", "파랑"];
// 처음 두 색깔만 대괄호로 분해해보세요
let [first, second] = rainbowColors;
console.log("첫 번째 색깔:", first);
console.log("두 번째 색깔:", second); Ex2) 숫자 목록에서 첫 번째와 세 번째만 가져와보자
// 시험 점수들 (순서대로)
let testScores = [85, 92, 78, 95];
// 첫 번째와 세 번째 점수만 분해해보세요 (두 번째는 건너뛰기)
let [first, , third] = testScores;
console.log("첫 번째 점수:", first);
console.log("세 번째 점수:", third); Ex3) 두 변수의 값을 한 번에 교환해보자
// 현재 두 친구의 자리
let seatA = "철수";
let seatB = "영희";
console.log("교환 전 - A자리:", seatA, "B자리:", seatB);
// 배열 분해 할당으로 자리 바꾸기
[seatA, seatB] = [seatB, seatA];
console.log("교환 후 - A자리:", seatA, "B자리:", seatB);🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 이해도를 확인해보겠어요.
Q1. 다음 코드의 실행 결과를 예상해보세요
let fruits = ["사과", "바나나"];
let [apple, banana, orange] = fruits;
console.log(apple);
console.log(banana);
console.log(orange);정답:
- "사과"
- "바나나"
- undefined
해설: 배열에 세 번째 요소가 없어서 orange 변수는 undefined가 돼요. 에러는 나지 않지만 값이 없다는 뜻이에요!
Q2. 다음 중 올바른 배열 분해 할당 문법은?
let items = ["책", "펜", "지우개"];
// A) let book, pen = items;
// B) let [book, pen] = items;
// C) let {book, pen} = items;
// D) let (book, pen) = items;정답: B) let [book, pen] = items;
해설: 배열을 분해할 때는 반드시 대괄호 []를 사용해야 해요. 중괄호 {}는 객체를 분해할 때 사용하는 문법이에요!
📝 7단원 복습 문제 - 배열을 잊지 말아요!
8단원을 배우는 여러분이 7단원 내용을 잊지 않도록 복습 문제를 준비했어요!
복습 문제 1: 숫자 배열에서 특정 값 찾기
// 우리 반 시험 점수들
let scores = [85, 92, 78, 95, 88];
// includes로 특정 점수가 있는지 확인해보세요
let hasScore95 = scores.includes(95);
let hasScore100 = scores.includes(100);
console.log("95점이 있나요?", hasScore95);
console.log("100점이 있나요?", hasScore100);
// indexOf로 특정 점수의 위치 찾기
let indexOf92 = scores.indexOf(92);
console.log("92점의 위치:", indexOf92); 해설: includes()는 배열에 특정 값이 있는지 true/false로 알려주고, indexOf()는 특정 값의 인덱스 위치를 알려줘요. 없는 값이면 -1을 반환해요!
복습 문제 2: 배열 요소들을 하나씩 처리하기
// 좋아하는 과일들
let fruits = ["사과", "바나나", "오렌지"];
console.log("forEach로 과일 하나씩 출력:");
// forEach로 배열의 모든 요소를 하나씩 처리하기
fruits.forEach(function(fruit, index) {
console.log((index + 1) + "번째 과일: " + fruit);
});
// 위 코드의 결과:
// 1번째 과일: 사과
// 2번째 과일: 바나나
// 3번째 과일: 오렌지해설: forEach()는 배열의 모든 요소를 하나씩 꺼내서 함수로 처리할 때 사용해요. 각 요소(fruit)와 그 위치(index)를 함수에서 받을 수 있어요!
지금까지 배열 분해 할당을 자세히 배워보았어요. 이제 여러분도 효율적으로 배열을 다룰 수 있게 되었어요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 배열 분해 할당의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 건너뛰기와 선택적 분해 | ✅ |
| 값 교환하기 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 7단원 배열 복습 | ✅ |
🔄 배열 분해 할당 사용 과정 정리
지금까지 배운 내용을 단계별로 정리해보겠어요.
첫 번째 단계는 분해 계획 세우기입니다. 배열에서 어떤 위치의 요소들이 필요한지, 어떤 순서로 변수를 만들지 미리 생각해보세요.
두 번째는 패턴 작성 단계입니다. let [변수1, 변수2] = 배열 형태로 대괄호를 사용해서 순서에 맞춰 변수들을 나열해요.
세 번째는 건너뛰기 활용 단계입니다. 필요 없는 위치는 쉼표로 빈 자리를 만들어서 건너뛸 수 있어요.
마지막으로 변수 활용 단계입니다. 분해가 완료되면 각 요소가 순서대로 변수가 되어서, 배열[인덱스] 대신 간단한 변수 이름으로 사용할 수 있어요.
📂 마무리 정보
오늘 배운 8.3.2 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'8. 정보 꾸러미 만들기 (객체) > 8.3 구조 분해 할당' 카테고리의 다른 글
| 8.3.3 예비값과 별명 사용하기 - 안전한 선물 받기와 예쁜 이름 짓기 (0) | 2025.07.11 |
|---|---|
| 8.3.1 정보 상자 한 번에 정리하기 - 물건들을 한 번에 정리하는 방법 (0) | 2025.07.11 |