1. Array 객체
JavaScript의 배열은 크기 제한, 타입 제한이 없으며, 배열을 다루는데 유용한 메서드들을 모두 가지고 있다.
(Java의 ArrayList와 유사)
1.1. Array 객체의 배열 생성 및 초기화
- 배열 생성 방법
var arr = [ ];
var arr = new Array( );
var arr = new Array(3);var arr1 = []; // JS에서 권장하는 배열생성 방법 var arr2 = new Array(); // 위와 동일함 var arr3 = new Array(3); // 배열의 크기 지정도 가능하다(쓸 데는 없음)
- 배열 초기화 방법
arr [index] = 변수;
var arr = [변수, 변수, 변수];
var arr = Array(변수, 변수, 변수);arr1[0] = 'a'; arr1[1] = 'b'; arr1[5] = 'c'; // arr1[2~4]은 empty로 채워진다 arr1.length = 6 / arr1[2~4] = undefined console.log(arr1, arr2, arr3, arr1[4]);
- 반복문을 통한 배열 접근 방법
(1) 기본 반복문(basic loop문)
for(var i = 0; i < arr1.length; i++) { console.log(arr1[i]); }(2) 향상된 반복문(for of문)
자바의 향상된 반복문과 비슷 ( : -> of 로 변경)for(var i of arr1) { console.log(i); }(3) 향상된 반복문(for in문)
객체 및 배열에서 반복문을 사용할 때 사용하는 반복문으로 in 기준 좌측에는 배열의 '인덱스'가 대입(정확히는 key값)
for(var index in arr1) { console.log(arr1[index]); // key값이 없는 arr1[2~4]는 출력안됨 }
기본반복문 for of문 for in문 key값이 없는 arr1[2]~arr1[4]는 출력 X
1.2. Array 객체의 각종 메서드
(1) indexOf( ) : 반복문으로 배열을 순회하면서 문자열과 일치하는 인덱스를 찾아서 반환
var arr = ['apple', 'melon', 'banana', 'melon'];
console.log(arr.indexOf('melon')); // 1
console.log(arr.indexOf('tomato')); // -1 : 찾고자 하는 문자열이 없다면 -1 반환
console.log(arr.lastIndexOf('melon')); // 3 : 뒤에서부터 몇 번째 인덱스인지(2) concat( ) : 두 배열을 병합
var arr1 = ['a', 'b', 'c'];
var arr2 = [1,2,3,4,5];
var arr3 = arr1.concat(arr2);
console.log(arr3);(3) join( ) : 요소를 지정한 구분자로 합친 문자열을 리턴
var arr = [1,2,3,4,5];
var a = arr.join; // 구분자 생략 시 기본값 ","
var b = arr.join('');
console.log(a);
console.log(b);| indexOf() | concat() | join |
|---|---|---|
 |  |  |
(4) reverse( ) : 원본 배열 요소의 순서를 뒤집어서 값을 리턴. 원본배열의 값도 변경된다.
var arr = [1,2,3,4,5];
var reversedArr = arr.reverse(); // 원본배열의 값도 변경
console.log(reversedArr);
conosle.log(arr);(5) sort( ) : 오름차순 정렬하여 리턴 / 내림차순 정렬 리턴
- 오름차순 정렬
var arr = [4,2,3,1,5];
arr.sort();
console.log(arr);- 내림차순 정렬 : sort함수의 매개변수로 "내림차순 정렬기준 제시"
arr.sort ( function(a,b) {
return b-a; // a-b이면 오름차순
});
console.log(arr); - 문자열 오름차순 정렬 : 동일
var names = ['홍길동', '김길동', '스프링', '오라클'];
console.log(names.sort());- 문자열 내림차순 정렬
names.sort(function(a,b){
if (a > b) return -1; // a가 b보다 클 때 음수값이 반환되면 자료교환이 발생
else if (a < b) return 1;
else return 0;
});
람다식
console.log(names.sort((a,b) => b-a));| reverse | sort 콘솔 |
|---|---|
 |  |
(6) push( ) : 배열 마지막 인덱스에 요소를 추가 후 변경된 길이를 리턴해주는 함수
var arr = [];
var k = 1;
while(true) {
arr.push(k++);
if(k > 100) break;
console.log(arr);
}(7) pop( ) : 배열 마지막의 요소를 제거 후 제거된 요소를 리턴해주는 함수
var copy = [];
// arr.length > 0 : arr 배열에 아직 요소가 남았을 때 / arr.length가 존재하면 true이므로 존재하지 않을 때까지 반복
while(arr.length) {
copy.push(arr.pop());
}
console.log(copy);
console.log(arr);| arr.push & copy.push | arr.pop |
|---|---|
 |  |
(8) unshift( ) : 배열 0번째 인덱스에 요소를 추가 후, 변경된 길이를 리턴
var arr = ['사과', '배','아보카도'];
arr.unshift('감자');
arr.unshift('양파');
console.log(arr);(9) shift( ) : 배열 0번째 인덱스의 요소를 제거 후, 제거된 요소를 리턴
console.log(arr.shift());
console.log(arr)| unshift & shift |
|---|
 |
| unshift 및 shift를 사용할 때마다 배열의 모든요소를 하나씩 뒤로 밀거나 앞으로 땡겨줘야 하므로 push & pop보다 성능이 좋지 않다. |
(10) slice( )(시작인덱스, 끝인덱스) : 시작인덱스에서 끝인덱스의 '전'까지 요소를 가져와서 새로운 배열로 반환(문자열의 substring과 비슷)
var arr = ['a','b','c','d','e'];
var copy1 = arr.slice(1,4); // b,c,d만
var copy2 = arr.slice(1); // 1부터 끝까지
console.log(copy1, copy2, arr);(11) splice( )(시작인덱스, 삭제할 갯수, 추가할 요소...) : 요소를 추가 & 제거
- 시작인덱스부터 삭제할 갯수만큼 요소를 제거하고, 시작인덱스에 추가할 요소들을 추가(삭제할 갯수 생략 시 끝까지 제거)
arr 배열을 [a x y c d e] 로 바꾸고 싶다면? b 삭제 후 그 위치에 x, y 추가
var arr = ['a','b','c','d','e'];
arr.splice(1, 1, 'x', 'y');
console.log(arr);| slice |
|---|
 |
| splice |
|---|
 |
1.3. 배열을 활용하는 각종 함수
(1) forEach(실행할 함수)
배열의 요소를 단순 반복하고자 할 때 사용하며 NodeList에도 사용가능한 함수이다.
- arr.forEach ( function ( 현재 반복 중인 요소, 인덱스값 ) {
실행할 코드
} ) - arr의 각 인덱스가 "현재 반복 중인 요소"로 들어가서 순차적으로 반복된다.
var arr = [1,2,3,4,5];
var sum = 0;
arr.forEach(function(element, index) {
sum += element;
})console: 15
예제 1. html의 모든 버튼의 value 값 가져오기
var btnArr = document.querySelectorAll('input[type=button]');
var btnValues = [];
btnArr.forEach(function(element, index) {
btnValues[index] = element.value;
또는 btnValues.push(element, indeX);
});
console.log(btnValues);
| var sum과 var btnValues 출력 |
|---|
 |
(2) find(실행할 함수)
배열에서 "내가 지정한 조건"을 만족하는 단 1개의 요소를 반환시켜주는 함수(지정한 조건을 함수로 만들면 된다)
- arr.find (function ( element,index ) {
내가 원하는 요소를 반환할 수 있는 조건식
})
id가 mkid인 배열 요소 리턴
var objArr = [
{id : 'mkid', name: '최'},
{id : 'mkid2', name: '최2'},
{id : 'holyshit', name: '김'},
{id : 'mkid3', name: '최3'},
{id : 'mkid4', name: '최4'}
]
var findOne = objArr.find(function(item,index) {
if(item.id == 'mkid') return true;
})
console.log(findOne);(3) filter(실행할 함수)
배열에서 "내가 지정한 조건"을 만족하는 n개의 요소를 반환시켜주는 함수
- arr.filter(function(element, index) {
내가 원하는 요소를 반환시킬 수 있는 조건식
})
id에 mkid가 포함되어 있는 배열 요소들 리턴
var filteredArr = objArr.filter(function(item,index) {
if(item.id.includes('mkid')) return true;
})
console.log(filteredArr);(4) map(실행할 함수)
배열 안의 데이터를 내가 원하는 요소로 "변환"시켜 반환
- arr.map(funtion(element, index){
변환시키고자 하는 값을 작성
})
objArr 배열의 속성명을 변경(new + 기존속성명)
var mappedArr = objArr.map(function(item, index) {
return {newId : `new${item.id}`, newName : `new${item.name}`};
});
console.log(mappedArr);| find 함수 | filter 함수 | map 함수 |
|---|---|---|
 |  |  |
