배열

본 내용은 책 모던 자바스크립트 Deep Dive 의 내용을 참조했습니다.

배열 이란 여러 개의 값을 순차적으로 나열한 자료구조다.

배열 과 객체 🎈

배열도 사실 객체다.
객체는 키와 값으로 이루어져 있다.

배열은 값만 가지고 있지만, 엄밀히 말하면 인덱스라는 키가 자동적으로 부여된다.
즉 배열은 순서를 가지고 있는 객체다.

자바스크립트의 배열🎈

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이
빈틈없이 연속적으로 나열된 자료구조를 말한다.

이러한 배열을 밀집 배열(dense array) 이라고 부른다.

자바스크립트의 배열은 연속적이지 않을수 있다.
이러한 배열을 희소 배열(sparse array) 이라고 부른다.

length 프로퍼티🎈

length 를 임의로 설정할때 벌어지는 일이다.

length 를 임의로 줄일때

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

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

// 배열의 길이가 5에서 3으로 줄어든다.
console.log(arr); // [1, 2, 3]

length 를 임의로 늘릴때

const arr = [1];

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

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

실질적으로 값은 1개지만 length 는 3개로 표시된다.
즉 희소 배열 의 length 는 배열의 값보다 무조건 크다.

희소 배열🎈

일반적인 배열은 자바스크립트 엔진이 최적화를 한다.
하지만 희소 배열은 성능 적으로도 좋지 않고 배열의 이념과도 멀기 때문에 (연속적인 값의 나열)
희소 배열의 사용은 지양 해야 한다.

생성자 함수

Array.from🎈

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

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

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

배열의 추가🎈

존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다.
이때 length 보다 큰값을 할당하면 중간은 비게 되고 그 즉시 희소 배열이 된다.

const arr = [0];

// 배열 요소의 추가
arr[1] = 1;

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

arr[100] = 100; 

console.log(arr); // [0, 1, empty × 98, 100] <- 희소 배열
console.log(arr.length); // 101 

인덱스는 요소의 위치를 나타내기 때문에 반드시 0이상의 정수를 사용해야 한다.
그렇지 않으면 요소가 아니라 프로퍼티가 생성된다.

const arr = [];

// 배열 요소의 추가
arr[0] = 1;
arr['1'] = 2;

// 프로퍼티 추가
arr['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]

// 프로퍼티는 length에 영향을 주지 않는다.
console.log(arr.length); // 2

메서드 🎁

배열에는 원본에 영향을 주는 메서드와
새롭게 반환하는 메서드가 존재한다.

Array.prototype.indexOf ✔

• 인수로 전달한 값을 처음 발견된 요소의 인덱스를 반환한다.
• 만약 없으면 -1을 반환한다.

비슷한 메서드로는 array.prototype.includes 가 있다.
indexOf 는 -1 을 조건으로 비교 해야 하지만
includes 는 존재 자체를 비교 할수 있어서 가독성에 유리하다.

pop push , unshift shift ✔

LiFo (last in First out) 마지막으로 들어온게 첫번째로 나간다.
push 로 집어넣고 pop 으로 빼낸다

FiFo (First In First Out) 처음 들어온게 첫번째로 나간다.
push 로 집어넣고 shift 로 빼낸다.

Array.prototype.concat ✔

배열을 합쳐서 새로운 배열로 반환한다. 즉 원본에 영향을 주지 않는다.

... spread ✔

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

// concat 메서드는 ES6의 스프레드 문법으로 대체할 수 있다.
result = [...[1, 2], ...[3, 4]];
console.log(result); // [1, 2, 3, 4]

spread 문법은 원본에 영향을 주지 않으면서 일관성 있게 사용하기 좋다.

Array.prototype.splice ✔

splice(start,deletecount,itmes)
어디서부터 , 몇개를 지우고 , 무엇을 추가 할지 인자를 받는다.
이때 원본을 직접 변경하며 지운 요소들을 따로 반환 한다.

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(start , end)
어디서부터 , ~전까지 복사후 새로운 배열로 반환한다. 원본 배열을 변경하지 않는다.

Array.prototype.join ✔

배열의 모든 요소들을 연결한다.
기본값은 콤마다.
예를들어

const elements = ['Fire', 'Air', 'Water']

이것을 인자 없이 사용하면 요소마다 콤마가 있는 한가지 문자열이 된다.
만약 콤마 없이 한가지 문자열로 붙이려면 ('') 인자를 넣어준다.

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

Array.prototype.fill ✔

전달 받은 인자를 사용하고자 하는 배열의 요소로 전부 채운다. Array 생성자 함수랑 조합이 좋다
const a = Array(50).fill(0) // 0 50개

Array.prototype.flat ✔

중첩배열의 평탄화를 몇번 할지 정한다. 기본값은 1이고 1번 배열을 벗긴다는 뜻이다.

고차함수 메서드 🎁

Array.prototype.sort ✔

원본을 직접 변경하며 오름차순으로 정렬한다.

Array.prototype.forEach ✔

for문 과 거의 동일하지만 forEach는 콜백함수를 받아서 수행한다.
for문 과의 차이점은 3가지가 있다.

• 반환값이 없다. 반환값은 항상 undefined 다.
• break continue 를 사용할수 없다. 즉 모든 요소를 빠짐없이 순회한다.
• 성능이 좋지않다. 하지만 가독성이 좋기때문에
  퍼포먼스 가 필요한게 아니면 forEach 사용을 권장한다

Array.prototype.map ✔

forEach 와 거의 동일하다.
배열의 모든 요소를 순회 하면서 인수로 전달받은 콜백함수를 반복 호출한다.
차이점은 1대1로 콜백함수로 매핑한뒤 새로운 배열을 반환한다.

Array.prototype.filter ✔

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

Array.prototype.reduce ✔

모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다.
그리고 나서 하나의 결과값을 만들어 반환한다.

Array.prototype.some ✔

콜백 함수의 반환값이 단 하나라도 참이면 true 모두 거짓이면 false 를 반환한다.

Array.prototype.every ✔

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

Array.prototype.find ✔

콜백 함수의 반환값이 true인 첫번째 요소를 반환한다.
만약 요소가 없으면 undefined 를 반환한다.

Array.prototype.findIndex ✔

콜백 함수의 반환값이 true인 첫번째 요소의 인덱스 를 반환한다.
만약 요소가 없으면 -1 를 반환한다.