7.3.1 배열 안에 몇 개나 들어있을까? - length 속성
📘 7.3.1 배열 안에 몇 개나 들어있을까? - length 속성
push, pop, unshift, shift와 함께한 시간들이 이어져 왔습니다. 값을 넣고, 빼고, 다시 넣고, 다시 빼면서 배열이 변해가는 모습을 지켜보았습니다. 이제 우리는 하나의 자연스러운 질문에 답해야 할 때가 온 것 같습니다. "이 배열 안에 도대체 몇 개나 들어있을까?"
length라는 속성은 참으로 직관적인 이름을 가지고 있습니다. 영어로 길이를 뜻하지만, 배열에서는 물리적인 길이가 아니라 들어있는 요소의 개수를 의미합니다. 마치 서랍 안에 들어있는 물건의 개수를 세는 것처럼, 자연스럽고 필요한 일이지요.
이 속성을 이해하면 우리는 배열이 비어있는지 확인할 수 있고, 사용자에게 몇 개의 항목이 있는지 알려줄 수 있고, 배열의 마지막 값에도 쉽게 접근할 수 있게 됩니다. 일상에서 가방 안에 몇 개의 연필이 들어있는지 세는 것처럼 자연스럽고 유용한 기능입니다.
🧠 새로운 말들과 친해지기
새로운 개념을 만날 때마다, 어려운 단어들이 우리를 멀어지게 하지 않았으면 좋겠습니다. 그래서 이렇게 정리해보았습니다.
| 단어 | 따뜻한 설명 |
|---|---|
| length | 배열에 들어있는 요소의 개수를 나타내는 정보입니다. |
| 속성 | 객체나 배열이 가지고 있는 정보로, 함수가 아니므로 ()를 붙이지 않습니다. |
| 요소 개수 | 배열 안에 실제로 들어있는 값들의 총 개수를 말합니다. |
✨ length가 가진 특별함
length는 배열의 자동 계수기 같은 역할을 합니다. 배열에 값을 추가하거나 제거할 때마다, 우리가 별도로 신경 쓰지 않아도 length가 자동으로 개수를 정확히 세어줍니다.
length의 가장 중요한 특징은 항상 실시간으로 업데이트된다는 것입니다. push로 값을 하나 추가하면 length가 1 증가하고, pop으로 값을 하나 제거하면 length가 1 감소합니다. 이는 완전히 자동으로 이루어지므로 우리는 항상 정확한 개수를 믿고 사용할 수 있습니다.
또한 length는 특별한 기능이 아닌 속성입니다. 따라서 push나 pop처럼 뒤에 ()를 붙이지 않고, 그냥 배열이름.length처럼 사용합니다.
일상의 모습: 우리집 책장
length 속성을 더 쉽게 이해하기 위해 일상 속 이야기를 해보겠습니다.
우리집 책장을 생각해보세요. 이 책장에는 디지털 화면이 붙어있어서 책장 안에 책이 몇 권 들어있는지 항상 정확히 보여준다고 상상해보겠습니다.
새로운 책을 책장에 넣으면 화면 숫자가 자동으로 하나씩 올라가고, 책을 꺼내면 숫자가 자동으로 하나씩 내려갑니다. 우리가 직접 세지 않아도 책장이 스스로 개수를 기억하고 있는 것이지요.
가장 좋은 점은 이 화면이 절대 틀리지 않는다는 것입니다. 책을 넣고 빼고 하는 모든 과정을 완벽하게 추적해서, 언제나 정확한 개수를 알려줍니다.
심지어 친구가 와서 책장을 보고도 "책이 20권 들어있네!"라고 바로 알 수 있습니다. 일일이 책장을 열어서 하나하나 셀 필요가 없지요.
length 속성이 하는 일이 바로 이런 것입니다. 배열이라는 스마트한 상자가 자동으로 들어있는 값들의 개수를 세어주는 것이지요.
🎯 length를 사용하는 이유
length 속성은 배열을 다룰 때 정말 많은 곳에서 유용하게 사용됩니다.
가장 기본적으로는 배열이 비어있는지 확인할 때 사용합니다. length가 0이면 빈 배열이고, 0보다 크면 값이 들어있는 배열이라는 것을 즉시 알 수 있습니다.
또한 배열의 마지막 요소에 접근할 때도 length를 활용합니다. 배열의 마지막 인덱스는 항상 length - 1이므로, 배열이 얼마나 크든 상관없이 마지막 요소를 쉽게 찾을 수 있습니다.
마지막으로 사용자에게 정보를 보여줄 때도 유용합니다. "총 5개의 과일이 있습니다"나 "할 일이 3개 남았습니다" 같은 메시지를 만들 때 length를 사용하면 됩니다.
⚙️ length 사용법 천천히 살펴보기
length 속성의 사용법은 아주 간단합니다.
기본적인 사용법:
let 개수 = 배열이름.length;빈 배열 확인하기:
if (배열이름.length === 0) {
// 빈 배열일 때 실행할 코드
}마지막 요소 접근하기:
let 마지막값 = 배열이름[배열이름.length - 1];기억해둘 특징들:
- length 뒤에 ()를 붙이지 않습니다 (특별한 기능이 아니므로)
- 빈 배열의 length는 항상 0입니다
- 배열의 마지막 인덱스는 length - 1입니다
🧪 실제로 사용해보기
이제 실제 예제들을 통해 length 속성이 어떻게 작동하는지 차근차근 살펴보겠습니다.
🔹 예제 1: 우리 반 친구들 숫자 세기
우리 반에 있는 친구들의 수를 length로 확인하고, 친구가 추가되거나 빠질 때 개수가 어떻게 변하는지 살펴보겠습니다.
// 우리 반 친구들의 이름을 배열에 저장했습니다
let classmates = ["철수", "영희", "민수"];
// 현재 반 친구들의 숫자를 확인해봅시다
console.log("우리 반 친구들:", classmates);
console.log("현재 친구 수:", classmates.length); // 3명
// 새로운 전학생이 우리 반에 왔습니다!
classmates.push("지영");
// 전학생이 온 후 친구 수를 다시 확인해봅시다
console.log("전학생 온 후 친구들:", classmates);
console.log("늘어난 친구 수:", classmates.length); // 4명
// 한 친구가 다른 반으로 옮겨갔습니다
let movedFriend = classmates.pop();
// 친구가 떠난 후 상황을 확인해봅시다
console.log("떠난 친구:", movedFriend); // "지영"
console.log("남은 친구들:", classmates);
console.log("최종 친구 수:", classmates.length); // 3명
// 우리 반이 비어있는지 확인해봅시다
if (classmates.length > 0) {
console.log("우리 반에는 " + classmates.length + "명의 친구가 있습니다!");
} else {
console.log("우리 반이 비어있습니다...");
}이 예제를 통해 length가 배열의 변화에 따라 실시간으로 업데이트되는 것을 확인할 수 있습니다.
🔹 예제 2: 빈 장바구니에서 가득 찬 장바구니까지
빈 장바구니에서 시작해서 물건을 하나씩 담으면서 length가 어떻게 변하는지 관찰해보겠습니다.
// 처음에는 빈 장바구니입니다
let shoppingCart = [];
// 빈 장바구니의 상태를 확인해봅시다
console.log("장바구니:", shoppingCart);
console.log("담긴 물건 수:", shoppingCart.length); // 0개
// 장바구니가 비어있는지 확인해봅시다
if (shoppingCart.length === 0) {
console.log("장바구니가 비어있습니다. 쇼핑을 시작해볼까요?");
}
// 물건들을 하나씩 담아봅시다
shoppingCart.push("사과");
console.log("사과 담은 후:", shoppingCart.length); // 1개
shoppingCart.push("우유");
console.log("우유 담은 후:", shoppingCart.length); // 2개
shoppingCart.push("빵");
console.log("빵 담은 후:", shoppingCart.length); // 3개
shoppingCart.push("달걀");
console.log("달걀 담은 후:", shoppingCart.length); // 4개
// 최종 장바구니 상태를 확인해봅시다
console.log("최종 장바구니:", shoppingCart);
console.log("총 담긴 물건:", shoppingCart.length + "개");
// 장바구니가 가득 찼는지 확인해봅시다 (5개가 최대라고 가정)
if (shoppingCart.length >= 5) {
console.log("장바구니가 가득 찼습니다!");
} else {
console.log("장바구니에 " + (5 - shoppingCart.length) + "개 더 담을 수 있습니다.");
}이 예제를 통해 빈 배열에서 시작해서 length가 점진적으로 증가하는 과정을 이해할 수 있습니다.
🔹 예제 3: 마지막 요소 찾기와 인덱스 활용
length를 이용해서 배열의 마지막 요소를 찾고, 다양한 위치의 요소에 접근하는 방법을 살펴보겠습니다.
// 일주일 동안의 기분을 기록한 배열입니다
let weeklyMoods = ["기쁨", "평온", "신남", "피곤", "행복"];
// 배열의 기본 정보를 확인해봅시다
console.log("일주일 기분 기록:", weeklyMoods);
console.log("기록된 날짜 수:", weeklyMoods.length); // 5일
// 마지막 인덱스를 계산해봅시다
let lastIndex = weeklyMoods.length - 1;
console.log("마지막 인덱스:", lastIndex); // 4 (0부터 시작하므로)
// 마지막 날의 기분을 확인해봅시다
let lastMood = weeklyMoods[lastIndex];
console.log("마지막 날 기분:", lastMood); // "행복"
// 더 간단한 방법으로 마지막 요소 접근하기
console.log("마지막 기분 (간단한 방법):", weeklyMoods[weeklyMoods.length - 1]);
// 첫 번째와 마지막 기분 비교하기
let firstMood = weeklyMoods[0];
console.log("첫 번째 기분:", firstMood); // "기쁨"
console.log("마지막 기분:", lastMood); // "행복"
if (firstMood === lastMood) {
console.log("일주일의 시작과 끝이 같은 기분이네요!");
} else {
console.log("일주일 동안 기분이 " + firstMood + "에서 " + lastMood + "(으)로 변했습니다!");
}
// 가운데 지점의 기분도 확인해봅시다 (간단한 방법으로)
console.log("가운데 지점 기분:", weeklyMoods[2]); // 배열이 5개이므로 가운데는 2번 인덱스이 예제를 통해 length를 활용하여 배열의 다양한 위치에 있는 요소들에 접근하는 방법을 이해할 수 있습니다.
🧠 주의할 점들
length 속성을 사용할 때 가끔 실수하는 부분들을 미리 알아두면 도움이 됩니다.
❌ 실수 1: length에 괄호 () 붙이기
첫 번째로 많이 하는 실수는 length를 함수처럼 생각해서 괄호를 붙이는 것입니다.
let fruits = ["사과", "바나나"];
// ❌ 잘못된 사용: 괄호를 붙입니다
console.log(fruits.length()); // 오류 발생!
// ✅ 올바른 사용: 괄호 없이
console.log(fruits.length); // 2 (정상 작동)❌ 실수 2: 마지막 인덱스를 length와 헷갈리기
두 번째 실수는 배열의 마지막 인덱스가 length와 같다고 잘못 생각하는 것입니다.
let colors = ["빨강", "파랑", "노랑"];
console.log("배열 길이:", colors.length); // 3
console.log("마지막 인덱스:", colors.length - 1); // 2
// ❌ 잘못된 접근: length와 같은 인덱스 사용
console.log(colors[colors.length]); // undefined (인덱스 3은 없습니다!)
// ✅ 올바른 접근: length - 1 사용
console.log(colors[colors.length - 1]); // "노랑" (마지막 요소)❌ 실수 3: 빈 배열 확인을 잘못하기
세 번째 실수는 빈 배열인지 확인할 때 조건을 잘못 쓰는 것입니다.
let emptyArray = [];
let fullArray = ["a", "b"];
// ❌ 잘못된 조건들
if (emptyArray.length) { // 0은 false가 되므로 헷갈릴 수 있습니다
console.log("배열에 값이 있습니다");
}
// ✅ 올바른 조건들
if (emptyArray.length === 0) {
console.log("배열이 비어있습니다"); // 이것이 실행됩니다
}
if (fullArray.length > 0) {
console.log("배열에 값이 있습니다"); // 이것이 실행됩니다
}✏️ 연습문제로 실력 기르기
문제를 풀어보면서 length에 대한 이해를 더욱 깊게 만들어보겠습니다.
연습문제를 풀 때마다 마치 새로운 작은 발견을 하는 것 같습니다. 코드를 한 줄씩 써보면서 예상과 결과를 비교해보는 과정에서 진정한 이해가 생겨나는 것 같습니다.
Q1. 좋아하는 음식 배열의 길이를 확인하고 출력해보세요.
여러분만의 음식 이야기를 만들어보세요.
정답을 확인해보세요
let favoriteFoods = ["피자", "치킨", "햄버거", "파스타"];
// 음식 배열과 개수 출력하기
console.log("좋아하는 음식들:", favoriteFoods);
console.log("좋아하는 음식 개수:", favoriteFoods.length); // 4개
// 음식 하나 추가 후 개수 변화 확인
favoriteFoods.push("아이스크림");
console.log("추가 후 개수:", favoriteFoods.length); // 5개Q2. 빈 배열인지 확인하는 조건문을 작성해보세요.
두 개의 배열을 비교해서 빈 배열과 가득 찬 배열을 구분해보세요.
정답을 확인해보세요
let homeworkList = [];
let completedHomework = ["수학", "과학"];
// 첫 번째 배열 확인
if (homeworkList.length === 0) {
console.log("아직 숙제가 없습니다!"); // 이것이 출력됩니다
} else {
console.log("해야 할 숙제가 " + homeworkList.length + "개 있습니다.");
}
// 두 번째 배열 확인
if (completedHomework.length > 0) {
console.log("완료한 숙제가 " + completedHomework.length + "개 있습니다!"); // 이것이 출력됩니다
}Q3. 배열의 마지막 요소를 length를 이용해서 찾아보세요.
length를 활용하여 마지막 요소에 접근하는 방법을 연습해보세요.
정답을 확인해보세요
let weekDays = ["월요일", "화요일", "수요일", "목요일", "금요일"];
console.log("요일들:", weekDays);
console.log("총 요일 수:", weekDays.length); // 5개
// 마지막 요일 찾기
let lastDay = weekDays[weekDays.length - 1];
console.log("마지막 요일:", lastDay); // "금요일"
// 첫 번째와 마지막 요일 비교
console.log("첫 번째 요일:", weekDays[0]); // "월요일"
console.log("마지막 요일:", lastDay); // "금요일"🔄 복습하기: 지난 시간에 배운 shift 기능
이전 단원에서 배운 shift 기능과 length를 함께 사용해보겠습니다.
복습 문제: shift와 length를 함께 사용해서 "안전하게 모든 요소 처리하기" 시스템 만들기
정답을 확인해보세요
let todoList = ["아침먹기", "숙제하기", "책읽기"]; // 할 일 목록
console.log("📋 할 일 처리 시스템 실험");
// 처음 할 일 목록과 개수 확인
console.log("\n처음 할 일들:", todoList);
console.log("총 할 일 개수:", todoList.length);
// length를 확인하면서 안전하게 모든 할 일 처리하기
console.log("\n할 일 처리 시작:");
while(todoList.length > 0) { // length가 0보다 클 때만 반복
let currentTask = todoList.shift(); // 첫 번째 할 일 가져오기
console.log("완료한 일: " + currentTask);
console.log("남은 할 일 개수: " + todoList.length);
}
console.log("\n🎯 모든 할 일을 완료했습니다!");
console.log("최종 할 일 목록:", todoList); // 빈 배열 []
console.log("최종 개수:", todoList.length); // 0설명: shift로 앞에서 값을 제거하면서 length로 남은 개수를 확인하면 안전하게 모든 요소를 처리할 수 있습니다. length가 0이 되면 자동으로 반복이 끝나지요.
💪 조금 더 깊이 생각해보기
기본적인 연습을 마친 후에는 조금 더 깊이 있는 문제를 통해 length에 대한 이해를 확인해보겠습니다.
Q1. length를 이용해서 배열의 모든 요소를 출력하는 반복문 만들어보기
정답을 확인해보세요
let animals = ["강아지", "고양이", "토끼"];
console.log("동물 목록 출력:");
for(let i = 0; i < animals.length; i++) {
console.log(i + "번째: " + animals[i]);
}설명: length와 반복문을 조합해서 모든 배열 요소에 접근하는 방법입니다. 이는 배열의 크기가 얼마든 상관없이 모든 요소를 처리할 수 있는 유용한 패턴입니다.
📚 이전 단원들과 함께 복습하기
7단원까지 공부한 내용들을 다시 떠올려보면서 length와 함께 사용해보겠습니다.
복습 1) 함수와 배열 함께 사용하기 (5-7단원 복습)
// 배열의 크기를 안전하게 확인하는 함수를 만들어보세요
function getArrayInfo(array) {
if(array.length === 0) {
return "빈 배열입니다";
} else {
return "배열에 " + array.length + "개의 요소가 있습니다";
}
}
let testArray = ["사과", "바나나"];
console.log(getArrayInfo(testArray)); // 이 결과는 무엇일까요?정답: "배열에 2개의 요소가 있습니다"가 출력됩니다.
설명: 함수에서 조건문으로 배열의 크기를 확인한 후, 적절한 메시지를 돌려줍니다.
복습 2) 반복문과 조건문 함께 사용하기 (3-4단원 복습)
// for문을 사용해서 배열의 모든 요소를 출력하는 코드를 작성해보세요
let hobbies = ["독서", "음악감상", "영화보기"];
for(let i = 0; i < hobbies.length; i++) {
console.log((i + 1) + "번째 취미: " + hobbies[i]);
}정답: 각 취미가 순서대로 출력됩니다.
오늘 우리는 length라는 속성을 통해 배열의 크기를 안전하고 효율적으로 확인하는 방법을 배웠습니다. 마치 서랍 안에 들어있는 물건의 개수를 자동으로 세어주는 스마트한 도구를 얻은 것처럼, length는 우리가 배열을 다룰 때 항상 정확한 정보를 제공해줍니다.
이제 여러분은 push, pop, unshift, shift와 length를 모두 자유자재로 조합해서 배열을 완벽하게 조작할 수 있게 되었습니다. 마치 숙련된 도서관 사서가 된 것처럼, 정보들의 개수를 정확히 파악하고 관리할 수 있는 능력을 갖추게 된 것입니다.
다음 시간에는 배열을 조작하는 더 고급 기능들에 대해서도 이야기해보겠습니다. 오늘도 함께 해주어서 고맙습니다.
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 차근차근 확인해보세요.
| 학습 내용 | 확인 |
|---|---|
| length의 기본 개념 이해하기 | ☐ |
| 기본 사용법과 문법 익히기 | ☐ |
| 주요 특징과 차이점 알기 | ☐ |
| 자주 하는 실수들 알아두기 | ☐ |
| 실전 예제 이해하기 | ☐ |
| shift와 length 함께 사용하기 | ☐ |
📂 마무리 정보
오늘 배운 7.3.1 내용이 여러분의 마음에 잘 자리 잡았나요? 다음 시간에도 함께 새로운 이야기를 써내려가겠습니다.
기억해둘 점: 오늘 배운 내용을 꼭 직접 써보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 천천히 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.