배열(Array)
자바스크립트에서 배열은 여러개의 값을 저장하고 관리하는데 사용되는 아주 기본적인 자료구조이다.
자바스크립트 배열은 타입이 고정되어 있지 않아서, 서로 다른 타입의 원소들을 적재할 수가 있다.
그리고 배열은 동적으로 크기가 변할 수 있어 자바(Java)와는 달리 크기를 지정할 필요가 없다.
📍 배열(Array) 용어
- 배열(array) : 이름과 인덱스로 참조되는 정렬된 값의 집합
- 배열 요소(array element) : 배열을 구성하는 각각의 값
- 인덱스(index) : 배열에서의 위치를 가리키는 숫자
배열 생성 방법
1. 배열 리터럴
2. Array() 생성자 함수
// 배열 리터럴
let 배열명 = ['요소', '요소', '요소',...];
// Array() 생성자 함수
let 배열명 = new Array();
let 배열명 = new Array(배열칸수);
let 배열명 = new Array('요소', '요소', '요소');배열 요소 접근
인덱스 번호를 참조하여 배열에 접근할 수 있다.
첫 번째 요소를 인덱스 0번째로 표현
배열명[인덱스번호];
📝 배열 요소 개수 확인 형태
배열명.length;
📝 객체 속성 콘솔 출력
console.dir(배열명);배열 요소 추가
배열 요소 추가 방식 5가지
- unshift() 메서드 이용 (배열 앞 부분에 값 삽입)
- push() 메서드 이용 (배열 뒷 부분에 값 삽입)
- length 프로퍼티 이용 (배열 뒷 부분에 값 삽입)
- 특정 인덱스를 지정하여 추가 (첫 번째 요소를 인덱스 0번째로 표현)
- splice() 메서드 이용 (배열 특정 위치에 요소 추가)
// unshift() 메서드 이용 (배열 앞 부분에 값 삽입)
배열명.unshift(추가할 요소);
// push() 메서드 이용 (배열 뒷 부분에 값 삽입)
배열명.push(추가할 요소);
// length 프로퍼티 이용 (배열 뒷 부분에 값 삽입)
배열명[배열명.length] = 추가할 요소;
// 특정 인덱스를 지정하여 추가
배열명[인덱스번호] = 추가할 요소;
// 배열 특정 위치에 요소를 추가하거나, 특정 위치의 요소를 삭제
배열명.splice(인덱스, 제거할요소개수, 추가할요소)
배열 요소 삭제
배열 요소 삭제 방식 4가지
- shift() 메서드 이용 (배열 앞 부분 값 삭제)
- pop() 메서드 이용 (배열 뒷 부분 값 삭제)
- splice() 메서드 이용 (배열 특정 위치에 요소 삭제)
- delete 연산자
// * 해당 요소를 완전히 삭제하여 length에도 반영되게 하기 위해서는 Array.prototype.splice 메소드를 사용
// shift() 메서드 이용 (배열 앞 부분 값 삭제)
배열명.shift();
// pop() 메서드 이용 (배열 뒷 부분 값 삭제)
배열명.pop();
// splice() 메서드 이용 (배열 특정 위치에 요소 삭제)
배열명.splice(시작 인덱스, 지울 요소 개수, 추가할 값1, 추가할 값2, ...);
// - 삭제 및 추가
// - 추가할 값은 생략 가능
// - 지워지는 값들을 리턴
// delete 연산자 (요소의 값만 삭제 : length에는 변함없음)
delete 배열명[인덱스번호];배열 메서드 (Array.prototype 메서드)
배열 메서드 방식 3가지
- 원본 배열을 변경하는 메서드
- 원본 배열은 변경하지 않고 참조만 하는 메서드
- 원본 배열을 반복적으로 참조하는 메서드
1. 원본 배열을 변경하는 메서드
| 메서드명 | 설명 |
| push() | 배열의 마지막에 요소를 추가하고, 배열의 총 길이를 반환 (arr[arr.length] = value와 같음) |
| pop() | 배열의 마지막 요소를 제거하고, 제거된 요소를 반환 |
| shift() | 배열의 첫 요소를 제거하고, 제거된 요소를 반환 (pop()과 위치가 반대) |
| unshift() | 배열의 가장 앞 쪽에 요소를 추가하고, 배열의 총 길이를 반환 |
| reverse() | 배열의 순서를 전부 반대로 교체 ex. 배열명.reverse(기준함수); → 기본적으로 문자열 기준으로 정렬(내림차순) |
| sort() | 배열 요소를 모두 문자열로 보고, 알파벳 순서에 따라 정렬 (숫자나 불리언 타입은 잘못 정렬될 수 있음) ex. 배열명.sort(기준함수); → 기본적으로 문자열 기준으로 정렬(오름차순) |
| splice() | 기존 배열 요소를 제거하거나 새로운 배열 요소 추가하여 배열 내용 변경 후 제거된 요소를 배열의 형태로 반환 ex. 배열명.splice(인덱스, 제거할요소개수, 추가할요소) |
| delete | 배열 요소를 삭제 (배열의 길이는 변하지 않음) |
2. 원본 배열은 변경하지 않고 참조만 하는 메서드
| 메서드명 | 설명 |
| join() | 전달받은 인수를 구분자로 사용하여 배열의 모든 요소를 하나의 문자열로 반환 ex. 배열명.join("구분점"); → 각 요소들을 구분점으로 연결해서 문자열로 만들어 리턴 |
| slice() | 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지를 새로운 배열로 반환 (종료 인덱스가 없으면 끝까지) |
| concat() | 인수로 전달받은 배열에 기존 배열을 연결하여 새로운 배열을 반환 ex. 배열명1.concat(배열명2); → 배열1과 배열2를 합쳐줌, 통째로 합쳐진 배열을 리턴, 기존에 있는 것은 바뀌지 않음 |
| toString() | 모든 요소를 쉼표(,)로 구분하여 하나의 문자열로 반환 |
| indexOf() | 전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환 항목을 찾을 수 없으면 -1 반환 (문자의 indexOf() 메서드와 비슷) |
| lastIndexOf() | 전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환 |
3. 원본 배열을 반복적으로 참조하는 메서드
| 메서드명 | 설명 |
| forEach() | 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행 |
| map() | 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 새로운 배열에 담아 반환 |
| filter() | 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 결과값이 true인 요소들만을 새로운 배열에 담아 반환 |
| reduce() | 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행 ● 콜백 함수에 배열의 첫 번째 요소와 두 번째 요소를 인수로 전달하고 실행, 반환된 결괏값과 세 번째 요소를 다시 인수로 전달하고 실행 → 이러한 동작을 반복하고 마지막 결괏값을 반환 ● 두 번째로 들어오는 인수는 초기값을 세팅 [init value] ● 기본적으로 왼쪽에서 오른쪽으로 작동하고, reduceRight() 메서드는 그 반대로 작동 |
| every() | 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결과값이 모두 true일 때에만 true를 반환 ● filter() 메서드와 다른 점? filter() 메서드는 true인 값을 반환하고 every() 메서드는 모든 배열을 순환 후 true of false를 반환 |
| some() | 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결과값이 하나라도 true이면 true를 반환 |
| find() | 테스트 함수를 통과하는 첫 번째 배열 요소의 값을 반환, 만족하는 값이 없으면 undefined 반환 |
| findIndex() | 테스트 함수를 통과하는 첫 번째 배열 요소의 인덱스를 반환, 만족하는 값이 없으면 -1 반환 ● indexOf() 메서드와 다른 점? indexOf() 메서드는 이퀄 연산, findIndex()는 조건 연산 |
| from() | 길이 속성이 있거나 반복 가능한 객체에서 Array 객체를 반환 (ex. 문자열을 배열로, 맵을 배열로) |
| entries() | 배열 요소별로 키(key)와 값(value)의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환 ● 이 때 키에는 인덱스가 저장되고, 값에는 배열 요소의 값이 저장된다 |
| keys() | 배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환 |
| values() | 배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환 |
| includes() | 해당 배열에 전달받은 값과 동일한 배열 요소의 존재 여부를 true or fasle로 반환 ● indexOf() 메서드와 다른 점은? NaN값을 확인할 수 있다 |
배열 반복문 (for 문)
배열 순회하는 방법 4가지
- for
- for in
- for of
- forEach
1. for 문
📝 for문 형태
for(let i=0; i < 배열명.length; i++) {
// [배열명.length]는 배열의 개수를 반환하기 때문에 마지막 배열번호는 개수-1입니다.
document.write(배열명[i]);
}
2. for in 문
배열에는 사용을 권장하지 않는다.
배열에 대해 for...in을 사용하면 오동작의 소지가 있습니다.
for...in은 순서를 보장하지 않기 때문에 index라는 순서가 있는 배열에 사용하면 예상치 못한 동작 오류를 낼 수 있습니다.
그래서 배열을 순회할 때는 for...of나 forEach를 사용하는 것이 더 적합합니다.
📝 for in문 형태
for(let 변수 in 배열명) {
// - 변수가 객체에 있는 Key들을 가져오며 반복
// - 배열은 인덱스, 객체는 필드를 가져옴
// - 반복하는 횟수는 배열이나 객체가 갖고 있는 값만큼만 반복하게 됩니다.
}3. for of 문
- break와 continue 사용 가능
- 인덱스 접근 불가 (인덱스가 필요한 경우에는 for in문을 사용하거나 for문을 사용)
- for...of는 배열, 문자열 Map, Set처럼 순회 가능한(iterable) 객체에서만 사용이 가능
📝 for of문 형태
for(let 변수 of 배열명) {
document.write(변수);
}
사용예시
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
document.write(num + ", "); // [실행 결과] 1, 2, 3, 4, 5,
}
4. forEach 문
- break와 continue 사용 불가
- forEach() 동기적으로 동작하므로, 비동기처리가 필요한 경우 for 루프나 for...of 루프 사용
- 반복문 동작 중 각 요소 값 변경 필요 시 map메서드 사용
map은 각 배열 요소에 대해 특정 함수를 적용하고 그 결과로 새로운 배열을 생성
1) 현재 배열의 모든 요소를 콜백함수와 함께 순회합니다.
2) 이 때 콜백함수는 순회하고 있는 현재 요소의 값, 현재 요소의 인덱스, 해당 배열을 인자로 사용합니다.
3) 각각의 요소에 콜백함수가 실행된 값이 리턴됩니다.
* forEach()는 새로운 배열을 생성하는 것이 아니기 때문에
결과 값을 보기 위해서는 console.log 혹은 push() 메서드를 콜백함수로 사용하여야 합니다.
📝 forEach문 형태
array.forEach() 는 배열을 순환하면서, 모든 요소 각각에 콜백함수를 한 번씩 실행한다.
// 요소 : 배열의 각 요소에 대한 참조
// 인덱스 : 현재 요소의 인덱스
// 배열 : forEach를 호출한 배열 자체
배열명.forEach(function(요소, 인덱스, 배열) {
document.write(요소, 인덱스, 배열);
});
// 화살표 함수 축약
배열명.forEach((요소, 인덱스) => console.log(요소, 인덱스, 배열));
사용예시
const array = [1, 2, 3, 4, 5];
array.forEach(function(e) {
document.write(e + "<br>"); // [실행 결과] 1 2 3 4 5
});forEach문을 사용하면 이렇게 바꿀 수 있습니다.
forEach문은 인덱스 변수를 따로 생성할 필요없이 콜백함수를 인자로 받아 배열의 각 요소에 접근합니다.
위의 예제에서 접근된 배열의 요소는 e로 표현할 수 있습니다.
이렇게 forEach문을 사용하면 반복문을 좀 더 간결하게 만들 수 있습니다.
사용예시
// ▶ 화살표 함수 축약
fruits.forEach((fruit, index) => console.log(fruit, index, array));
// fruits이라는 배열의 값을 fruit에 담고 각각의 인덱스를 index에 담아서 출력한다.
