[JavaScript] 배열

배열(array)는 여러 개의 값을 순차적으로 나열한 자료구조다.

배열 리터럴을 통해 생성한 배열
const avngers = ['Ironman', 'Hulk', 'Captin', 'Spiderman'];

배열이 가지고 있는 값을 요소(element)라고 부른다.

자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.

배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 가진다.

인덱스는 배열의 요소에 접근할 때 사용한다. 인덱스는 0 부터 시작한다.

 

요소에 접근할 때는 대괄호 표기법을 사용한다. 대괄호 내에 접근 하려는 요소의 인덱스를 지정한다.

avengers[0] // 'Ironman'
avengers[1] // 'Hulk'
avengers[3] // 'Spiderman'

배열은 요소의 개수, 배열의 길이를 나타내는 length 프로퍼티를 갖는다.

avengers.length // 4

for 문을 통해 배열의 index와 length를 활용하여 배열의 요소에 순차적으로 접근할 수 있다.

for (let i = 0; i < avengers.length; i++) {
  console.log(avengers[i]); // 'Ironman' 'Hulk' 'Captin' 'Spiderman'
}

배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메서드로 생성할 수 있다.

배열의 생성자 함수는 Array이며, 배열의 프로토타입 객체는 Array.prototype이다. 

Array.prototype은 배열을 위한 빌트인 메서드를 제공한다.

 

자바스크립트의 배열은 일반적인 자료구조의 배열의 동작을 흉내 낸 특수한 객체다.

일반적인 배열과 자바스크립트의 배열의 장단점을 정리해보면 다음과 같다.

• 일반적인 배열은 인덱스로 요소에 빠르게 접근할 수 있다. 하지만 요소를 삽입 또는 삭제하는 경우에는 효율적이지 않다.
• 자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 느리다. 하지만 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠를 수 있다.

배열 메서드

자바스크립트는 배열을 다룰 때 유용한 다양한 빌트인 메서드를 제공한다.

배열에는 원본 배열(배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.

 

Array.isArray : 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

Array.prototype.indexOf: 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

Array.prototype.includes: 원본 배열에서 특정 요소가 존재하는지 확인하여 true 또는 false를 반환한다.

Array.prototype.push: 인수로 전달받은 모든 값을 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.

Array.prototype.pop: 원본 배열의 마지막 요소를 제거하고 제거한 요소를 반환한다.

Array.prototype.unshift: 인수로 전달받은 모든 값을 원본 배열의 맨앞에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.

Array.prototype.shift: 원본 배열의 첫 번째 요소를 제거하고 제거한 요소를 반환한다.

Array.prototype.concat: 인수로 전달된 값을 원본 배열의 마지막 요소롤 추가한 새로운 배열을 반환한다. 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다.

Array.prototype.splice: 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거한다.

Array.prototype.slice: 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.

Array.prototype.join: 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열로 연결한 문자열을 반환한다. 구분자는 생략 가능하며 기본 구분자는 콤마다.

Array.prototype.reverse: 원본 배열의 순서를 반대로 뒤집는다.

Array.prototype.fill: 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.

Array.prototype.flat: 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화 한다.

 

배열 고차 함수

고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.

Array.prototype.sort: 배열의 요소를 오름차순으로 정렬한다.

 

Array.prototype.forEach: for 문을 대체할 수 있는 고차 함수다. 자신의 내부에서 반복문을 실행한다.

반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달 받아 반복 호출한다.

const numbers = [1, 2, 3];
const pows = [];

//forEach 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1, 4, 9]

Array.prototype.map : 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

const numbers = [1, 4, 9];

// map 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다.
// 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
const roots = numbers.map(item => Math.sqrt(item));
// 위 코드는 다음과 같다.
// const roots = numbers.map(Math.sqrt);

// map 메서드는 새로운 배열을 반환한다.
console.log(roots); // [1, 2, 3]
// map 메서드는 원본 배열을 변경하지 않는다.
console.log(numbers); // [1, 4, 9]

forEach 메서드는 단순히 반복문을 대체하기 위한 고차 함수이고, map 메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성하기 위한 고차 함수다.

map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map 메서드를 호출한 배열의 length 프로퍼티 값과 반드시 일치한다. map 메서드를 호출한 배열과 map 메서드가 생성하여 반환한 배열은 1:1 매핑한다.

 

Array.prototype.filter: 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.



Array.prototype.reduce: 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환 값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 

// 1부터 4까지 누적 값
const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => 
accumulator + currentValue, 0);
console.log(sum); // 10

Array.prototype.some: 자신을 호출한 배열의 요소를 순회 하면서 인수로 전달된 콜백 함수를 호출한다. 이때 콜백 함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다.

 

Array.prototype.every: 자신을 호출한 배열의 요소를 순회 하면서 인수로 전달된 콜백 함수를 호출한다. 이때 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환한다.

 

Array.prototype.find: 자신을 호출한 배열의 요소를 순회 하면서 인수로 전달된 콜백 함수를 호출하여 반환 값이 true인 첫 번째 요소를 반환한다. 콜백 함수의 반환 값이 true인 요소가 존재하지 않으면 undefined를 반환한다.

 

Array.prototype.findIndex: 자신을 호출한 배열의 요소를 순회 하면서 인수로 전달된 콜백 함수를 호출하여 반환 값이 true인 첫 번째 요소의 인덱스를 반환한다. 콜백 함수의 반환 값이 true인 요소가 존재하지 않으면 -1 을 반환한다.

 

Array.prototype.flatMap: map 메서드를 통해 생성된 새로운 배열을 평탄화 한다. map 메서드와 flat 메서드를 순차적으로 실행하는 효과가 있다.