본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

JavaScript 배열 — [] 리터럴과 인덱스 완전 정리

by 왕진 2026. 7. 3.
반응형

 

 

Web Development · JavaScript

JavaScript 배열 —
[] 리터럴과 인덱스 완전 정리

plots[i]로 배열 원소를 하나씩 꺼내 for + while 이중 반복으로 별 그래프 그리기
시작 오늘 분석할 코드

배열은 "여러 개의 값을 한 상자에 순서대로 담는 것"이다. 이번 코드는 []로 배열을 만들고, for문으로 배열을 처음부터 끝까지 돌면서 각 값만큼 *(별)을 찍어 막대그래프처럼 보여준다. 배열·인덱스·이중 반복문이 한 번에 들어간 자바스크립트 기초 필수 코드다.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>[]로 배열 만들기</title> </head> <body> <h3>[]로 배열 만들기</h3> <hr> <script> let plots = [20, 5, 8, 15, 20]; // 원소 5개의 배열 생성 //plots배열에 위의 5개의 원소가 저장이 된다. document.write("var plots = [20, 5, 8, 15, 20]<br>");//출력 for(let i=0; i<5; i++) { // 5 대신 plots.length로 해도 됨 //i는 0부터 시작이고. i는 5보다 작을때까지 반복함. 그러면 i는 최대값이 4인거임. i는 후위증가. let size = plots[i]; // plots 배열의 i번째 원소 // size변수에 plots[i]인덱스가 지정하는 값을 저장한다. while(size>0) {//현재size변수의 값이 0보다 크면 true니까. while문을 반복한다. document.write("*");//*을 출력함. size--;//size변수의 값을 1씩 줄인다. } document.write(plots[i] + "<br>"); } </script> </body> </html>
실제 출력 미리보기

[]로 배열 만들기

var plots = [20, 5, 8, 15, 20] ******************** 20 ***** 5 ******** 8 *************** 15 ******************** 20
※ 첫 줄은 document.write로 배열 선언 자체를 텍스트로 찍은 것이고, 그 아래 5줄은 for문이 배열을 한 바퀴 돌며 각 원소 값만큼 별을 찍은 결과다. 값이 클수록(20) 별이 길고, 작을수록(5) 별이 짧다 — 숫자 데이터를 시각화하는 가장 원초적인 방법이다.
용어 용어 정리
배열 (Array)여러 개의 값을 순서대로 하나의 변수에 담는 자료구조
[] 리터럴대괄호 안에 값을 콤마로 나열해 배열을 즉시 만드는 문법
인덱스 (index)배열 안 각 원소의 순서 번호. 0부터 시작
plots[i]plots 배열에서 인덱스 i번째 원소를 꺼내는 표현식
length배열이 가진 원소의 총 개수(속성)
for문초기식·조건식·증감식으로 정해진 횟수만큼 반복
while문조건이 참인 동안 계속 반복 (횟수 미정 반복)
후위증가 (i++)현재 값을 먼저 쓰고 그 다음에 1을 더하는 연산자
document.write문서(HTML)에 문자열을 바로 출력하는 메서드
<br>HTML에서 줄바꿈을 표시하는 태그
1 [] 배열 리터럴 — 왜 변수 하나에 값 5개를 담는가
변수를 5개 만들지 않고 배열을 쓰는 이유

만약 배열이 없다면 let a = 20; let b = 5; let c = 8; ... 처럼 값마다 변수를 따로 만들어야 한다. 값이 5개면 그럭저럭 되지만 100개, 1000개가 되면 관리가 불가능하다. 배열은 "같은 종류의 여러 값"을 하나의 이름(plots) 아래 순서대로 묶어서, 반복문으로 한 번에 다룰 수 있게 해준다.

let plots = [20, 5, 8, 15, 20]; └─────┬─────┘ 대괄호 [] 안에 값을 콤마(,)로 나열 → 배열 리터럴 → plots 하나의 변수가 5개의 값을 순서대로 갖게 됨
※ "리터럴(literal)"이란 new Array() 같은 생성자를 거치지 않고, [] 기호로 직접 값을 써서 즉석에서 만드는 표기법을 말한다. 자바스크립트에서는 거의 항상 이 [] 리터럴 방식을 쓴다.
2 0부터 시작하는 인덱스 — 왜 첫 번째가 0번인가
plots[0]이 첫 번째 값인 이유

사람은 "첫 번째, 두 번째, 세 번째"로 1부터 세지만, 배열의 인덱스는 0부터 시작한다. plots = [20, 5, 8, 15, 20]이면 각 값의 위치는 다음과 같다.

인덱스 값 사람이 부르는 순서
plots[0] 20 첫 번째
plots[1] 5 두 번째
plots[2] 8 세 번째
plots[3] 15 네 번째
plots[4] 20 다섯 번째(마지막)
※ 원소가 5개면 마지막 인덱스는 4이지 5가 아니다. "개수 = 5"와 "마지막 인덱스 = 4" 사이의 이 1의 차이가 배열 관련 버그의 절반을 차지한다. plots[5]에 접근하면 값이 없어 undefined가 나온다.
3 plots[i] — 인덱스 자리에 변수를 넣는다는 것
숫자 대신 변수 i를 쓰는 이유

plots[0], plots[1]처럼 숫자를 직접 써도 되지만, 그러면 5줄을 따로 써야 한다. plots[i]처럼 대괄호 안에 변수 i를 넣으면, i의 값이 0, 1, 2, 3, 4로 바뀔 때마다 plots[i]가 자동으로 다른 원소를 가리킨다. 이것이 배열과 반복문이 항상 짝을 이루는 이유다.

i = 0 일 때 → plots[i] = plots[0] = 20 i = 1 일 때 → plots[i] = plots[1] = 5 i = 2 일 때 → plots[i] = plots[2] = 8 i = 3 일 때 → plots[i] = plots[3] = 15 i = 4 일 때 → plots[i] = plots[4] = 20

코드에서는 let size = plots[i];로 그때그때의 원소 값을 size라는 임시 변수에 옮겨 담는다. 왜 굳이 옮기냐면, 아래 while문에서 size를 계속 줄여야 하는데, plots[i] 자체를 줄이면 원본 배열 데이터가 훼손되기 때문이다.

※ 원본 보존의 원칙
  • size는 plots[i] 값의 "복사본"이다
  • size--를 아무리 반복해도 plots 배열 자체는 그대로다
  • 그래서 반복문 마지막에 plots[i]를 다시 출력해도 원래 값(20, 5, 8...)이 정확히 나온다

 

반응형

 

4 for(let i=0; i<5; i++) — i<5 vs i<plots.length
for문의 세 부분이 하는 일

for(초기식; 조건식; 증감식) 구조에서 각 부분은 역할이 분명하다.

1
let i = 0 (초기식)반복을 시작하기 전 딱 한 번 실행. i를 0으로 세팅
2
i < 5 (조건식)매 반복 시작 전 검사. 참이면 계속, 거짓이면 반복 종료
3
i++ (증감식)한 바퀴가 끝날 때마다 실행. i를 1씩 증가

주석에도 있듯 5 대신 plots.length를 써도 결과는 똑같다. plots.length는 배열이 가진 원소 개수(여기선 5)를 자동으로 계산해주는 속성이기 때문이다.

i < 5 (숫자 하드코딩)
지금 배열이 5개니까 동작은 하지만, 나중에 배열에 값을 추가/삭제하면 숫자를 직접 고쳐야 함. 배열과 반복 횟수가 따로 놀아서 실수 유발
i < plots.length (권장)
배열 길이가 몇 개든 항상 자동으로 맞춰짐. 원소를 추가·삭제해도 코드 수정 불필요 — 실무에서는 이 방식이 기본
※ 실무 습관: 배열을 도는 for문의 조건식은 특별한 이유가 없으면 항상 i < 배열명.length로 쓴다. 지금은 학습 목적으로 5를 그대로 둬도 이해에 지장은 없다.
5 while(size>0) — 값의 크기만큼 별을 찍는 원리
for와 while, 왜 두 개를 겹쳐 쓰는가

바깥쪽 for문은 "배열의 몇 번째 원소를 볼 것인가"(총 5바퀴, 정해진 횟수)를 담당하고, 안쪽 while문은 "그 원소 값만큼 별을 몇 개 찍을 것인가"(값에 따라 매번 다른 횟수)를 담당한다. 반복 횟수가 미리 정해지지 않고 조건(size > 0)이 언제 거짓이 될지에 달려 있을 때 for보다 while이 더 자연스럽다.

size = 8 이라면: while(size > 0) { document.write("*"); // * size--; // size: 8→7→6→5→4→3→2→1→0 } → *가 정확히 8번 출력된 후 size가 0이 되어 조건이 거짓 → 종료
size-- 후위증가, 왜 무한루프에 안 걸리는가

size--는 매 반복마다 size를 1씩 줄인다. 이 줄어드는 값이 없다면 size > 0은 영원히 참이 되어 무한루프에 빠진다. while문에서 조건에 쓰이는 변수를 반복 안에서 반드시 변화시켜야 하는 이유가 여기 있다.

※ 흔한 실수: while문 안에 size--를 빼먹으면 브라우저가 멈출 정도로 *이 무한히 출력된다. while을 쓸 때는 "이 조건이 언젠가 거짓이 되는가?"를 항상 확인해야 한다.
6 document.write와 <br> — 줄바꿈은 저절로 되지 않는다
왜 "<br>"을 문자열 안에 직접 넣는가

document.write()는 괄호 안 문자열을 HTML 문서에 그대로 이어 붙이는 함수다. 자바스크립트 코드에서 줄을 바꿔 써도(예: 여러 줄에 걸쳐 document.write를 호출해도) 그것이 HTML 화면의 줄바꿈으로 이어지지는 않는다. HTML은 개행 문자를 무시하기 때문에, 화면에서 줄을 바꾸려면 HTML 태그인 <br>을 문자열 안에 직접 포함시켜야 한다.

document.write(plots[i] + "<br>"); └──┬──┘ 문자열 안에 <br> 태그를 넣어야 브라우저가 줄바꿈으로 인식한다
※ + 연산자의 두 얼굴
  • plots[i] + "<br>"에서 plots[i]는 숫자(예: 20)
  • 자바스크립트는 숫자 + 문자열을 만나면 숫자를 자동으로 문자열로 바꿔 이어붙인다(문자열 연결)
  • 결과: "20" + "<br>" → "20<br>"
7 자주 하는 실수
실수 증상 해결
배열 개수와 마지막 인덱스를 혼동 원소 5개인데 plots[5] 접근 → undefined 마지막 인덱스는 항상 length - 1임을 기억
while문 안에서 size-- 누락 조건이 계속 참 → 무한루프, 브라우저 멈춤 while 조건에 쓰는 변수는 반복 안에서 반드시 변화시킬 것
plots[i] 자체를 직접 감소시킴 원본 배열 값이 바뀌어 이후 출력이 틀어짐 size 같은 임시 변수에 복사해서 사용
문자열에 <br>을 빼먹음 모든 결과가 한 줄에 다 붙어서 출력 document.write 문자열 끝에 "<br>" 포함
for 조건을 숫자로 하드코딩(i<5) 배열 원소 수가 바뀌면 반복 횟수가 안 맞음 i < plots.length로 배열 길이에 맞춰 자동화
배열 리터럴에 콤마 하나 빠뜨림 문법 오류 또는 원소 개수가 의도와 다르게 생성 [값1, 값2, 값3] 각 값 사이 콤마 확인

핵심 한 줄 요약

[] 리터럴여러 값을 순서대로 담아 하나의 배열로 만드는 문법
인덱스0부터 시작 — 원소 5개면 마지막은 [4]
plots[i]i가 바뀌면 가리키는 원소도 자동으로 바뀜
length배열 원소 개수. for 조건식엔 숫자보다 이걸 쓰는 게 안전
for + while 이중 반복for=원소 순회, while=값 크기만큼 반복
size--while 조건을 언젠가 거짓으로 만들어야 무한루프 방지
document.write + <br>HTML은 개행을 무시하므로 태그로 직접 줄바꿈

Tags

#JavaScript #배열 #배열리터럴 #인덱스 #length #반복문 #for문 #while문 #document.write #자바스크립트기초 #JS #별그래프 #후위증가 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, 배열, 배열리터럴, 인덱스, length, 반복문, for문, while문, document.write, 자바스크립트기초, JS, 별그래프, 후위증가, 웹개발, 티스토리
반응형

'php' 카테고리의 다른 글

JavaScript 프로토타입 — 생성자 함수·this·메서드 완전 정리  (0) 2026.07.04
JavaScript Array 메서드 — concat·join·reverse·sort 완전 정리  (0) 2026.07.04
JavaScript 객체 생성 — new Date · String · Array 완전 정리  (0) 2026.07.03
JavaScript 전역 함수 — eval · parseInt · isNaN 완전 정리  (0) 2026.07.03
JavaScript 함수 — 선언·파라미터·return 완전 정리  (0) 2026.07.03

관련글

댓글

티스토리툴바