[Javascript] Array (1)

배열(Array)이란? 여러 개의 값을 순차적으로 나열한 자료구조

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

1. 밀집 배열: 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있는 배열
2. 희소 배열: 배열의 요소가 연속적으로 이어져 있지 않는 배열

• 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체다.
• 자바스크립트 배열은 인덱스를 나타내는 문자열을 프로퍼티 키로 가지며, length 프로퍼티를 갖는 특수한 객체다.
• 자바스크립트 배열은 인덱스로 배열 요소에 접근하는 경우에는 일반적인 배열보다 느리지만, 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠르다.

---

배열 생성

1. 배열 리터럴

const arr = [1, 2, 3, 'hello', { key: 'value' }];

2. Array 생성자 함수

const arr = new Array(1, 2, 3);

3. Array.of

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

Array.of(1) // [1]
Array.of(1,2,3) // [1, 2, 3]
Array.of('string') // ['string']

4. Array.from

• ES6에서 도입된 Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.
• Array.from을 사용하면 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있다.

Array.from({ length: 2, 0: 'a', 1: 'b' }); // ['a', 'b']
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

---

배열 메서드

Array.isArray

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

Array.isArray([]); // true
Array.isArray({}); // false

indexOf()

• 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.
• 원본 배열에 인수로 전달된 요소와 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스를 반환한다.
• 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.

const arr = [1, 2, 3, 4];
arr.indexOf(3); // 2

push()

• 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고, 변경된 length 프로퍼티 값을 반환한다.
• push 메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2, 3, 4];
arr.push(5, 6); // 반환값: 6
console.log(arr); // [1, 2, 3, 4, 5, 6]

pop()

• 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
• pop 메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2, 3, 4];
arr.pop(); // 반환값: 4
console.log(arr); // [1, 2, 3]

pop, push 메서드를 사용하면 스택을 쉽게 구현할 수 있다.

※ Stack(스택): 데이터를 마지막에 밀어 넣고, 마지막에 밀어 넣은 데이터를 먼저 꺼내는 후입 선출(LIFO - Last In First Out) 방식의 자료구조

unshift()

• 인수로 전달받은 모든 값을 원본 배열의 선두 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
• unshift 메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2, 3, 4];
arr.push(0); // 5
console.log(arr); // [0, 1, 2, 3, 4]

shift()

• 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
• shift 메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2, 3, 4];
arr.shift(); // 반환값: 1
console.log(arr); // [2, 3, 4]

shift, pop 메서드를 사용하면 큐를 쉽게 구현할 수 있다.

※ Queue(큐): 데이터를 마지막에 밀어 넣고, 처음 데이터, 즉 가장 먼저 밀어 넣은 데이터를 먼저 꺼내는 선입선출(FIFO - First In First Out) 방식의 자료구조

concat()

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

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

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

splice(start, count, items)

• 원본 배열의 start인덱스부터 count개의 요소를 제거하고 그 자리에 새로운 요소 items를 삽입한다.
• 제거한 요소가 배열로 반환된다.
• 원본 배열을 직접 변경한다.

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

const change = arr.splice(1, 2, 20, 30);

console.log(change); // [2, 3]
console.log(arr); // [1, 20, 30, 4]

slice(start, end)

• 원본 배열의 start인덱스부터 end인덱스 이전 까지 복사하여 반환한다.
• 인수로 전달된 범위의 요소들을 복사하여 새로운 배열로 반환한다.
• 이때 생성된 복사본은 얕은 복사를 통해 생성된다.
• 원본 배열은 변경되지 않는다.

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

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

join()

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

const arr = ['h', 'e', 'l', 'l', 'o'];
arr.join(); // 'h,e,l,l,o'
arr.join(''); // 'hello'

reverse()

• 원본 배열의 순서를 반대로 뒤집고 변경된 배열을 반환한다.
• 원본 배열이 변경된다.

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

fill(value, start, end)

• 인수로 전달받은 값 value을 start인덱스부터 end인덱스 이전까지 요소로 채운다.
• 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채우고 변경된 배열을 반환한다.
• 원본 배열이 변경된다.

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

const arr = [1, 2, 3, 4];
arr.fill(5, 1); // 인덱스 1부터 끝까지 채우기
console.log(arr); // [1, 5, 5, 5]

const arr = [1, 2, 3, 4];
arr.fill(9, 1, 3); // 인덱스 1부터 3 전까지 채우기
console.log(arr); // [1, 9, 9, 4]

includes(valueToFind, fromIndex)

• ES7에서 도입된 includes메서드는 배열 내에 특정 요소가 포함되어 있는지 확인하여 true 혹은 false를 반환한다.
• 첫 번째 인수로 검색할 대상을 지정한다.
• 두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

const arr = [1, 2, 3, 4];
console.log(arr.includes(2)); // true
console.log(arr.includes(5)); // false

const arr = [1, 2, 3, 4, 2];
console.log(arr.includes(2, 2)); // true (인덱스 2부터 검색, 2가 존재함)
console.log(arr.includes(1, 1)); // false (인덱스 1 이후에 1은 없음)

flat(depth)

• ES10에서 도입된 flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.
• 새로운 배열을 반환하며 원본 배열을 수정하지 않는다.

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

const arr = [1, 2, [3, 4, [5, 6]]];
const flatArr = arr.flat(2); // 2단계 깊이까지 평탄화
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

const arr = [1, [2, [3, [4, [5]]]]];
const flatArr = arr.flat(Infinity); // 모든 깊이 평탄화
console.log(flatArr); // [1, 2, 3, 4, 5]