자바스크립트 배열 변수의 정의와 사용 초급편

이번에 진행할 내용은 "자바스크립트 배열 변수의 정의와 사용"에 대해서 알아보도록 하겠습니다. 배열 변수는 자주 사용하기도 하고 중요하기에 조금 차근차근 다루어 보도록 하겠습니다. 다 작성하였지만, 블루스크린으로 인하여 다시 작성해서 올리는 포스팅입니다...

---

배열 변수의 정의

---

일반 변수는 하나의 변수에 하나의 데이터를 저장할 수 있는 반면에, 배열 변수는 하나의 배열 변수에 여러 개의 데이터를 담을 수 있는 형태를 말합니다. 만약 한 학년의 이름(50명)을 저장하려면 일반 변수는 50개의 변수와 50개의 값을 저장해야 하지만, 배열 변수는 하나의 배열 변수에 데이터를 모조리 다 집어넣으면 배열 변수로 만들어집니다.

index.html

앞에서 알아본 일반 변수의 전형적인 모습입니다. 이름은 총 3명을 저장하였는데 변수도 결국 3개의 변수를 선언하여 각각 집어넣었습니다. 만약 배열 변수의 경우에는 어떻게 처리해야 할까요?

index.html

배열 변수의 모습입니다. 아까와 다르게 한 줄로 구성이 되어있으며, 'name'이라는 변수를 한 번만 사용하여 3개의 데이터를 집어넣었습니다. 앞에서 설명했듯 배열 변수는 여러 개의 데이터를 담을 수 있는 형태를 하고 있습니다.

---

배열 변수의 사용

---

앞에서 생성한 배열 변수를 이제는 사용해보도록 하겠습니다. 배열 변수는 "변수명[순서]"로 접근이 가능하며, 전체를 출력하거나 원하는 요소만 출력이 가능합니다. 배열 변수의 [순서]는 0부터 시작하며 1번째 변수는 0을 사용하여 출력이 가능합니다.

index.html

다음과 같이 0번째와 2번째 요소를 출력해보도록 하겠습니다. 배열 변수의 [순서]는 index라고 불리기도 하는데 그 값은 0부터 시작한다고 하였습니다. 결국 "홍길동"과 "강감찬"을 출력하게 됩니다.

(name[0]+ " " + name[2]);는 결국 홍길동과 " " 공백, 그리고 name[2] 강감찬을 출력하게 됩니다. +는 변수 혹은 문자를 이어줄 때 사용하는데 뒤에서 다시 설명하도록 하겠습니다.

---

배열 변수의 사용 목적

---

그렇다면, 그냥 변수를 사용하면 될텐데, 굳이 배열 변수를 사용하는 목적은 무엇이라고 생각하시나요? 바로 정답은 반복문에 있습니다. 배열 변수를 사용한다면 반복문을 통하여 불필요한 코드를 줄일 수 있기 때문입니다. 아래에서 바로 확인이 가능합니다.

index.html

우선, 배열 변수의 반복문을 사용하지 않고 출력하였습니다. 지금은 3개 뿐이라서 코드의 수는 많지 않습니다. 만약 100개의 값이 저장되어 있다면 출력을 할 때에는 100줄이 늘어나게 됩니다.

출력결과는 다음과 같습니다.

index.html

지금은 반복문을 사용하였습니다. 반복문은 뒤에서 다루어 볼 것입니다. 지금 간단하게 설명한다면 for(시작값; 조건; 증감)으로 구성되어 있습니다. 시작값은 처음에만 적용되며, 조건->내용->증감 순으로 계속 반복됩니다. var i = 0부터 name의 길이까지 i++ 1씩 더하면서 진행하게 됩니다. 결국 0부터 시작하기에 name[0]부터 name[2]까지 출력하게 됩니다.

결과는 다음과 같이 아까와 같습니다.

이번 강의는 배열 변수의 정의와 사용 초급편에 대해서 다루었습니다. for라는 함수와 length와 같이 처음보는 내용들이 나오지만, 뒤에서 다시 다룰 것이며, 다음 포스팅에서는 배열 변수의 고급편을 통하여 나머지 배열 변수에 대해서 알아보도록 하겠습니다.