자바스크립트 배열 선언과 특징 및 간단한 예제

자바스크립트 배열은 여러 변수의 집합을 말하며, 데이터를 대량 연산할 때 도움됩니다. 자바스크립트 배열 선언은 [] 기호를 사용하며, 쉼표를 사용해서 배열값을 대입합니다.

자바스크립트 배열

배열은 자바스크립트뿐만 아니라 대부분 프로그래밍 언어에 존재하는 개념입니다. 공통적으로 여러 변수로 구성된 자료형의 집합을 말합니다. 변수를 대량으로 만들 때 작성해야 되는 코드 길이를 줄여줍니다.

자바스크립트 배열 필요성

임의의 정수 10개를 더하는 코드는 변수를 10회 선언을 합니다. 이후 변수의 덧셈을 10회 작성해야 합니다.

<script>
  //변수 10회 선언
  var num1 = 7;
  var num2 = 2;
  var num3 = 4;
  var num4 = 3;
  var num5 = 5;
  var num6 = 2;
  var num7 = 4;
  var num8 = 9;
  var num9 = 2;
  var num10 = 3;

  //변수 10개 덧셈
  var sum = num1 + num2 + num3 + num4 + num5 + num6 + num7 + num8 + num9 + num10;

  //합계 출력
  document.write( sum );
</script>

결과

10개는 수작업이 가능하지만 연산해야할 데이터 개수가 1000개, 2000개로 늘어나면 능률이 떨어질 것입니다.

배열과 반복문 기능을 사용하면, 작성 코드 길이를 줄일 수 있습니다.

<script>
  //변수 선언
  var num = [ 7, 2, 4, 3, 5, 2, 4, 9, 2, 3 ];
  var sum = 0;
  var i;

  //연산
  for ( i = 0; i < 10; i++ )
  {
    sum = sum + num[i]
  }

  //합계 출력
  document.write( sum );
</script>

결과

자바스크립트 배열 선언 및 초기화

배열 선언은 변수 선언과 유사합니다. 배열명을 작성합니다. 이 때 공백이 아닌 대괄호 []기호를 사용합니다. 배열명이 num인 배열이 선언되었습니다.

<script>
  var num = [];
</script>

배열값을 대입하는 방법은 값을 쉼표를 이용해서 연속적으로 입력하면 됩니다.

<script>
  var num = [ 1, 2, 3, 4 ];
</script>

자바스크립트 배열 구조

배열은 배열명, 배열값, 배열 원소(인덱스 = 첨자)로 구성됩니다.

c-array-1

현재 위에서 한 작업은 배열명을 num 으로 선언하고, 배열의 각 칸에 숫자 1, 2, 3, 4를 순서대로 대입했습니다.

이 때 각 배열값의 방이름에는 배열 원소라고 부르는 자동 번호가 생성됩니다. 배열 원소는 맨 첫 칸부터 숫자 0부터 자동으로 1씩 증가하며 배열명[숫자] 형태를 가집니다.

자바스크립트 배열 원소

자바스크립트 배열은 생성하면, 각 방별로 자동으로 배열명[숫자]라는 일종의 방이름이 생성됩니다. 이를 배열 원소 또는 인덱스라 부릅니다.

각 인덱스는 숫자 0부터 1씩 증가하기 때문에 반복문 등을 이용해서 배열을 대량으로 연산할 수 있습니다.

배열 원소를 사용해서 빈 배열을 선언한 후, 배열값을 각각 넣어줄 수도 있습니다. 값이 제대로 들어갔는지 임의의 배열 원소를 출력해서 값을 조회해봅니다.

<script>
  //배열 선언
  var num = [];

  //배열 원소에 값 대입
  num[0] = 1;
  num[1] = 2;
  num[2] = 3;
  num[3] = 4;

  //배열 원소 num[2]번 방 데이터 출력
  document.write ( num[2] );
</script>

결과

자바스크립트 배열과 반복문

배열 원소에 각각 번호가 붙어있기 때문에 반복문의 ++ 증감 연산자를 사용하면, 배열 원소끼리 연산을 할 수 있습니다. 배열 원소 번호에 변수를 따로 지정하면, 반복문으로 계산이 가능합니다.

<script>
  //배열 선언
  var num = [];

  //배열값 삽입
  num[0] = 1;
  num[1] = 2;
  num[2] = 3;
  num[3] = 4;

  //합계 변수 선언
  var sum = 0;

  //배열 원소용 변수 선언
  var i;

  //반복문으로 배열 원소 연산
  for (i = 0; i < 4; i++ )
  {
    sum = sum + num[i];
  }

  //합계 출력
  document.write(sum);
</script>

결과

자바스크립트 배열의 특징

자바스크립트 배열의 특징은 배열값에 자료형의 종류를 섞을 수 있다는 점입니다.

C언어의 경우 배열은 같은 자료형으로만 구성될 수 있지만, 자바스크립트는 하나의 배열에 숫자, 문자, 논리값 등 여러 자료헝이 섞일 수 있습니다.

<script>
  var mix = [ 987, "Hello", true];
</script>

자바스크립트 배열은 크기 제한에 문법이 느슨하다는 것이 특징입니다. C언어 같은 경우 생성된 배열 크기 이상의 값이 들어가면 오류가 발생합니다.

배열의 원소 개수는 2개로 결정되었습니다. 하지만 나중에 3번째 배열을 추가해도 자동으로 크기가 조절됩니다.

<script>
  var num = [1, 2];
  num[2] = 3;

  document.write(num);
</script>

결과