---

배열(Array)이란?

데이터의 순서가 있는 집합

배열이란 자료구조의 한 종류로 들어온 데이터의 순서(index)에 따라 작업할 때 사용한다.

메모리 구조상 배열의 데이터들은 순차적으로 구성되며 정수, 문자열, 객체등등.. 다양한 타입 사용 가능하지만 동일한 타입을 사용하는 것을 권장한다.

자바스크립트의 배열 특징

일반적으로 배열은 동일한 메모리 크기를 가지며, 연속적으로 이어져 있다.

하지만 자바스크립트에서의 배열은 연속적으로 이어져 있지 않고 객체와와 유사하다.

즉 자바스크립의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이다.

// 인덱스, value, length가 존재한다면 배열로 인정
array = Array.from({
  0: '하',
  1: '이',
  length: 2,
});

console.log(array); // [ '하', '이' ]

---

배열 생성 방법

Array클래스 생성자 함수

// 비어있는 배열 생성
const arr = new Array(3);
console.log(arr); // [ <3 empty items> ]

// 값을 할당하여 배열 생성
const arr = new Array(1, 2, 3, 4);
console.log(arr); // [ 1, 2, 3, 4 ]

Array객체의 static함수 (of, from)

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

// from
const arr = [1, 2, 3, 4, 5, 6];
const arr2 = Array.from(arr);
console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]

Array literal

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

---

Array의 static함수

isArray

특정한 오브젝트가 배열인지 체크

const fruits = ['banana', 'apple', 'grape', 'peach'];

console.log(Array.isArray(fruits)); // true
console.log(Array.isArray({})); // false

indexOf

특정한 아이템의 위치를 찾을 때

const fruits = ['banana', 'apple', 'grape', 'peach'];

console.log(fruits.indexOf('apple')); // 1

includes

배열안에 특정한 아이템이 있는지 체크

const fruits = ['banana', 'apple', 'grape', 'peach'];

console.log(fruits.includes('apple')); // true

push

배열 맨 뒤에 요소를 추가 (배열 자체를 수정하고 길이를 반환)

const fruits = ['banana', 'apple', 'grape', 'peach'];

const length = fruits.push('orange');
console.log(fruits); // [ 'banana', 'apple', 'grape', 'peach', 'orange' ]
console.log(length); // 5

unshift

배열 맨 앞에 요소를 추가 (배열 자체를 수정하고 길이를 반환)

const fruits = ['banana', 'apple', 'grape', 'peach'];

const length = fruits.unshift('orange');
console.log(fruits); // [ 'orange', 'banana', 'apple', 'grape', 'peach' ]
console.log(length); // 5

pop

배열 맨 뒤에 요소를 제거 (배열 자체를 수정하고 제거된 요소를 반환)

const fruits = ['banana', 'apple', 'grape', 'peach'];

const lastItem = fruits.pop();
console.log(fruits); // [ 'banana', 'apple', 'grape' ]
console.log(lastItem); // peach

splice

배열 특정 위치에 요소를 추가, 제거 (배열 자체를 수정하고 제거된 요소를 배열 형태로 반환)

// 제거
const fruits = ['banana', 'apple', 'grape', 'peach'];

const deleted = fruits.splice(1, 1)
console.log(fruits); // [ 'banana', 'grape', 'peach' ]
console.log(deleted); // apple

// 추가
const fruits = ['banana', 'apple', 'grape', 'peach'];

const deleted = fruits.splice(1, 0, 'orange', 'strawberry')
console.log(fruits); // [ 'banana', 'orange', 'strawberry', 'apple', 'grape', 'peach' ]
console.log(deleted); // []

slice

잘라진 새로운 배열을 만듬 (배열 자체는 유지하고 새로운 배열을 반환)

const fruits = ['banana', 'apple', 'grape', 'peach'];

let newArr = fruits.slice(0, 2);
console.log(newArr); // [ 'banana', 'apple' ]
console.log(fruits); // [ 'banana', 'apple', 'grape', 'peach' ]

concat

여러개의 배열을 연결 (배열 자체는 유지하고 새로운 배열을 반환)

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

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

reverse

배열 요소의 순서를 거꾸로 배치 (배열 자체를 수정하고 변경된 요소를 배열 형태로 반환)

const arr1 = [1, 2, 3 , 4, 5, 6];
const arr2 = arr1.reverse();

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

flat

중첩 배열을 하나의 배열로 평탄화 (배열 자체는 유지하고 새로운 배열을 반환)

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

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

fill

특정한 값으로 배열을 채우기 (배열 자체를 수정하고 변경된 요소를 배열 형태로 반환)

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

console.log(arr.fill(0)); // [ 0, 0, 0, 0, 0, 0 ]
console.log(arr.fill('s', 1, 3)); // [ 0, 's', 's', 0, 0, 0 ]
console.log(arr.fill('a', 1)); // [ 0, 'a', 'a', 'a', 'a', 'a' ]

join

배열을 문자열로 변환 (배열 자체는 유지하고 새로운 배열을 반환)

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

let text = arr.join();
console.log(text); // 1,2,3,4,5,6

text = arr.join(' | ');
console.log(text); // 1 | 2 | 3 | 4 | 5 | 6

---

참고 자료

Array - JavaScript | MDN
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼