배열이란?
변수에는 JavaScript에서 사용할 수 있는 다양한 타입의 값을 할당할 수 있지만 하나의 변수에는 하나의 값만 넣을 수 있었다. 만약 페이스북이나 카카오톡 같은 대규모 서비스에서 여러 개의 데이터를 한 번에 처리할 수 없다면 매번 새로운 변수를 선언하는 일을 반복해야 할 것이다.
그렇다면 여러 개의 데이터를 한 번에 처리하는 방법은 없을까? 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입은 바로 배열과 객체이다. 배열이나 객체를 사용하면 여러 번의 선언과 할당을 해야만 했던 작업을 단 한 번의 선언으로 해결할 수 있다.
배열 기초
// index [0][1][2][3][4]
let arr = [1, 2, 3, 4, 5];
- 배열은 순서가 있는 값이며 대괄호(square bracket)를 이용하여 배열을 만들고 각각의 요소(element)는 쉼표(comma)로 구분해준다.
- 순서는 인덱스(index)라고 부르며 0부터 번호를 매긴다.
1. 배열 조회
let arr = [1, 2, 3, 4, 5];
arr[2]; // 3
arr[5]; // undefined
arr[-1]; // undefined- arr 배열의 2번째 인덱스 조회
- 배열의 인덱스를 벗어나는 값을 조회하면 undefined를 반환한다.
2. 이차원 배열 조회
let test = [[1, 2], [3, 4], [5, 6]];
- test 배열의 1번째 인덱스의 값은?
test[1]; // [3, 4]- test 배열의 2번째 인덱스값의 1번째 인덱스의 값은?
test[2][1]; // [6]3. 배열의 값 변경
let arr = [1, 2, 3, 4, 5];
arr[2] = 100;
console.log(arr); // [1, 2, 100, 4, 5]- arr 배열의 2번째 인덱스의 값을 변경
4. 배열이 비어있는지 확인
let arr = [];
arr === [] // false- 서로 다른 주소를 참조하는 두개의 빈 배열이다.
arr.length === 0 // true- 배열의 길이가 0인지 확인하여 빈 배열임을 확인 할 수 있다.
배열 순회
let num = [10, 20, 30, 40, 50];
let sum = 0;
for(let i = 0; i < num.length; i++) {
sum += num[i];
}
console.log(sum); // 150- 배열의 요소를 모두 더한 값을 출력하는 반복문이다.
- 배열의 인덱스를 반복문 안에 지역 변수(i)로 선언하여 0부터 num 배열의 길이까지 1씩 증가하며 반복하고 0으로 초기화시킨 sum 변수에 num 배열 요소를 하나씩 더한다.
배열 메서드
1. Length
let arr = ['one', 'two', 'three', 'four', 'five'];
arr.length; // 5- 변수(배열)에 .을 붙여 속성(property)에 접근하고 배열의 길이를 반환한다.
- 배열의 인덱스 값과 다르다.
2. Array.isArray()
Array.isArray(obj)
let arr = ['one', 'two', 'three', 'four', 'five'];
typeof arr; // 'object'
Array.isArray(arr); // true- typeof는 변수의 타입을 할당하는 연산자이다. 배열은 'object'의 특수한 형태이기 때문에 'object'를 반환하므로 Array.isArray() 메서드를 사용한다.
- Array.isArray() 메서드는 파라미터에 인자를 입력받아 배열인지 판별하고 결과를 boolrean 값으로 반환한다.
3. push(), pop(), unshift(), shift()
arr.push(element1[, ...[, elementN]])
let arr = ['one', 'two', 'three', 'four', 'five'];
arr.push('six'); // 6
console.log(arr); // ['one', 'two', 'three', 'four', 'five', 'six']- 배열의 마지막에 요소를 추가하고 배열의 길이를 반환한다.
arr.pop(); // 'six'
console.log(arr); // ['one', 'two', 'three', 'four', 'five']- 배열의 마지막 요소를 제거하고 제거된 요소를 반환한다.
arr.unshift('zero'); // 6
console.log(arr); // ['zero', 'one', 'two', 'three', 'four', 'five']- 배열의 맨 앞쪽에 요소를 추가하고 배열의 길이를 반환한다.
arr.shift(); // 'zero'
console.log(arr); // ['one', 'two', 'three', 'four', 'five']- 배열의 맨 앞쪽 요소를 제거하고 제거된 요소를 반환한다.
4. indexOf()
arr.indexOf(searchElement[, fromIndex])
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.indexOf('e'); // 4
arr.indexOf('f'); // -1
- 배열에서 찾으려는 특정 요소를 입력하고 배열에 찾으려는 요소가 존재하면 인덱스를 반환, 존재하지 않으면 -1을 반환한다.
arr.indexOf('a') !== -1 // true- arr 배열에서 'a' 요소를 검색했을때 -1이 아니면 해당 요소는 배열에 존재한다.
5. includes()
arr.includes(valueToFind[, fromIndex])
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.includes('a'); // ture
arr.includes('f'); // false- 배열이 특정 요소를 포함하는지 판별하여 boolrean 값으로 리턴한다.
6. join()
arr.join([separator])
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.join(''); // 'abcde'
arr.join(' '); // 'a b c d e'
arr.join('-'); // 'a-b-c-d-e'- 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
- 구분자(separator)를 지정하면 배열의 각 요소들을 구분하여 반환한다.
7. slice()
slice(start[, end])
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.slice(1, 4); // ['b', 'c', 'd']
arr.slice(-4, 4); // ['b', 'c', 'd']
arr.slice(-2); // ['d', 'e']- 배열의 start부터 end까지(end 미포함)의 얕은 복사본을 새로운 배열 객체로 반환하다.
- 음수를 지정한 경우 배열의 마지막 요소부터 나타낸다.
- 원본 배열은 수정되지 않는다.
8. splice()
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(2, 0, 'x', 'y'); // []
console.log(arr); // ['a', 'b', 'x', 'y', 'c', 'd', 'e']- 2번째 인덱스부터 요소를 제거하지 않고 'x', 'y' 추가
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(0, 3); // ['a', 'b', 'c']
console.log(arr); // ['d', 'e']- 0번째 인덱스에서 요소 3개 제거
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(1, 3, 'x'); // ['b', 'c', 'd']
console.log(arr); // ['a', 'x', 'e']- 1번째 인덱스부터 3개의 요소를 제거하고 'x' 요소 추가
- 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
- 원본 배열은 수정된다.
