JavaScript / 배열 선언과 요소 읽기·수정하기

JavaScript

작성일 2026-10-27 최근 수정일 2026-10-27

JavaScript 배열은 순서가 있는 값의 모음입니다. 보통 const items = ["Lorem", "Ipsum", "Dolor"]처럼 대괄호 배열 리터럴로 만듭니다. 첫 요소의 인덱스는 0이고 요소 수는 length로 읽습니다. 빈 배열은 []로 만들 수 있습니다.

배열 리터럴로 선언하고 요소 읽기

대괄호 안에 요소를 쉼표로 구분해 적습니다. 문자열, 숫자, 객체 등 서로 다른 종류의 값도 담을 수 있지만 독자가 예측하기 쉬운 구조를 위해 한 배열에는 비슷한 역할의 값을 담는 편이 좋습니다. const는 변수에 다른 배열을 다시 대입하지 못하게 하지만 배열 내부 요소의 변경까지 막지는 않습니다.

const words = ['Lorem', 'Ipsum', 'Dolor'];
console.log(words[0]);      // 'Lorem'
console.log(words[2]);      // 'Dolor'
console.log(words.length);  // 3

words[1] = '새 값';
console.log(words); // ['Lorem', '새 값', 'Dolor']

존재하지 않는 위치를 읽으면 undefined가 나옵니다. 반복문에서 인덱스를 사용할 때는 index < words.length처럼 끝 위치를 검사하세요. 배열 리터럴과 인덱스 규칙은 MDN의 인덱스 기반 컬렉션 안내에서 확인할 수 있습니다.

new Array()와 숫자 한 개의 예외

new Array("A", "B")와 ["A", "B"]는 두 요소 배열을 만듭니다. 그러나 생성자에 숫자 하나만 주면 그 숫자가 요소가 아니라 배열 길이로 해석됩니다. 숫자 하나를 담을 때는 배열 리터럴이나 Array.of()를 사용하세요.

console.log([3]);          // [3]
console.log(Array.of(3));  // [3]

const slots = new Array(3);
console.log(slots.length); // 3
console.log(0 in slots);   // false: 첫 칸은 빈 슬롯
console.log(slots[0]);     // undefined

빈 슬롯은 값이 undefined로 저장된 칸과 다릅니다. 인덱스로 읽을 때는 둘 다 undefined처럼 보이지만 0 in slots 결과는 false입니다. new Array(3.5)처럼 유효하지 않은 길이를 주면 오류가 납니다. MDN의 Array 생성자 문서에서 이 예외를 확인하세요.

인덱스로 대입할 때의 빈 칸

빈 배열을 만든 뒤 items[0] = value처럼 원하는 위치에 값을 넣을 수 있습니다. 현재 길이보다 먼 인덱스에 대입하면 중간에 빈 슬롯이 생기므로 연속해서 추가할 때는 push()가 더 안전하고 읽기 쉽습니다.

const items = [];
items[0] = 'A';
items[1] = 'B';
console.log(items); // ['A', 'B']

items[4] = 'E';
console.log(items.length); // 5
console.log(2 in items);   // false

배열의 length는 현재 요소가 실제로 채워진 개수가 아니라 가장 큰 인덱스에 맞춰 관리되는 길이입니다. 빈 슬롯이 있는 배열을 다루면 순회 메서드마다 동작이 달라질 수 있어 불필요한 구멍을 만들지 않는 편이 좋습니다.

전체 예제: 배열을 만들고 값 추가하기

아래 코드를 UTF-8로 array-declare.html에 저장해 브라우저에서 엽니다. 처음 배열은 세 문자열을 가진 리터럴로 만듭니다. 입력값을 추가하면 배열 끝에 들어가고 첫 요소와 길이를 다시 표시합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>배열 만들고 항목 추가하기</title>
</head>
<body>
<label for="item">추가할 값</label>
<input id="item" type="text">
<button id="add" type="button">항목 추가</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
let items = ['Lorem', 'Ipsum', 'Dolor'];
const input = document.querySelector('#item');
const output = document.querySelector('#output');

function show() {
  output.textContent = `배열: ${JSON.stringify(items)}\n` +
    `첫 요소: ${items[0] ?? '(없음)'}\n` +
    `length: ${items.length}`;
}

document.querySelector('#add').addEventListener('click', () => {
  const value = input.value.trim();
  if (value === '') {
    output.textContent = '추가할 값을 입력하세요.';
    return;
  }
  items.push(value);
  input.value = '';
  show();
});

document.querySelector('#reset').addEventListener('click', () => {
  items = ['Lorem', 'Ipsum', 'Dolor'];
  input.value = '';
  show();
});
show();
</script>
</body>
</html>

처음에는 ["Lorem","Ipsum","Dolor"]와 길이 3이 보입니다. 새 항목을 입력해 추가하면 길이가 4가 되지만 첫 요소는 그대로입니다. 빈 입력은 무시하며 ‘처음으로’를 누르면 원래 세 요소 배열로 돌아갑니다. 출력은 textContent를 사용해 입력 문구를 HTML로 해석하지 않습니다.

JavaScript