배열 ?

배열은 여러 개의 값을 순차적으로 나열한 자료구조 이며
자바스크립트에서 매우 사용 빈도가 높으므로 꼭 배워두자.

const arr = ['apple', 'banana', 'orange'];

여기서 arr식별자가 가지고 있는 값을 "요소"라고 부른다.
그리고 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다.

즉 arr배열의 요소인 apple 인덱스는 0
banana는 1, orange는 2다.

배열은 요소의 개수를 확인할 수 있으므로 length 프로퍼티를 가질수 있다.

console.log(arr.length); // 3

배열의 생성자 함수는 Array이며, 배열의 프로토타입 객체는 Array.prototype 이고, 배열을 위한 빌트인 메서드를 제공한다.

배열과 객체의 차이점은 아래의 내용을 통해 알수 있다.

구분	객체	배열
구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	X	O
length 프로퍼티	X	O

length 프로퍼티와 희소 배열

length 프로퍼티는 요소의 개수 즉 배열의 길이를 나타태는 0 이상의 정수를 값으로 갖는다.

length 프로퍼터의 값은 0과 2의 32승 - 1 미만의 양의 정수다.
즉 배열은 요소를 최대 4,294,967,295개 가질수 있으며 이를 인덱스로 나타내면 4,294,967,294다.
(자바스크립트의 인덱스는 0부터 시작한다.)

length 프로퍼티의 값은 배열에 요소를 추가하거나 삭제하면 자동 갱신된다.

const arr = [1, 2, 3];
console.log(arr.length); // 3

// 요소 추가
arr.push(4);
console.log(arr.length); // 4

// 요소 삭제
arr.pop();
// 요소를 삭제하면 length 프로퍼티의 값이 자동 갱신된다.
console.log(arr.length); // 3

---

주의할 것은 현재 length 프로퍼티 값보다 큰 숫자 값을 할당하는 경우다.

const arr = [1];

// 현재 length 프로퍼티 값인 1보다 큰 숫자 3을 length 프로퍼티에 할당
arr.length = 3;

// length 프로퍼티 값은 변경되지만 실제 배열의 길이가 늘어나지 않는다.
console.log(arr.length); // 3
console.log(arr); // [1, empty*2]

여기서 empty*2 는 실제로 추가된 배열의 요소가 아니다.
즉 arr[0]은 값이 존재지만 arr[1], arr[2]는 값이 존재하지 않는다.

이처럼 배열의 요소가 연속적으로 위치하지 않고, 일부가 비어 있는 배열을 희소배열이라 한다.

배열생성

Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작한다.

전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다.

const arr = new Array(10);

console.log(arr); // [empty * 10]
console.log(arr.length); // 10

전달된 인수가 없는 경우 빈 배열을 생성한다.

new Array(); /// > []

전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.

// 전달된 인수가 2개이상일 경우 인수를 요소로 갖는 배열을 생성한다.
new Array(1, 2, 3); // [1, 2, 3]

// 전달된 인수가 1개지만 숫자가 아닌경우 즉 {} <(요소)인수를 갖는 배열을 생성한다

new Array({}); // > [{}]

Array.of

ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.
이 메서드는 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

Array.of(1); // [1]

Array.of('hi'); // ['hi']

Array.from

Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

// 유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length:2, 0: 'a', 1: 'b'}); // ['a', 'b']

// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블임
Array.from('hi'); ['h', 'i']

Array.from을 사용하면 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있다.
Array.from 메서드는 두 번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환값으로 구성된 배열을 반환한다.

// Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다.

Array.from({length:3}); // [undefined, undefined, undefined]

// Array.from은 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다.
Array.from({length:3}, (_, i) => i); // [0, 1, 2];

배열 요소의 참조

배열의 요소를 참조할 때에는 대괄호[] 표기법을 사용하고 대괄호 안에는 참조하려는 배열의 인덱스가 와야 한다.

const arr = [1, 2];

console.log(arr[0]); // 1
console.log(arr[1]); // 2

배열 요소의 추가와 갱신

배열은 동적으로 요소를 추가할 수 있으며,
존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다.
이때 length 프로퍼티 값은 자동 갱신된다.

const arr = [0];

// 배열 요소의 추가
arr[1] = 1;
console.log(arr); // [0, 1]
console.log(arr.length); // 2

// 요소값의 갱신
arr[1] = 10;
console.log(arr); // [0, 10]

배열 요소의 삭제

배열은 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.

const arr = [1, 2, 3];

// 배열 요소의 삭제
delete arr[1];
console.log(arr); // [1, empty, 3]

// length 프로퍼티에 영향을 주지 않는다. 즉 희소 배열이 된다.
console.log(arr.length); // 3

배열 메서드

배열에는 원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.

const arr = [1];

// push 메서드는 원본 배열을 변경한다.
arr.push(2);
console.log(arr); // [1, 2]

// concat 메서드는 원본 배열을 변경하지 않고, 새로운 배열을 생성 후 반환한다.
const result = arr.concat(3);
console.log(arr); // [1, 2]
console.log(result); // [1, 2, 3]

Array.isArray

Array.isArray 메서드는 전달된 인수가 배열이면 true(참), 아니면 false(거짓)을 반환한다.

Array.isArray([]); // true

Array.isArray(Array); // false

Array.prototype.indexOf

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

const arr = [1, 2, 2, 3];

// 배열 arr에서 요소2를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다.
arr.indexOf(2); // 1
// 배열 arr에 요소 4가 없으므로 -1을 반환한다.
arr.indexOf(4); // -1
// 두 번째 인수는 검색을 시작할 인덱스다. 두 번째 인수를 생략하면 처음부터 검색한다.
arr.indexOf(2, 2); // 2

Array.prototype.push

push 메서드는 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.

const arr = [1, 2];

let result = arr.push(3);

console.log(result); // [1, 2, 3]

Array.prototype.pop

pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
원본 배열이 빈 배열일시 undefined를 반환한다.

const arr =[1, 2];

let result = arr.pop();
console.log(result); // 2

console.log(arr); // [1]

Array.prototype.unshift

unshift 메서드는 인수로 전달받은 모든 값을 원본 배열 선두에 요소로 추가한다.

const arr = [1, 2];

let result = arr.unshift(3, 4);
console.log(result); // 4

// 원본 배열을 변경한다.
console.log(arr); // [3, 4, 1, 2]

Array.prototype.shift

shift 메서드는 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다
원본 배열이 빈 배열일시 undefined를 반환한다.

const arr = [1, 2];

let reuslt = arr.shift();
console.log(result); // 1

// 원본 배열을 변경한다.
console.log(arr); // [2]

Array.prototpye.concat

concat 메서드는 인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다.

const arr1 = [1, 2];
const arr2 = [3, 4];


let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4];

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

Array.prototype.splice

원본 배열의 중간에 요소를 추가하거나, 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다.
3개의 매개변수가 있다.

• start : 원본 배열의 요소를 제거하기 시작할 인덱스다.
• deleteCount: 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수다.
• items: 제거한 위치에 삽입할 요소들의 목록이다.

const arr = [1, 2, 3, 4];

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 20, 30);

// 제거한 요소가 배열로 반환된다.
console.log(result); // [2, 3];
// splice 메서드는 원본ㅂ ㅐ열을 직접 변경한다.
console.log(arr); // [1, 20, 30, 4]

Array.prototype.slice

slice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.
slice 메서드는 두 개의 매개변수를 갖는다.

• start: 복사를 시작할 인덱스다.
• end: 복사를 종료할 인덱스다.

const arr = [1, 2, 3];

// arr[0]부터 arr[1] 이전(arr[1] 미포함)까지 복사하여 반환한다.
arr.slice(0, 1); // [1]

// 위와 동일
arr.slice(1, 2); // [2]

// 원본 배열은 변경되지 않는다.
console.log(arr); // [1, 2, 3]

Array.prototype.join

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

const arr = [1, 2, 3, 4];

// 기본 구분자는 콤마다.
// 원본 배열 arr의 모든 요소를 문자열로 변환한 후 기본 구분자로 연결한 문자열을 반환한다.
arr.join(); // '1, 2, 3, 4';


// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈 문자열로 연결한 문자열을 반환한다.
arr.join(); // '1234'

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후 구분자 :로 연결한 문자열을 반환한다.
arr.join(':'); // '1:2:3:4'

Array.prototype.reverse

reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다
원본 배열이 변경된다.

const arr = [1, 2, 3];
const result = arr.reverse();

// reverse 메서드는 원본 배열을 직접 변경한다.
console.log(arr); // [3, 2, 1]

// 반환값은 변경된 배열이다.
console.log(result); // [3, 2, 1]

Array.prototype.fill

fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.
원본 배열이 변경된다.

const arr = [1, 2, 3];

// 인수로 전달받은 값 0을 배열의 처음부터 끝까지 요소로 채운다.
arr.fill(0);

// 원본 배열 변경
console.log(arr); // [0, 0, 0]

// 인수로 전달받은 값 0을 배열의 인덱스 1부터 끝까지 요소로 채운다.
arr.fill(0, 1);
console.log(arr); // [1, 0, 0]


const test = [1, 2, 3, 4, 5];
// 인수로 전달받은 값 0을 배열의 인덱스 1부터 3이전(인덱스 3 미포함)까지 요소로 채운다.
test.fill(0, 1, 3);
console.log(test); //[1, 0, 0, 4, 5]

Array.prototype.includes

배열 내 특정 요소가 포함되어 있는지 확인하고
true or false를 반환한다.

const arr = [1, 2, 3]

arr.includes(2); // true

arr.includes(100); // false

Array.prototype.flat

flat 메서드는 배열의 요소가 배열인 경우 재귀적으로 내부 배열을 평평하게 만든다.

const arr = [1, 2, [3, 4], [5, 6]];

const result = arr.flat();

console.log(result); // [1, 2, 3, 4, 5, 6]

배열 고차 함수

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

Array.prototype.sort

sort 메서드는 배열의 요소를 정렬한다.

const arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort();
console.log( arr ); // [ 1, 10, 11, 12, 13, 2, 3, 5 ];

// sort에 함수로 정렬
const arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort((a,b) => a - b)
console.log(arr); // [ 1, 2, 3, 5, 10, 11, 12, 13 ]

Array.prototype.forEach

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

const arr = [1, 2, 3];
const numberArr = [];

arr.forEach((num) => numberArr.push(num));
console.log(numberArr); // [1, 2, 3]

Array.prototype.map

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서
인수로 전달받은 콜백 함수를 반복 호출하고, 새로운 배열을 반환한다.

const numbers = [1, 2, 3];

const roots = numbers.map((item) => item >= 2)
console.log(roots) // [false, true, true]

Array.prototype.filter

filter 메서드는 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5];

const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

Array.prototype.reduce

reduce 메서드는 다음과 같이 사용합니다.
배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

c(누적값)이 초깃값인 0부터 시작해서 return 하는대로 누적되는 것을 볼 수 있다.
초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됩니다.

Array.prototype.some

some 메서드는 콜백 함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환한다.

const number = [5, 10, 15];

// 배열의 요소중 10보다 큰 요소가 1개 이상 존재하는지 확인
number.some(item => item > 10); // true

// 배열의 요소중 0보다 작은 요소가 1개 이상 존재하는지 확인
number.some(item => item < 0); // false

Array.prototype.every

every 메서드는 콜백 함수의 반환값이 모두 참이면 true 단 한번이라도 거짓이면 fasle를 반환한다.

const number = [5, 10, 15];

// 배열의 모든 요소가 3보다 큰지 확인
number.some(item => item > 3); // true

// 배열의 모든 요소가 10보다 큰지 확인
number.some(item => item > 10); // false

Array.prototype.find

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

const users = [
  { id:1, name: 'a'},
  { id:2, name: 'b'},
  { id:3, name: 'c'},
  { id:4, name: 'd'},
  { id:5, name: 'e'},
]

// id가 2인 첫 번째 요서를 반환하고 find 메서드는 배열이 아닌 요소를 반환한다.
users.find(user => user.id === 2); // {id:2, name:'b'}

Array.prototype.findIndex

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

const users = [
  { id:1, name: 'a'},
  { id:2, name: 'b'},
  { id:3, name: 'c'},
  { id:4, name: 'd'},
  { id:5, name: 'e'},
]

users.findIndex(user => user.id === 2); // 1
users.findIndex(user => user.name === 'd'); // 3