자바스크립트 배열 선언 예제
오늘은 웹 개발에서 빼놓을 수 없는 중요한 개념 중 하나인 자바스크립트 배열에 대해 알아보도록 하겠다. 배열은 데이터를 효율적으로 관리하고 처리할 수 있게 해주는 강력한 도구로, 자바스크립트에서 매우 빈번하게 사용된다. 이 글에서는 배열의 기본적인 사용법부터 시작해, 배열을 다루는 다양한 방법을 쉽게 이해할 수 있도록 안내해 드리도록 하겠다. 자바스크립트 배열의 기초를 탄탄히 다져서, 더욱 효율적이고 깔끔한 코드를 작성해 보도록 하자.
이번 글에서 알아볼 javascript 배열의 기본적인 내용은 다음과 같다.
| 배열의 기본 예제 배열을 사용하는 이유 배열의 선언 배열 값 가져오기 배열 값 변경하기 배열의 길이 배열에 데이터 추가하기 |
자바스크립트 배열 기본 예제
const names = ["값1", "값2", "값3"];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="test"></p>
<script>
const names = ["홍길동", "이순신", "김철수"];
document.getElementById("test").innerHTML = names;
</script>
</body>
</html>
배열 names에 3개의 값을 콤마로 구분하여 저장하였고
배열 names를 화면에 출력하면 역시 콤마로 구분하여 값이 표시된다.
출력결과 :
| 홍길동,이순신,김철수 |
왜 배열을 사용할까요?
배열은 한 번에 둘 이상의 값을 포함할 수 있는 특수 변수라고 할 수 있다.
항목 목록(예: 이름 목록)이 있는 경우 이름을 단일 변수에 각각 저장하는 방법은 다음과 같다.
let name1 = "이순신";
let name2 = "홍길동";
let name3 = "김철수";
위 예에서는 이름 항목이 3개뿐이지만 만약 이름이 3개가 아니라 1000명이라면 어떻게 할까?
name1 ~ name1000까지.. 1000개의 변수를 일일이 정의할 수도 있겠지만 이건 너무 무식한 방법이다.
이럴 때를 위해 배열을 쓰는 것이다.
배열은 하나의 변수 이름으로 여러 값을 포함할 수 있고 인덱스 번호를 참조하는 것으로 각각의 값을 읽고 초기화하고 다른 값으로 갱신할 수 있다.
자바스크립트 배열 선언하기
자바스크립트에서 배열을 선언 방법은 여러가지 있다.
const arr1 = ["값1", "값2", "값3"];
const arr2 = [
"값1",
"값2",
"값3"
];
const arr3 = [];
arr3[0] = "값1";
arr3[1] = "값2";
arr3[2] = "값3";
const arr4 = new Array("값1", "값2", "값3");
각각의 배열변수 arr1, arr2, arr3, arr4를 여러 가지 방법으로 선언하였다.
arr1은 가로로 데이터를 정렬시켜 써 주었고
arr2는 세로로 데이터를 정렬시켜 써 주었고
arr3은 배열을 빈값으로 먼저 선언한 후 첨자를 써서 각각 따로 값을 저장해 주었다.
arr4는 new 키워드를 사용하여 배열을 생성한 후 이를 arr4에 할당하였다.
상황에 따라 적당한 방법으로 선택하여 사용하면 된다.
배열 값 가져오기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="test"></p>
<script>
const arr1 = ["홍길동", "이순신", "김철수"];
document.getElementById("test").innerHTML = arr1[0];
</script>
</body>
</html>
배열 arr1에 는 3개의 값을 저장하고 이 중에서 첫번째 데이터를 가져온다.
배열변수 arr1 에 첨자를 붙여서, 즉 arr1 [0]이라고 해주면 화면에서 "홍길동" 이 출력된다.
배열 값 변경하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="test"></p>
<script>
const arr1 = ["홍길동", "이순신", "김철수"];
arr1[0] = "개똥이"; // 값을 변경
document.getElementById("test").innerHTML = arr1[0];
</script>
</body>
</html>
arr1 [0]의 값은 원래 "홍길동"이었는데
12행에서 이를 "개똥이"로 다시 저장하였으므로
화면에서 "개똥이"가 출력된다.
배열의 길이
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="test"></p>
<script>
const arr1 = ["홍길동", "이순신", "김철수"];
document.getElementById("test").innerHTML = arr1.length;
</script>
</body>
</html>
배열의 길이는 length라는 메서드로 구할 수 있다.
배열변수명. length , 즉 위 예에서는 arr1.length 이다.
배열의 구성원이 3개이므로 결과는 "3"을 출력한다.
배열에 데이터 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="test"></p>
<script>
const arr1 = ["홍길동", "이순신", "김철수"];
arr1.push("개똥이");
document.getElementById("test").innerHTML = arr1;
</script>
</body>
</html>
원래 arr1은 3개의 데이터로 정의되었지만 나중에 arr1.push("개똥이"); 로 데이터를 하나 추가하였으므로 최종 결과는 "홍길동, 이순신, 김철수, 개똥이"가 출력된다.
'vita_Programing' 카테고리의 다른 글
| 자바스크립트 배열 컨트롤 중급편 2/2 (0) | 2024.05.20 |
|---|---|
| 자바스크립트 배열 컨트롤 중급편 1/2 (1) | 2024.05.19 |
| Javascript Date 객체 예제 (0) | 2024.05.17 |
| MSSQL에서 저장프로시저 수정이력 확인 (2) | 2024.05.09 |
| 자바스크립트 웹페이지 로딩바 구현 (0) | 2023.11.15 |
