배열

배열과 배열에 관한 유용한 함수들을 정리해보자.

배열

• 연관된 데이터를 연속적인 형태로 저장하는 복합 타입의 자료구조.
• 즉, 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조.
• 배열에 포함된 원소는 순서대로 인덱스가 붙는다.

배열의 생성

배열의 생성과 초기화 방법에는 여러가지 방법이 존재한다.

const arr1 = new Array(); // []
const arr2 = []; // []
const arr3 = [1, 2, 3, 4, 5]; // [1, 2, 3, 4, 5]
const arr4 = new Array(5); // [5의 빈 공간]
const arr5 = new Array(5).fill(5); // [5, 5, 5, 5, 5]
const arr6 = Array.from(Array(5), (v, k) => {
  return k + 1;
}); // [1, 2, 3, 4, 5]

배열 조회

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

// 특정 인덱스 접근
console.log(arr[1]); // 2

// 마지막 데이터 접근
console.log(arr[arr.length - 1]); // 5

// 배열 전체 조회
for (let value of arr) {
  console.log(value);
}

// forEach(callback(value, index, array))), 인덱스, 배열 생략 가능
arr.forEach((value, index, array) => {
  console.log(value, index, array);
});

배열 값 추가, 삭제, 복사

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

// push : 맨 뒤에 데이터 추가
fruits.push('strawberry', 'peach');
console.log(fruits);

// pop : 맨 뒤 데이터 삭제
fruits.pop();
fruits.pop();
console.log(fruits);

// unshift : 맨 앞에서 부터 데이터 추가
fruits.unshift('strawberry');
console.log(fruits);

// shift : 맨 앞에서 부터 데이터 제거
fruits.shift();
console.log(fruits);

// note! : shift와 unshift는 push, pop에 비해 굉장히 느리다 전체적으로 배열의 값이 움직여야 하기 때문이다.

// splice : 특정 인덱스에서 값 삭제
fruits.push('strawberry', 'peach', 'orange');
console.log(fruits);

// 특정 인덱스 부터 모든 데이터 삭제
fruits.splice(1);
console.log(fruits);

// 특정 인덱스 부터 특정 수 데이터 삭제
fruits.splice(1, 1);
console.log(fruits);

// 특정 인덱스 부터 특정 수 데이터 삭제 후 그 자리에 데이터 삽입
fruits.splice(1, 1, 'grape');
console.log(fruits);

// concat : 배열과 배열을 연결하여 하나의 배열을 반환
const fruits2 = ['mango', 'melon'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

---

유용한 배열 APIs

join('구분자')

배열의 요소들을 문자열로 반환해주는 함수.
join의 인자로 구분자를 입력가능하며 생략할 경우 기본값은 ',' 이다.

예제

const friuts = ['apple', 'banana', 'orange'];
const result = fruits.join();
--------------------------------------
result => apple,banana,orange

split('구분자', '제한크기')

문자열을 구분자로 나누어서 제한크기의 배열로 반환하는 함수.
구분자는 생략이 불가능하며 제한크기는 생략이 가능하다(생략할 경우 구분자로 나눈 모든 요소들이 배열의 요소로 반환).

예제

const fruits = '🍎, 🥝, 🍌, 🍒';
const result = fruits.split(',', 3);'
--------------------------------------
result => ["🍎", "🥝", "🍌"]

reverse()

배열의 값의 순서를 반대로 바꾸어 반환하는 함수.
기존의 배열(아래 array) 역시 값이 반대로 바뀌어 저장된다.

예제

const array = [1, 2, 3, 4, 5];
const result = array.reverse();
--------------------------------------
result => [5, 4, 3, 2, 1]

slice(start, end)

배열의 start 인덱스 부터 end 인덱스 -1의 위치까지의 요소를 배열로 반환하는 함수.
end를 생략하면 start 부터 배열의 마지막 값까지 반환한다.

예제

const array = [1, 2, 3, 4, 5];
const result = array.slice(2,5);
--------------------------------------
result => [3, 4, 5];

splice(index, count)

index 부터 count 크기만큼 요소를 삭제한 배열을 반환하는 함수.
count 생략할 경우 index부터 마지막 요소까지 모두 삭제한 배열을 반환한다.

예제

const array = [1, 2, 3, 4, 5]
array.splice(1, 3)
--------------------------------------
result => [1, 5]

---

참고자료

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array