CH27 배열

JS의 배열은 배열이 아니다

JS의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이지, 실제 배열과는다르다.

배열의 요소와 인덱스는 벨류와 키로 작동한다.

length 프로퍼티와 희소배열

length 프로퍼티의 길이를 줄이면 배열이 줄어든다.

하지만, 늘린다고 빈 값으로 초기화되지는 않는다.

empty가 들어가게 되고, 접근시 undefined가 출력된다.

배열 생성

배열 리터럴

const arr = [];

Array 생성자 함수

Array 생성자 함수를 통해 배열을 생성할 수 있다.

인수가 1개인경우, length 프로퍼티 값이 인수인 배열을 생성한다.

const arr = new Array(2);
console.log(arr); //[empty*2];

인수가 없는경우 빈 배열을 만든다.

const arr = new Array();
console.log(arr); //[]

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

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

Array.of

전달된 인수를 요소로 갖는 배열을 생성한다.

인수가 1개라도 그것을 요소로 갖는 배열을 생성한다.

Array.from

유사 배열객체, 이터러블 객첼ㄹ 인수로 받아 배열로 변환하여 반환한다.

Array.from({length:2, 0:'a', 1:'b',}); //[a, b]
Array.from("Hello"); // ['H','e','l','l','o']

두번째 인수로 콜백함수를 받아 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 반환값으로 구성된 배열을 만든다.

Array.from({length:3},(value, index)=>index));

해당 코드는 [empty*3]인 배열을 콜백함수로 순회하여 리턴한 것이다. 결과는 0,1,2

배열요소의 참조

정수 또는 정수로 표현가능한 표현식이 대괄호 안에 들어가야한다.

존재하지 않는 요소를 참조하면 undefined가 반환된다.

배열메서드

Array.isArray

Array 생성자 함수의 정적메서드

해당 인자가 배열이면 true, 아니면 false

Array.prototype.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환함

여러개인경우 가장 먼저 나오는 요소를, 없으면 -1을 반환함

Array.prototype.includes

indexOf와 동일하나 가독성이 더 좋다.

Array.prototype.push

원본배열의 끝에 인자를 추가한다.

원본 배열을 건드린다.

Array.prototype.pop

원본배열의 끝 인자를 반환하고, 원본배열에서 제거한다.

원본배열을 건드린다.

없는경우 undefined를 반환한다.

이 두가지 메서드로 Stack을 구현할 수 있다.

const Stack=(function (){
    function Stack(){
        this.array=[];
    }
    Stack.prototype={
        constructor:Stack,
        push(input){
            this.array.push(input);
        },
        pop(){
            return this.array.pop();
        },
    }
    return Stack;
})();

Array.prototype.unshift

인수로 전달받은 값을 배열의 제일 앞에 추가한다.

원본 배열을 변경한다.

Array.prototype.shift

가장 앞에 요소를 제거하고 제거된 요소를 반환한다.

빈배열이면 undefined를 반환한다.

원본 배열을 변경한다.

Queue의 구현

const Queue=(function(){
    function Queue(){
        this.array=[];
    }
    Queue.prototype={
        constructor:Queue,
        enqueue(value){
            this.array.push(value);
        },
        dequeue(){
            return this.array.shift();
        }
    }
    return Queue;
}());

Array.prototype.concat

인수로 전달된 값들을 원본배열의 마지막 요소로 추가한 새로운 배열을 반환한다.

인수 값이 배열인경우, 배열을 해체하여 새로운 배열의 요소로 추가한다.

스프레드문법

으로 대체가능하다.

const arr1=[1,2];
const arr2=[3,4];
const arr3=arr1.concat(arr2);
const arr4=[...arr1,...arr2];

Array.prototype.splice

배열 중간에 요소를 추가하거나 요소를 제거하는 경우 사용한다.

arr.splice(start, deletecount, items)

start : 시작 인덱스

deletecount: 몇개를 지울지

items: 무엇을 삽입할 것인지(생략할 경우 지우기만함)

Array.prototype.slice

전달된 요소들을 복사하여 배열로 반환한다.

원본배열을 변경하지 않는다.

arr.slice(start, end);

start : 시작 인덱스

end : 종료 인덱스, 해당 인덱스는 복사되지 않는다.

복사본은 얕은 복사로 만들어진다.

Array.prototype.join

모든 요소를 문자열로 변환한 후, 인수로 받은 문자열을 구분자로 연결한 문자열을 반환한다.

const arr=[1,2,3,4];
arr.join(); //1,2,3,4
arr.join(''); //1234

Array.prototype.reverse

원본배열이변경되며, 뒤집는다.

Array.prototype.fill

인수로 전달된 값을 처음부터 끝까지 채운다.

const arr=[1,2,3];
arr.fill(0); //[0,0,0]

//두번째 인자로 요소 채우기를 시작할 인덱스를 전달할 수 있다.
arr.fill(0,1) //[1,0,0]
//세번째 인자로 요소 채우기를 멈출 인덱스를 전달할 수 있다.(인덱스 미포함)
arr.fill(0,1,2) //[1,0,3]

원본 배열을 변경한다.

Array.prototype.flat

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

[1,[2,3,4,5]].flat() // [1,2,3,4,5]

이렇게 하면 1차원 배열로 만든다.

[1,[2,[3,[4,[5]]]]].flat(Infinity);

배열 고차 함수

순수함수를 통해 변수 절약을 하고, 부수효과를 최대한 억제하기 위한 방법

Array.prototype.sort

배열을 오름차순으로 정렬한다.

원본 배열을 변경한다.

숫자인 경우 주의가 필요하다.

유니코드 포인트를 기준으로 정렬하기 때문이다.

이 경우, 정렬 순서를 정의하는 비교함수를 인수로 전달해야 한다.

비교함수는 양수나 음수 혹은 0을 반환해야 한다.

비교함수의 반환값이 0보다 작으면 비교함수의 첫 인수를 우선하여 정렬하고,

0이면 정렬하지 않으며

0보다 크면 두번째 인수를 우선하여 정렬한다

코드로 작성하면 이렇다.

const arr=[12,2,5,3,99,89,100]
arr.sort((standard, compare)=>(standard-compare)); //오름차순
arr.sort((standard,compare)=>(compare-standard)); //내림차순

Array.prototype.forEach

항상 undefined를 반환한다.

중간에 break, continue를 사용할 수 없다.

반복문을 순회하며 할 작업을 콜백함수로 전달받아 반복호출한다.

const arr=[1,2,3];
const result=[];
arr.forEach(number=>result.push(number+1));

콜백함수의 인자

콜백함수의 인자로 요소값, 인덱스, this를 받을 수 있다.

[1,2,3].forEach((item,index,arr)=>{
    console.log(`요소값 : ${item}, 인덱스 :${index}, this:${arr}`);
});
요소값 : 1, 인덱스 :0, this:1,2,3
요소값 : 2, 인덱스 :1, this:1,2,3
요소값 : 3, 인덱스 :2, this:1,2,3

원래는 원본 배열을 변경하지 않지만 세번째 인자를 이용하여 변경가능하다.

const arr1=[1,2,3];
arr1.forEach((value, index, arr)=>{
        arr[index]=value*2;
});

this바인딩

forEach의 두번째 인자로 this로 사용할 인자를 받을 수 있다.

Array.prototype.map

콜백함수로 반환된 값으로 구성된 새로운 배열을 반환한다.

콜백함수의 인자

값, 인덱스 this를 사용할 수 있다.

this바인딩

두번째 인자로 this를 사용할 인자를 사용할 수 있다.

Array.prototype.filter

해당 조건문의 값이 true인 것들만 모은 새로운 배열을 반환함

콜백함수의 인자

값, 인덱스 this를 사용할 수 있다.

this바인딩

두번째 인자로 this를 사용할 인자를 사용할 수 있다.

Array.prototype.reduce

콜백함수를 호출한 뒤, 그 반환값을 콜백함수의 첫번째 인사로 넘겨서 하나의 결과값을 만들어 반환한다.

첫번째 인자로 콜백함수, 두번째 인자로 초기값을 받는다.

콜백함수의 인자

초기값, 요소값, 인덱스, this

const sum=[1,2,3,4].reduce((accumulator, currentValue, index, array)=>accumulator+currentValue,);

응용하기

평균값 구하기

const average = [1, 2, 3, 4].reduce(
  (acc, cur, index, { length }) =>
    index === length - 1 ? (acc + cur) / length : acc + cur,
  0
);

최대값 구하기

const max = [1, 2, 3, 4].reduce((acc, cur) => (acc < cur ? cur : acc), 0);
console.log(max);

중복횟수 구하기

const 중복횟수 = ['바나나', '사과', '바나나', '오렌지'].reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});

Array.prototype.some

요소를 순회하며 콜백함수를 호출한다.

이때 콜백함수의 반환값이 단 한번이라도 true이면 true를 반환한다.

모두 거짓이어야 false를 반환한다.

console.log([1, 2, 3].some((num) => num > 2));

Array.prototype.every

some과 동일하나 모든 값이 true여야 true를 반환한다.

단 하나라도 false가 있으면 false를 반환한다.

console.log([10, 11, 12].every((num) => num >= 10));

Array.prototype.find

요소를 순회하면서 콜백함수의 반환값이 true인 첫번째 요소를 반환함

없다면 undefined를 반환함

Array.prototype.findIndex

find와 비슷하나 index를 반환함

없다면 -1를 반환함

Array.prototype.flatMap

map을 통해 생성된 새로운 배열을 평탄화함