자바스크립트 배열(javascript array) 사용법

배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 데이터는 순차적으로 저장되며 중복이 가능합니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다. 자바스크립트에서 배열의 사용법을 알아보겠습니다.

 

1. 배열 생성하기

배열을 생성하는데는 예전 방식인 new 명령을 사용하는 방법과 리터럴 표기법(literal notation) 을 사용하여 생성하는 방식이 있습니다.

 

// 길이가 0인 예전 방식의 배열 생성
var myArray1 = new Array();

// 길이가 10인 예전 방식의 배열 생성
// 10개의 자리에는 아무것도 들어 있지 않습니다.
var myArray2 = new Array(10);

// 길이가 0인 literal notation 방식의 배열 생성
var myArray3 = [];

// 예전 방식의 생성과 동시에 초기화
var myArray4 = new Array(1, 2, 3,"홍길동", "아무개");

// literal notation 방식의 생성과 동시에 초기화
var myArray5 = [1, 2, 3, "홍길동", "아무개"];

 

자바스크립트 배열에는 숫자, 문자열, 객체와 같은 서로 다른 타입의 데이터가 혼합되어 들어갈 수 있습니다.

 

※ 참고

배열 요소를 프로그램으로 동적으로 만들 경우 마지막 배열 요소 끝에 콤마(,)를 붙이지 않으려면 매 반복마다 마지막인지를 체크 해야 합니다. 최신 브라우저에서는 마지막에 붙는 콤마를 무시하여 이러한 작업을 쉽게 할 수 있도록 해 줍니다.

var myArray4 = new Array(1, 2, 3, "홍길동", "아무개", ); var myArray5 = [1, 2, 3, "홍길동", "아무개", ];

 

IE 에서는 new Array() 구문에서 마지막 콤마를 사용하면 에러 입니다. 리터럴 표기법을 사용할 경우 IE 9 이상에서는 정상적으로 동작하고, IE 8 이하에서는 요소의 갯수가 하나 더 포함됩니다. 위의 예에서 배열 길이가 6으로 나옵니다.

 

2. 배열내의 요소에 접근하기

배열의 길이를 구하기 위해서는 length 프로티를 사용합니다.

console.log(myArray5.length); // 5를 출력합니다.

 

배열 요소에 접근하기 위해서 인덱스를 사용합니다. 배열 인덱스는 0부터 시작합니다.

var lastItem = myArray5[4]; // 아무개

 

데이터가 존재하지 않는 인덱스를 사용하게 되면 값을 undefined 입니다.

var notExist = myArray5[5]; // undefined

 

배열 요소의 내용을 바꾸려면 지정위치에 다른 값을 대입합니다.

// 첫번째 요소의 값을 "홍길동" 으로 변경합니다. myArray5[0] = "홍길동";

 

3. 배열 끝에 값을 추가하기

배열의 끝에 값을 추가하는 방법을 두 가지가 있습니다.

// push 메소드를 사용하여 값을 추가합니다. myArray5.push(6); // 배열 인덱스를 이용하여 값을 추가 합니다. myArray5[myArray5.length] = 6;

 

배열의 길이는 항상 배열의 마지막 요소 다음을 가리키는 인덱스가 됨을 이용합니다.

 

만약 현재 배열의 길이에서 건너뛰어 인덱스를 사용하여 값을 입력하면 가운데에는 undefined 가 삽입됩니다.

// myArray5의 길이가 6 일경우 다음을 실행하면 myArray5[8] = 8; // myArray5[6] 과  myArray5[7] 의 값은 undefined 가 됩니다.

 

4. 배열 요소 삭제하기

특정 위치의 배열 요소를 삭제하기 위해서 사용할 수 있는 방법들 입니다.

 

세번째 요소를 지우지만 자리는 남겨 둡니다. 즉, 배열의 길이는 변하지 않습니다. myArray[2]의 값은 undefined 가 됩니다.

delete myArray[2];

 

세 번째 자리부터 한개를 지우고, 지워진 값을 반환합니다. 배열  크기는 지운 만큼 줄어듭니다.

// 배열.splice(시작인덱스, 지울갯수[,교체할배열항목[, ...]]); var value = myArray.splice(2, 1); // 세번째부터 한개를 8로 바꾼다. var value = myArray.splice(2, 1, 8);

 

배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다. 배열크기가 하나 줄어듭니다.

var value = myArray.pop();

 

배열의 첫번째 요소를 제거하고, 제거된 요소를 반환합니다. 배열크기가 하나 줄어듭니다.

var value = myArray.shift();

 

5. 배열에 요소를 삽입하기

배열의 세번째 위치에 요소를 삽입합니다.

myArray.splice(2, 0, "A");

 

배열의 첫 번째 위치에 요소를 추가 합니다.

myArray.unshift("A");

 

6. 배열을 연결 합니다.

var array1 = [1,2,3]; var array2 = [4,5,6]; var array3 = [7,8,9]; // 두 배열을 연결 합니다. var array3 = array1.conat(array2); console.log(array3); // 1,2,3,4,5,6   // 여러개의 배열을 연결 합니다. var array4 = array1.concat(array2, array3); console.log(array4); // 1,2,3,4,5,6,7,8,9

 

 

※ 참고

 자바스크립트 배열에서 사용할 수 있는 메소드 목록 입니다.

메소드	기능
concat()	두개 또는 그 이상의 배열을 연결한 배열을 반환합니다.
copyWithin()	배열 내에서 첫 번째 인자 위치의 요소를 두 번째 인자 위치에 복사합니다.
every()	인자로 주어진 함수로 배열내의 모든 요소를 테스트해서 참일 경우 true를 반환합니다.
fill()	배열내의 모든 요소의 값을 주어진 값으로 채웁니다.
filter()	인자로 주어진 함수로 배열내의 모든 요소를 테스트해서 참인 요소만으로 만들어진 배열을 반환합니다.
find()	인자로 주어진 함수로 배열내의 요소를 테스트해서 참인 첫 번째 요소를 반환 합니다. 찾지 못하면 undefined를 반환합니다.
findIndex()	인자로 주어진 함수로 배열내의 요소를 테스트해서 참인 첫 번째 요소의 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다.
forEach()	배열내의 모든 요소에 대해 인자로 주어진 함수를 실행합니다.
indexOf()	인자로 주어진 값과 같은 값을 가지는 첫 번째 요소의 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다.
isArray()	인자로 주어진 객체가 배열이면 true를 반환합니다. Array.isArray(object);
join()	배열의 모든 요소를 인자로 주어진 분리자로 연결한 문자열을 반환합니다. 분리자를 주지 않으면 콤마(,)가 분리자 입니다.
lastIndexOf()	인자로 주어진 값을 배열의 뒤에서 부터 찾아서 첫 번째로 발견된 요소의 인덱스를 반환합니다. 찾지 못하면 -1을 반환합니다.
map()	인자로 주어진 함수에 모든 각각의 요소를 적용한 값으로 이루어진 배열을 반환합니다.
pop()	배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다. 배열의 길이가 1 줄어 듭니다.
push()	배열의 끝에 인자로 주어진 같을 추가 합니다. 새 배열의 길이를 반환합니다.
reduce()	인자로 주어진 함수를 모든 요소에 적용하여 만들어진 단일 값을 반환합니다. 배열 요소에 대해 왼쪽에서 오른쪽으로 적용해 나갑니다. array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
reduceRight()	reduce() 와 같은 기능을 배열 요소에 대해 오른쪽에서 왼쪽으로 적용해 나갑니다.
reverse()	배열 요소의 순서가 뒤집힌 배열을 반환합니다.
shift()	배열에서 첫번째 요소를 제거하고, 제거된 요소를 반환합니다.
slice()	배열의 일부분을 잘라서 배열로 반환합니다. array.slice(start, end)
some()	인자로 주어진 함수를 배열의 요소에 대해서 적용해서 하나라도 참이면 true 를 반환합니다.
sort()	배열의 요소를 정렬합니다. 인자로 정렬에 사용될 비교 함수를 줄수 있습니다. 인자가 없으면 알파벳순으로 오른차순으로 정렬합니다.
splice()	배열에 요소를 추가 또는 삭제 합니다.
toString()	배열을 문자열로 변환하여 그 결과를 반환합니다.분리자로 콤마가 사용됩니다.
unshift()	배열의 첫 번째 자리에 새 요소를 추가합니다. 새로운 배열의 길이를 반환합니다.
valueOf()	배열 그 자체를 반환합니다.var b = a.valueOf(); 라면 a === b 입니다.