[JavaScript] 배열 (Array) 객체

 

배열은 Array 생성자로 생성된 Array 타입의 객체로서, 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용합니다.

 

목차

 

 

배열 생성

new 키워드 이용

매개변수가 1개이고 숫자인 경우 해당 값을 length로 갖는 빈 배열을 생성하고, 그 외의 경우 매개변수로 전달된 값을 요소로 갖는 배열을 생성합니다.

var arr = new Array(2);
console.log(arr); //(2) [empty × 2]
var arr2 = new Array(10, 20, 30);
console.log(arr2); //(3) [10, 20, 30]

 

리터럴 이용

0개 이상의 값을 쉼표로 구분하여 대괄호([])로 묶습니다.

var arr = [10, 20, 30];
console.log(arr); //(3) [10, 20, 30]

 

 

 

배열 특징

각 배열 요소의 접근은 배열명[index]로 접근하며, 인덱스는 0부터 시작합니다. 존재하지 않는 요소에 접근하면 undefined를 반환합니다. 배열의 크기는 length 속성을 사용해 얻습니다.

var arr = [10, 20];
console.log(arr[0]); //10
console.log(arr[1]); //20
console.log(arr[2]); //undefined
console.log(arr.length); //2

 

배열의 길이에 제한이 없고 동적으로 배열의 요소를 추가할 수 있습니다.

var arr = [];
console.log(arr[0]); //undefined
arr[1] = 10;
arr[3] = 30;
console.log(arr); //(4) [empty, 10, empty, 30]
console.log(arr.length); //4

 

자바스크립트의 배열은 저장할 수 있는 데이터 타입이 제한되지 않습니다.

var arr = [
	1, "홍길동", true, null, undefined, 
	['nested array'], { object: true }, function () {}
];
console.log(arr.length); //8

 

 

 

배열 순회

for 문

var arr = [10, 20, 30];
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}
//10    20    30

 

for...in 문

for ( var idx in arr) {
	console.log(idx, arr[idx]);
}
//0  10    1  20    2  30

 

for...of 문

for (var item of arr) {
	console.log(item);
}
//10    20    30

 

 

 

배열 메소드

 

메소드	설명
push(값 [, 값2, 값3])	배열의 마지막에 새로운 요소를 추가
pop()	배열의 마지막 요소를 제거
indexOf(값)	지정한 값에 해당하는 index 값 리턴
sort([compareFunction])	배열에 저장된 요소를 지정한 기준에 따라 정렬
reverse()	배열 요소들의 순서를 거꾸로 변환하여 리턴
slice(start, end)	지정한 범위(start idx ~ end -1 idx)의 배열 요소를 복사하여 리턴
splice(start,delCount[,값1,값2])	지정한 범위(start idx 부터 delCount 개수 만큼)의 배열 요소를 제거하고 그 위치에 새로운 요소를 추가
join(separator)	배열과 지정된 separator를 조인하여 리턴

 

push(값 [, 값2, 값3])

인자로 전달받은 모든 값을 원본 배열의 마지막에 요소로 추가하고 변경된 length 값을 반환합니다. 

var arr = [1, 2];
var result = arr.push(3, 4);
console.log(result); //4
console.log(arr); //(4) [1, 2, 3, 4]

 

length 속성을 사용하여 배열의 마지막에 직접 요소를 추가할 수 있습니다. 위의 예시와 동일한 처리를 합니다.

var arr = [1, 2];
arr[arr.length] = 3;
arr[arr.length] = 4;
console.log(arr); //(4) [1, 2, 3, 4]

 

pop()

원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환합니다. 원본 배열이 빈 배열이면 undefined를 반환합니다. push 메소드와 pop 메소드를 이용하면, 데이터를 마지막에 넣고 마지막에 넣은 데이터를 먼저 꺼내는 후입 선출(LIFO - Last In First Out) 방식의 스택(stack) 자료 구조를 구현할 수 있습니다.

var arr = [1, 2];
var result = arr.pop();
console.log(result); //2
console.log(arr); //[1]

 

indexOf(값)

원본 배열에서 인자로 전달된 요소를 검색하여 인덱스를 반환합니다. 중복되는 요소가 있는 경우 첫번째 인덱스를 반환하고, 해당하는 요소가 없는 경우 -1을 반환합니다. 몇 번째 인덱스부터 검색을 시작할지 지정할 수도 있습니다.

var arr = ['A', 'B', 'B', 'C'];
console.log(arr.indexOf('B')); //1
console.log(arr.indexOf('D')); //-1
console.log(arr.indexOf('B', 2)); //2

 

sort([compareFunction])

원본 배열에 저장된 요소를 지정한 기준에 따라 정렬한 후 반환합니다. 정렬 순서를 함수로 정의할 수 있으며, 생략할 경우 배열의 요소들을 문자열로 변환하고 유니코드 값 순서대로 정렬됩니다. 

 

(1) 숫자 오름차순 정렬

var arr = [5, 1, 13, 10, 10];
arr.sort(function(a, b) {
	if(a > b) return 1;
	if(a === b) return 0;
	if(a < b) return -1;
});
console.log(arr); //(5) [1, 5, 10, 10, 13]

//단순화 가능
arr.sort(function(a, b) {
	return a - b;
});

 

(2) 숫자 내림차순 정렬

var arr = [5, 1, 13, 10, 10];
arr.sort(function(a, b) {
	if(a > b) return -1;
	if(a === b) return 0;
	if(a < b) return 1;
});
console.log(arr); //(5) [13, 10, 10, 5, 1]

//단순화 가능
arr.sort(function(a, b) {
	return b - a;
});

 

(3) 문자열 오름차순 정렬

var arr = ["banana", "apple", "mango"];
arr.sort();
console.log(arr); //(3) ['apple', 'banana', 'mango']

 

(4) 문자열 내림차순 정렬

var arr = ["banana", "apple", "mango"];
arr.sort(function(a, b) {
	if(a > b) return -1;
	if(a === b) return 0;
	if(a < b) return 1;
});
console.log(arr); //(3) ['mango', 'banana', 'apple']

 

reverse()

원본 배열 요소의 순서를 반대로 변환하여 반환합니다. 

var arr = [5, 1, 13, 10, 10];
arr.reverse();
console.log(arr); //(5) [10, 10, 13, 1, 5]

 

slice(start, end)

지정한 범위(start idx ~ end -1 idx)의 배열 요소를 복사하여 반환합니다. end 값을 지정하지 않으면 start idx 이후의 모든 요소를 반환합니다. 음수를 지정할 경우 배열의 끝에서 요소를 반환합니다. 

var arr = ['A', 'B', 'C'];
var res = arr.slice(0, 2); //0번부터 1번까지
console.log(res); //['A', 'B']

res = arr.slice(1); //1번 이후 모든 요소
console.log(res); //['B', 'C']

res = arr.slice(-1); //배열의 끝에서 첫번째
console.log(res); //['C']

res = arr.slice(-2); //배열의 끝에서 두번째 이후 모든 요소
console.log(res); //['B', 'C']

console.log(arr); //['A', 'B', 'C'] //원본은 그대로

 

splice(start,delCount[,값1,값2])

원본 배열에서 지정한 범위(start idx 부터 delCount 개수 만큼)의 배열 요소를 제거하고 그 위치에 새로운 요소를 추가한 후, 제거한 요소를 배열로 반환합니다. delCount 값을 지정하지 않으면 start idx 이후의 모든 요소를 제거합니다. 

var arr = [1, 2, 3, 4];
var res = arr.splice(1, 2); //1번부터 2개 제거한 후 반환
console.log(res); //[2, 3]
console.log(arr); //[1, 4] //원본 변경됨 

var arr2 = [1, 2, 3, 4];
res = arr2.splice(1); //1번 이후 모든 요소 제거
console.log(res); //[2, 3, 4]
console.log(arr2); //[1]

var arr3 = [1, 2, 3, 4];
res = arr3.splice(1, 2, 100, 200); //1번부터 2개 제거 후 요소 추가
console.log(res); //[2, 3]
console.log(arr3); //[1, 100, 200, 4]

arr3.splice(1, 0, 10); //1번 자리에 요소 추가
console.log(arr3); //[1, 10, 100, 200, 4]

 

join(separator)

원본 배열의 모든 요소를 문자열로 변환한 후, 구분자(separator)로 연결한 문자열을 반환합니다. 구분자는 생략 가능하며 기본 구분자는 , 입니다.

var arr = ["A","B","C"];
var str = arr.join(" and ");
console.log(str); //A and B and C

 

 

 

참고

https://poiemaweb.com/js-array

https://hianna.tistory.com/409