커뮤니티

고용노동부, 산업인력공단과 함께하는 강원도 유일한 기업중심 IT전문교육기관 ICT융합캠퍼스만의 특별한교육입니다.
공인 IT숙련기술인의 다양한 접근방법으로 전문가다운 실무교육을 받을 수 있습니다.

Category

교육강좌

클라이언트 JavaScript 사전 - Array (배열)

페이지 정보

작성자 관리자 댓글 0건 조회 5,321회 작성일 20-07-20 14:53

본문

Array (배열)

요약(Summary)

연관되어 있는 복수의 값을 하나의 컨테이너로 관리

문법(Syntax)

1
2
3
4
5
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, element2, ..., elementN);
// Array literals
var lit = [element0, element1, element2, ..., elementN];

인자(Parameters)

인자명 데이터형 필수/옵션 설명
arrayLength number 옵션 배열의 원소수(length)를 지정한다. 생략하면 배열의 원소수는 1이 된다.
elementN number 옵션 배열에 포함될 원소의 값

반환값(Return)

Array

설명(Description)

배열은 연관된 데이터들을 하나의 그룹으로 묶어서 효율적으로 데이터들을 관리하기 위해서 사용된다.
배열에 저장되는 데이터는 순차적으로 저장되고 고유한 index 값을 가지고 있다.
하나의 배열을 구성하는 단위 데이터들을 'element', '원소'라고 부른다.
배열에 특정 원소에 접근하기 위해서는 arrayValue[index] 의 형식으로 한다.
배열의 원소를 식별하기 위해서 사용하는 index는 숫자가 아니라 문자를 사용할수도 있다. Associative  Array연관배열이라고 부른다.

예제(Example)

1
2
3
4
5
6
7
// Array를 선언하는 방법, a, b, c가 같다.
var a = new Array(1,2,3);
var b = [1,2,3];
var c = new Array();
c.push(1);
c.push(2);
c.push(3);
1
2
3
4
5
// Array와 반복문
var a = new Array(1,2,3);
for(var i = 0; i < a.length; i++){
alert(a[i]); // array a의 인덱스로 i를 0부터 2까지 순차적으로 대입한 후에 alert
}
1
2
3
4
5
6
7
8
9
// 첫번째 인자의 형식에 따른 차이
var a = new Array(5);
alert(a); // 값이 없는 5개의 원소를 포함한 array를 생성한다. [undefined,undefined,undefined,undefined,undefined]
var b = new Array('5');
alert(b); // string object 5를 원소로 하는 array를 생성한다. ["5"]
var c = new Array(new Number(5))
alert(c); // number object 5를 원소로 하는 array를 생성한다. [5]
1
2
3
4
5
// 배열의 원소에 엑세스 하는 방법
var a = new Array(1,2,3);
alert(a[0]); // 1
alert(b[0]); // 2
alert(c[0]); // 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Associative array
codingeverybody = new Array();
codingeverybody['html'] = '웹문서를 만든다';
codingeverybody['css'] = 'html을 꾸며준다';
codingeverybody['javascript'] = 'html을 동적으로 제어한다';
codingeverybody['php'] = 'html을 서버측에서 동적으로 생성한다';
alert(codingeverybody['html']); // string, 웹문서를 만든다
alert(codingeverybody['css']); // string, html을 꾸며준다
codingeverybody.push(1);
codingeverybody.push(2);
alert(codingeverybody); // array, [1,2]
console.log(codingeverybody.length); // number 2
// Associative array를 자바스크립트에서는 배열이 아니라 object로 처리한다.
// codingeverybody는 array object이지만, 동시에 object이기도 하기 때문에
// html, css, javascript, php는 object codingeverybody의 원소가 아니라 property(속성)으로 사용된다.
// 그래서 위의 코드에서 codingeverybody.length 가 2가 된다.

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

답변목록

등록된 답변이 없습니다.