해당 포스팅은 위키북스의 모던 자바스크립트 Deep Dive라는 책을 독학하며 기록하는 글입니다.
배열은 여러 개의 값을 순차적으로 나열한 자료구조이다.
자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말하는데, 여기서 말하는 배열은 하나의 테이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이러한 배열을 밀집 배열이라고 한다.
하지만 자바스크립트에서의 배열은 각각의 메모리 공간이 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 이러한 배열을 희소 배열이라고 한다. 따라서 자바스크립트의 배열은 엄밀히 말해 일반적 의미의 배열이 아니라 일반적 배열의 동작을 흉내 낸 특수한 객체이다.
배열에서의 용어
- 요소 : 배열이 가지고 있는 값
- 인덱스 : 배열의 요소가 배열에서 자신의 위치를 나타내는 0 이상의 정수
- length : 배열의 길이를 나타내는 프로퍼티
- 접근 : 배열에서 요소에 접근하기 위해서는 대괄호 표기법을 사용한다.
length
length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타낸다. 빈 배열의 경우 0이며, 빈 배열이 아닐 경우 가장 큰 인덱스에 1을 더한 것과 같다.(인덱스는 0부터 시작하므로)
length 프로퍼티의 값은 0과 4,294,967,295(2의 32거듭제곱 - 1)미만의 양의 정수이다. 따라서 배열은 요소를 최대 4,294,967,295개 가질 수 있다.
length의 값은 요소의 개수를 바탕으로 자동으로 갱신되지며 명시적으로 할다할 수도 있다. 현재 length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다. 큰 숫자 값을 할당하면 length 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다. 다시 말해, 값 없이 비어 있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소도 생성하지 않는다는 말이다.
배열의 생성
- 배열 리터럴
가장 일반적이고 간편한 배열 생성 방식은 배열 리터럴이다.
const arr = []; // 아무 요소가 없는 빈 배열 생성
const arr2 = [1, 2, 3]; // length가 3인 배열 생성- Array 생성자 함수
Array 생성자 함수를 통해 배열을 생성할 수도 있다. 이는 전달된 인수의 개수에 따라 다르게 동작하니 다음 코드를 보자.
// 인수가 0가
const arr = new Array(); // 빈 배열 생성
// 인수가 1개, 숫자일 경우
const arr = new Array(10); // 길이가 10인 배열 생성
// 인수가 2개 이상이거나 숫자가 아닐 경우
const arr = new Array(1, 2, 3); // 전달된 인수를 요소로 값는 배열 생성- Array.of 함수
전달된 인수를 요소로 갖는 배열 생성한다.
// 전달된 인수가 1개에 숫자이더라도 해당 수를 요소로 갖는 배열 생성
const arr = Array.of(1); // [1]배열 생성- Array.from 함수
유사 배열 객체 또는 이터러블 객체를 인수로 전달받은 배열로 변환하여 반환한다. 또한 선택적으로 두 번쨰 인자로 콜백함수를 전달해 값을 채울 수도 있다.
// 문자열은 이터러블이다.
const arr = Array.from('Hello'); // ['H', 'e', 'l', 'l', 'o']배열 메서드
배열 자체에 관한 메서드들이다.
-
Array.isArray(인수)
Array 생성자 함수의 정적 메서드로 전달된 인수가 배열이면 true, 아니면 false를 반환한다. -
배열.indexOf(인수)
배열에서 함수로 전달된 인수를 검색하여 인덱스를 반환한다. 여러 개일 경우 처음 찾은 위치의 인덱스를 반환하고, 없을 경우 -1을 반환한다. -
배열.push(인수)
배열의 맨 뒤에 전달된 인수 모두를 추가하고 추가한 뒤의 length 값을 반환한다. 원본 배열을 변경한다. -
배열.pop()
배열의 맨 뒤에 한 요소를 제거하고 제거한 요소를 반환한다. 빈 배열이라면 undefined를 반환한다. 원본 배열을 변경한다. -
배열.unshift(인수)
배열의 맨 앞에 전달받은 모든 인수를 요소로 추가하고 변경된 length 값을 반환한다. 원본 배열을 변경한다. -
배열.shift()
배열의 맨 앞에 한 요소를 제거하고 제거한 요소를 반환한다. 빈 배열이라면 undefined를 반환한다. 원본 배열을 변경한다. -
배열.concat(인수)
원본 배열에 전달된 인수들을 마지막 요소들로 추가한 뒤 새로운 배여을 반환한다. 전달된 인수가 배열일 경우 배열을 해제하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다. -
배열.splice(start, count, items)
원본 배열의 start 인덱스부터 count 개수만큼 요소를 삭제하고 빈 곳을 items 들로 채워넣는다. 원본 배열을 변경한다.
count가 0이면 아무것도 삭제하지 않고 itmes 들만 추가할 수 있다.
count를 생락하면 start부터 배열의 끝까지 모든 요소를 제거한다.
items를 생략하면 배열에서 요소들을 삭제하기만 한다.
-
배열.slice(start, end)
전달된 인수의 범위만큼 원본 배열을 복사하며 배열로 반환한다. 원본 배열은 변경되지 않는다.
start 인덱스부터 end 이전의 인덱스까지 복사한다.(arr.slice(2, 4)인 경우 arr배열의 2번 인덱스부터 3번 인덱스까지 복사한다) -
배열.join(인수)
배열의 모든 요소들을 문자열로 변환하고, 전달받은 문자열을 구분자로 하나씩 연결한 문자열로 반환한다. -
배열.reverse()
배열의 순서를 뒤집은 배열을 반환한다. 원본 배열을 변경한다. -
배열.fill(인수)
배열을 전달받은 인수로 모두 채운다. 원본 배열을 변경한다.
선택적으로 두 번째 인수를 줄 수 있는데 두 번째 인수가 있을 경우 해당 인덱스부터 채우기를 시작할 수 있다.
선택적으로 세 번째 인수를 줄 수 있는데 세 번째 인수가 있을 경우 채우기를 멈출 인덱스를 지정할 수 있다. -
배열.includes(인수)
배열에서 함수로 전달된 인수를 검색하여 있다면 true, 없다면 false를 반환한다.
선택적으로 두 번째 인수를 줄 수 있는 이는 검색을 시작할 인덱스이다. 두 번째 인수가 음수라면 배열의 length 값과 두 번째 인수를 합한 부분부터 검색을 시작한다. -
배열.flat(인수)
배열을 전달된 인수 깊이만큼 평탄화한다. 인수를 생략할 경우 기본값은 1이다. 원본 배열을 변경한다.
배열 고차 함수
콜백함수를 통해 배열에 대해 유용한 작업들을 할 수 있는 메서드들이다.
- 배열.sort(콜백함수)
콜백함수가 없을 경우, 기본적으로 배열의 요소들을 유니코드 기준 오름차순으로 정렬한다. 따라서 문자열들은 원하는대로 잘 정렬될 수 있지만 숫자의 경우 크기 순이 아닌 사전순으로 정렬된다.
콜백함수로 정렬 순서를 정의하는 비교함수를 인수로 전달할 수 있는데 반환 값이 0보다 작으면 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두 번째 인수를 우선하여 정렬한다.
다음 예제를 통해 숫자 배열의 오름차순 정렬을 이해하자.
const arr = [5, 4, 3, 2, 1];
const compare = function(a, b) {
return a > b ? 1 : a < b ? -1 : 0;
}
arr.sort(compare); // [1, 2, 3, 4, 5]- 배열.forEach(콜백함수)
배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리한다.
콜백함수가 가질 수 있는 인수는 3개인데 첫 번째는요소, 두 번째는 요소의인덱스, 세 번째는원본 배열이다.
for문과 달리 break, continue를 사용할 수 없다.
const arr = [1, 2, 3, 4, 5];
arr.forEach((ele, i, arr) => {
console.log(`요소는 ${ele}, 인덱스는 ${i}, 원본 배열은 ${JSON.stringify(arr)}이다.`);
});
// 요소는 1, 인덱스는 0, 원본 배열은 [1,2,3,4,5]이다.
// 요소는 2, 인덱스는 1, 원본 배열은 [1,2,3,4,5]이다.
// 요소는 3, 인덱스는 2, 원본 배열은 [1,2,3,4,5]이다.
// 요소는 4, 인덱스는 3, 원본 배열은 [1,2,3,4,5]이다.
// 요소는 5, 인덱스는 4, 원본 배열은 [1,2,3,4,5]이다.-
배열.map(콜백함수)
forEach 함수와 마찬가지로 배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리하지만 차이점은 작업을 처리한 결과값을 return하여 결과값들이 모인 새로운 배열 하나를 반환한다. 새로운 배열이기 때문에 원본 배열은 변경되지 않는다. -
배열.filter(콜백함수)
배열의 요소들을 하나씩 콜백함수로 전달하여 return값이 true인 요소들로만 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.
배열에서 특정 요소를 모두 제거할 때 사용할 수 있다. -
배열.reduce(콜백함수, 초기값)
배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리하는데 콜백함수의 인자로 4개를 가질 수 있다. 첫 번째 인자는누적값, 두 번째 인자는 하나씩 전달되는 배열의요소, 세 번째는 요소의인덱스, 네 번째는원본 배열이다.
콜백함수와 함께 전달되는초기값은 첫 번째 콜백함수가 실행될 때누적값위치에 들어간다.
콜백함수를 진행하면서 return되는 값는 다음 콜백함수를 호출할 때누적값위치에 들어가기 때문에 배열의 요소들의 총 합이나 평균 등을 구할 때 사용될 수 있다.
const arr = [1, 2, 3, 4, 5];
const total = arr.reduce((acc, ele, i, arr) => {
return acc + ele;
}, 0);
console.log(total); // 15-
배열.some(콜백함수)
배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리하는데 return값이 하나라도 true라면 true를 반환한다. 모두 false라면 false
빈 배열일 경우 언제나 false 반환. -
배열.every(콜백함수)
배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리하는데 return값이 모두 true라면 true를 반환한다. 하나라도 false라면 flase
빈 배열일 경우 언제나 true 반환. -
배열.find(콜백함수)
배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리하는데 return값이 true인 첫 번째 요소를 반환한다. true인 요소가 없다면 undefined를 반환한다. -
배열.findIndex(콜백함수)
배열의 요소들을 하나씩 콜백함수로 전달하여 작업을 처리하는데 return값이 true인 첫 번째 요소의 인덱스를 반환한다. true인 요소가 없다면 undefined를 반환한다.
reduce를 제외한 모든 배열의 고차함수로 전달되는 콜백함수들은 첫 번째 인자로 요소, 두 번째 인자로 요소의 인덱스, 세 번째 인자로 원본 배열을 전달받을 수 있다. (사용은 선택적)
