JavaScript에서 배열을 생성하는 방법 중 하나는 new 키워드와 함께 Array() 생성자를 사용하는 것입니다. 이 방식은 배열 요소를 인수로 전달하여 새로운 배열 객체를 만들 수 있습니다.
new 키워드를 사용한 배열 생성 예제
다음은 new 키워드를 사용하여 JavaScript 배열을 만드는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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 {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Creating array with new keyword</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to create a new array and display it
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let arr = new Array(1, 2, 3, 4, "A", "B", "C", "D");
resEle.innerHTML = "arr = " + arr;
});
</script>
</body>
</html>코드 설명
위 코드의 주요 부분을 살펴보면 다음과 같습니다.
new Array(1, 2, 3, 4, "A", "B", "C", "D")— 숫자와 문자열이 혼합된 8개의 요소를 가진 새로운 배열을 생성합니다. JavaScript 배열은 서로 다른 자료형을 하나의 배열에 함께 저장할 수 있습니다.addEventListener("click", ...)— 버튼 클릭 이벤트가 발생할 때마다 배열을 새로 생성하고 화면에 표시합니다.resEle.innerHTML— 생성된 배열을.result클래스를 가진 div 영역에 출력합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같이 생성된 배열이 화면에 출력됩니다.
참고 사항
new Array() 생성자 외에도 배열 리터럴 [1, 2, 3] 문법을 사용하는 것이 일반적으로 권장됩니다. 특히 new Array(5)처럼 숫자 하나만 전달하면 길이가 5인 빈 배열이 생성되므로 의도치 않은 동작이 발생할 수 있으니 주의해야 합니다.