데이터의 집합으로 여러개의 값을 하나의 이름으로 묶어 사용할 수 있게 도와준다.
생성
let arr = new Array()
'( )'안에 정수를 넣어 해당 정수만큼의 길이를 갖는 배열을 생성한다. 숫자를 한개만 넣으면 배열의 길이로, 여러개의 숫자는 배열의 원소로 인식한다.
let arr = []
[ ]
안에 정수를 넣어 해당 정수만큼의 길이를 갖는 배열을 생성한다. 숫자를 한개만 넣으면 배열의 길이로, 여러개의 숫자는 배열의 원소로 인식한다.
literal
[1, 3, 4, 11]
이렇게 literal로 배열을 생성하는 것도 가능하다. 선언한 당시에는 접근할 수 있지만, 어떠한 변수에 값을 지정하지 않았음으로 이후에는 접근이 불가능하다.
접근
각괄호 + 인덱스를 통해 각 원소에 접근 할 수 있으며, 원소에 값을 저장 할 수도 있다. 심지어 존재하지 않는 원소에도 접근이 가능하다. 이 경우
undefined
를 출력한다.
Method
추가/제거
1) arr.push(items)
배열 맨 뒤에 items 요소를 추가한다. 새로운 배열의 길이를 반환한다.
2) arr.pop(items)
배열 맨 뒤에 items 요소를 반환하고 제거한다.
3) arr.shift(items)
배열 맨 앞에 items 요소를 반환하고 제거한다.
4) arr.unshift(items)
배열 맨 앞에 items 요소를 추가한다. 새로운 배열의 길이를 반환한다.
splice / slice
1) splice
배열에 요소를 삭제, 교체, 추가할 수 있게 해주는 method. index, count, items 순서로 인자를 전달한다. index의 값으로 음수를 전달하는 것이 가능하다.
var avengers = ['spiderman', 'ironman', 'hulk', 'thor'];
// splice() : 기존의 요소를 삭제하거나, 교체하거나, 새 요소를 추가합니다.
//인덱스, 카운트, 아이템 순서로 인자를 전달합니다.
// 아이템 삭제.
avengers.splice(3, 1); // 3번 인덱스 요소 하나만 삭제
avengers.splice(3); // 3번 인덱스부터 전부 삭제
// 아이템 추가
avengers.splice(3, 0, 'blackwidow');
// 아이템 교체
avengers.splice(1, 1, 'hulk');
// 여러개의 아이템을 한번에 추가할 수 있다.
2) slice
두 개의 인자를 전달하여 배열안에 있는 요소를 새로운 배열로 반환한다. 원본 요소가 바뀌지 않는다. 특히 두 번째 인자에 해당하는 인덱스의 아이템은 포함하지 않고 음수 인덱스를 사용하는 것이 가능하다.
var avengers = ['spiderman', 'ironman', 'hulk', 'thor'];
avengers.slice(0);
//배열 처음부터 끝까지 반환
avengers.slice(1, 4);
//배열 1~3 index 값을 반환
sort
배열의 요소를 정렬한 후 그 배열을 반환하는 함수. 배열을 직접적으로 변경하고 숫자형 데이터 정렬의 단점을 해결하기 위해 비교 함수(compareFunction)를 사용할 수 있다.
Example
var arrNum2 = [13, 9, 10, 2];
arrNum2.sort(function (a, b) {
if (a > b) {
return 1
} else if (b > a) {
return -1;
} else {
return 0;
}
});//오름차순 정렬
숫자의 경우 아래와 같은 방식도 가능하다.
arrNum2.sort((a, b) => a - b);
Object의 값을 하나 정해 정렬하는 것도 가능하다.
var studentList = [
{
id: 1, product: '연필', stock: 10
},
{
id: 2, product: '색종이', stock: 33
},
{
id: 3, product: '체육복', stock: 2
},
{
id: 4, product: '만연필', stock: 0
}
]
studentList.sort(function (a, b) {
if (a.product > b.product) {
return 1;
} else if (b.product > a.product) {
return -1;
} else {
return 0;
}
});//각 object의 product를 기준으로 오름차순 정렬