배열

1. 배열은 여러 개의 값을 순차적으로 나열한 자료구조이며 기본적으로 객체 타입이다. 배열이 객체와 가지는 차이는 값의 순서(index)가 존재한다는 점이며 그 순서에 따라 length 프로퍼티로 순차적으로 값에 접근하기에 적합하다. 배열이 가지고 있는 값을 요소element라 한다.

const arr = [1,2,3];

// 반복문으로 자료구조를 순서대로 순회하기 위해서는 자료구조의 요소에 순서대로 접근할 수 있어야하며
// 자료구조의 길이를 알 수 있어야 한다.
for (let i = 0; i < arr.length; i++){
  console.log(arr[i]); // 1 2 3
}

2. 자바스크립트에서 배열은 일반적인 다른 코드에서의 배열과 다르게 배열의 동작을 흉내 낸 특수한 객체이다. 일반적인 배열보다 성능적인 면에서 느리나, 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

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

[].length // 0
[1,2,3].length // 3

const arr = [1, 2, 3];
arr.push(4);
// 요소를 추가하면 length 프로퍼티의 값이 자동 갱신된다.
console.log(arr.length) // 4


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

// 현재 length 값보다 작은 숫자 값을 length 프로퍼티에 할당.
arr1.length = 3;

// 배열의 길이가 5에서 3으로 줄어든다
// 단, 현재 프로퍼티 값보다 큰 숫자 값을 할당한다 해도 배열의 길이가 늘어나지 않는다.
console.log(arr1); // [1,2,3]

4. 자바스크립트의 배열은 요소가 연속적으로 위치하지 않고 일부가 비어있는 희소배열을 문법적으로 허용한다. 희소 배열을 생성하지 않도록 주의하자.

const sparse = [,2, ,4];

// 희소 배열의 length 프로퍼티 값은 요소의 개수와 일치하지 않는다.
console.log(sparse.length); // 4

5. 배열의 생성 방식

// 배열 리터럴 생성 방식
// 가장 일반적 이다.
const arr = [1,2,3]


// Array 생성자 함수 생성 방식
const arr1 = new Array(10);

console.log(arr1.length); // 10, 내용이 없는 배열. 길이만 10.

const arr2 = new Array(1,2,3); // [1,2,3] 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열 생성


// Array.of는 전달된 인수가 1개라도 요소로 갖는 배열 생성
const arr3 = new Array(1) // [1]


// Array.fome메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 반환한다.
Array.from({ length : 2, 0: 'a', 1: 'b' }); // -> {'a','b'}

// 이터러블은 변환하여 배열을 생성한다. 문자열은 이터러블이다
Array.from('Hello'); // -> {'H','e','l','l','o'}

6. 대괄호 표기법을 사용하여 배열의 인덱스 값을 참조할 수 있다. 사실 배열의 인덱스는 문자열을 프로퍼티 키로 갖는 객체이다. 따라서 존재하지 않는 프로퍼티 키로 객체의 프로퍼티에 접근했을 때처럼 undefined를 반환한다.

const arr = [1,2];

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

7. 배열에 요소를 동적으로 추가할 수 있다. 이때 length 프로퍼티 값은 자동 갱신된다.

const arr = [0];

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

// 현재 배열의 length 프로퍼티 값보다 큰 인덱스를 새로운 요소로 추가하면 희소 배열이 된다.
// 이미 요소가 존재하는 요소에 값을 재할당하면 갱신된다.
// 인덱스 요소에 0 이상의 정수가 아닌 이외의 값을 사용하면 프로퍼티가 생성되고, length 값에 영향을 주지 않는다.

const arr1 = [1,2];

arr1['foo'] = 3;
arr.bar = 4;
arr[1,1] = 5;
arr[-1] = 6;

console.log(arr); // [1,2,foo: 3, bar: 4, '1,1':5, '-1':6]
console.log(arr.length); //2

8. 배열은 사실 객체이기 때문에 delete 연산자를 사용할 수 있으나, 희소배열이 된다. 희소 배열을 만들지 않으면서 특정 요소를 삭제하고 싶다면 Array.prototype.splice 메서드를 사용한다.

const arr = [1,2,3];

// arr[1]부터 1개의 요소를 제거
arr.splice(1,1);
console.log(arr); // [1,3]

9. 자바스크립트는 다양한 빌트인 배열 메서드를 제공한다. 배열 메서드는 결과물을 반환하는 패턴이 두가지이다. 원본 배열을 직접 변경하는 메서드와 원본 배열은 그대로 두고, 새로운 배열을 생성하여 반환하는 메서드가 있다.

9-1 Array.isArray는 생성자 함수의 정적 메서드이며 전달된 인수가 배열이면 true 배열이 아니면 false를 반환한다.

// true
Array.isArray([]);
Array.isArray([1,2]);

//false
Array.isArray();
Array.isArray({});
Array.isArray(1);

9-2 indexof 메서드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다. ES7에는 include 메서드가 도입됬다.
9-3 push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
9-4 pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
9-5 unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
9-6 shitt 메서드는 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
9-7 concat 메서드는 인수로 전달된 값을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.
9-8 splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다. 첫 번째 인수는 시작 인덱스, 두 번째 인수는 제거할 요소의 개수, 세 번째 인수는 제가힌 위치에 삽입할 요소를 의미한다.
9-9 slice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다.
9-10 join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다.
9-11 reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다. 이때 원본 배열이 변경된다.
9-12 fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. 이때 원본 배열이 변경된다.
9-13 includes 메서드는 배열 내에 특정 요소가 포함되어 있는지 true또는 false를 반환한다. 첫 번째 인수로 검색할 대상을 지정한다.
9-14 flat 메서드는 인수로 전달하 깊이만큼 재귀적으로 배열을 평탄화 한다.

10. 배열은 고차함수를 다수 지원한다. 배열 고차 함수는 활용도가 매우 높다.
    10-1 sort 메서드는 배열의 요소를 정렬한다. 배열을 직접 변경하며 오름차순으로 요소를 정렬한다. 다만 숫자의 경우 유니코드 코드 포인트의 순서를 따르므로 유의하자.
    10-2 foreach 문은 for 문을 대체할 수 있는 고차 함수이다. number 배열의 모든 요소를 순회하며 콜백 함수를 반복 호출한다. 배열의 요소가 3개라면, 콜백 함수도 3번 호출된다.
    10-3 map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환 값들로 구성된 새로운 배열을 반환한다.
    10-4 filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 단, 콜백 함수의 반환 값이 true인 요소만 추출한 새로운 배열을 반환한다.
    10-5 reduce 메서드는 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 하나의 결과값을 만들어 반환한다.
    10-6 some 메서드는 콜백 함수의 반환 값이 단 한 번이라도 참이면 true, 모두 거짓이면 false 를 반환한다.
    10-7 every 메서드는 콜백 함수의 반환 값이 모두 참이면 true, 단 한번이라도 거짓이면 false 를 반환한다.
    10-8 find 메서드는 반환 값이 true인 첫 번째 요소를 반환한다.true인 요소가 존재하지 않는다면 undefined를 반환한다.
    10-9 findIndex 메서드는 인수로 전달된 콜백 함수를 호출하여 true인 첫 번째 요소의 인덱스를 반환한다.
    10-10 flatmap 메서드는 map 메서드를 통해 생성된 새로운 배열을 평탄화한다.