JavaScript에서 배열(Array)은 여러 개의 값을 하나의 변수에 저장할 수 있는 가장 기본적인 자료구조입니다. 배열은 크게 1차원 배열과 다차원 배열로 나눌 수 있으며, 이번 글에서는 두 배열의 차이점과 실제 사용 예제를 코드와 함께 살펴보겠습니다.
1차원 배열이란?
1차원 배열은 값들이 일렬로 나열된 가장 단순한 형태의 배열입니다. 숫자, 문자열 등의 요소가 순서대로 저장되며, 인덱스를 통해 각 요소에 접근할 수 있습니다.
let arr = [1, 2, 3, 4, 5];다차원 배열이란?
다차원 배열은 배열 안에 또 다른 배열을 포함하는 구조입니다. 대표적으로 표(테이블) 형태의 데이터를 표현할 때 유용하게 사용되며, JavaScript에서는 주로 '배열의 배열' 형태로 구현합니다.
let arr1 = [
[1, 2, 3],
["A", "B", "C"],
[5, "D", 6]
];위 예제처럼 다차원 배열은 서로 다른 자료형을 함께 담을 수도 있어 활용 범위가 넓습니다.
실전 예제 코드
아래는 1차원 배열과 다차원 배열을 화면에 출력하는 전체 HTML 예제입니다. 버튼을 클릭하면 두 배열의 내용이 표시됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>1차원 배열 vs 다차원 배열</h1>
<div class="sample">1차원 배열<br /></div>
<div class="result">다차원 배열<br /></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 1차원 배열과 다차원 배열이 표시됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let BtnEle = document.querySelector(".Btn");
let arr = [1, 2, 3, 4, 5];
let arr1 = [
[1, 2, 3],
["A", "B", "C"],
[5, "D", 6],
];
BtnEle.addEventListener("click", () => {
sampleEle.innerHTML += arr + "<br>";
arr1.forEach((item, index) => {
resEle.innerHTML += "인덱스 : " + index + " 배열 = " + item + "<br>";
});
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 아래와 같이 1차원 배열의 전체 요소와, 다차원 배열의 각 인덱스별 하위 배열이 순서대로 출력됩니다.
정리
- 1차원 배열: 값이 일렬로 나열된 단순 구조로,
[1, 2, 3]처럼 선언합니다. - 다차원 배열: 배열 안에 배열을 중첩한 구조로, 행렬이나 표 데이터를 표현할 때 적합합니다.
forEach()메서드를 활용하면 다차원 배열의 각 하위 배열을 인덱스와 함께 손쉽게 순회할 수 있습니다.
두 배열의 차이를 정확히 이해해두면 데이터 구조 설계와 DOM 조작 시 훨씬 효율적인 코드를 작성할 수 있습니다.