자바스크립트 배열

1. 배열?

0	1	2	3	4	5

1.1 배열

배열은 index 값을 가지는 자료구조로 index는 0부터 시작하게 됩니다.

1.2 배열 index?

index값으로 해당하는 오브젝트 값들에 접근할 수 있고 수정,삭제 또한 가능합니다.

1.3 배열은 동일한 타입만?

배열은 한 배열안에 동일한 타입의 오브젝트들을 넣어주는게 중요합니다. 물론 자바스크립트는 dynamically typed language 로 다른 타입의 오브젝트들을 넣을 수 있지만 추천하지는 않습니다.

2. 배열 선언 방법

2.1 대괄호 [ ]를 이용

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

2.2 대괄호 [ ] 응용

const arrObj = [
  { name: 'chan', age: 18 },
  { name: 'hoo', age: 17 },
];

const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const arr = [obj1, obj2];

2.3 new Array()를 이용

const arr = new Array();

2.4 new Array() 응용

const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const objArr = new Array(obj1, obj2);

3. 배열 인덱스 접근

배열은 앞서 설명한 것과 같이 index 값을 이용해 해당하는 데이터에 접근한다고 했습니다. 반복문을 이용해 순차적으로 배열의 index에 접근하는 법을 알아보겠습니다.

3.1 일반적인 접근 방법

const num = [1, 2, 3, 4, 5];
const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const arr = [obj1, obj2];
const objArr = new Array(obj1, obj2);
console.log(num[0], num[1]);
console.log(objArr[0], objArr[1]);
console.log(arr[0]);

3.2 while 문

const num = [1, 2, 3, 4, 5];
let i = 0;
while (i < num.length) {
  console.log(num[i]);
  i++;
}

3.3 for 문

const num = [1, 2, 3, 4, 5];
for (let i = 0; i < num.length; i++) {
  console.log(num[i]);
}

3.4 for..in 문

const num = [1, 2, 3, 4, 5];
for (index in num) {
  console.log(num[index]);
}

const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const objArr = new Array(obj1, obj2);

for (index in objArr) {
  console.log(objArr[index]);
}

3.5 for..of 문

const num = [1, 2, 3, 4, 5];
for (data of num) {
  console.log(data);
}

const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const objArr = new Array(obj1, obj2);

for (data of objArr) {
  console.log(data);
}

3.6 forEach

const num = [1, 2, 3, 4, 5];
const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const objArr = new Array(obj1, obj2);

num.forEach((data) => {
  console.log(data);
});
objArrum.forEach((data) => {
  console.log(data);
});

4. 배열에 데이터 추가(push), 삭제(pop)

4.1 데이터 추가(push)

배열의 끝에 데이터를 추가하는 키워드는 push 입니다.

const num = [1, 2, 3];
console.log(num);
num.push(4);
console.log(num);

번외로 우리는 자바스크립트가 dynamically typed language로 배열에서 각기 다른 타입의 오브젝트를 넣을 수 있다고 했습니다.

const obj1 = { name: 'chan', age: 18 };
const obj2 = { name: 'hoo', age: 17 };
const objArr = new Array(obj1, obj2);

const num = [1, 2, 3];
console.log(num);
num.push(4);
console.log(num);
num.push(obj1, obj2);
console.log(num);

console창에 보면 배열에 다른 타입의 오브젝트가 들어가있는 것을 확인할 수 있습니다.

4.2 데이터 삭제(pop)

배열에 최근에 삽입된 데이터를 삭제하는 키워드는 pop 입니다.
만일 Array에 더 이상 값이 없다면 undefined 를 반환 합니다.

const num = [1, 2, 3];
console.log(num);
num.push(4);
num.pop();
num.pop();

4.3 배열 앞에 추가 삭제

앞서 설명한 push(), pop()은 배열의 맨 뒤에 추가 및 삭제를 수행합니다.
반대로 unshift, shift를 사용하면 배열의 맨 앞에 추가 및 삭제를 수행할 수 있습니다.

4.3.1 unshift - 배열의 맨 앞에 추가

const num = [1, 2, 3];
num.unshift(0);

4.3.2 shift = 배열의 맨 앞 삭제

const num = [1, 2, 3];
num.shift();

4.3.3 unshift와 shift의 단점

일반적으로 배열의 맨 끝에 추가 삭제 하는 것은 정말 간단한 작업입니다.
반대로 배열의 앞에 데이터를 추가 삭제하는 것은 귀찮은 작업입니다.
앞이나 중간에 데이터를 삽입 삭제하는 작업은 중간에 들어온 공간만큼 서로 1칸씩 계속 미루거나 당기는 작업이 수행되어야 하기 때문입니다.

4.4 데이터 중간 삭제(splice)

splice를 사용하면 pop(), shift()처럼 맨 끝과 맨 앞의 데이터를 삭제하는게 아닌 중간 데이터도 삭제가 가능합니다.
splice(start: number, deleteCount?: number): T[]; 첫번째로 어디서부터 지울건지 시작점 : 몇개나 지울건지 개수

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

여기서 숫자 3을 지우려면

num.splice(2, 1);

만약 숫자 3부터 5까지 지우려면

num.splice(2, 3);

5. 합치기 (concat)

5.1 배열1 과 배열2 합치기

배열 1과 배열2를 합치는 키워드는 concat 입니다.
concat(...items: ConcatArray<T>[]): T[];
여기서 한가지 주의할 사항은 배열3 = 배열1 + 배열2 이렇게 하면 합쳐지는게 아닌가? 라는 생각이 들 수도 있는데 결과는 전혀 다릅니다.
아래 예시를 봅시다.

const num1 = [1, 2, 3, 4, 5];
const num2 = [11, 22, 33, 44, 55];

const tmp = num1 + num2;
console.log(tmp, typeof tmp);
// 1,2,3,4,511,22,33,44,55 string
const num3 = num1.concat(num2);
console.log(num3, typeof num3);
// [1, 2, 3, 4, 5, 11, 22, 33, 44, 55] object

6. 배열 데이터 index 값 알기 (indexOf)

6.1 indexOf()

배열에 들어있는 데이터 중에 찾고자 하는 데이터가 몇 번째 index에 있는지 알고 싶을땐 indexOf()을 사용합니다.
indexOf(searchElement: T, fromIndex?: number): number;

const num1 = [1, 2, 3, 4, 5, 3, 7, 8, 9];
console.log(num1.indexOf(3));
// 2

6.2 lastIndexOf()

만약 여기서 동일한 데이터를 가진 오브젝트들이 있고 맨 마지막에 있는 데이터의 index값을 찾고싶을때는 lastIndexOf()을 사용합니다.

const num1 = [1, 2, 3, 4, 5, 3, 7, 8, 9];
console.log(num1.lastIndexOf(3));
// 5

찾고자 하는 값이 없다면 -1 을 반환합니다.

7. 배열에 데이터 존재 유무 파악(includes)

7.1 includes()

배열에 해당하는 데이터가 있는지 확인하고 싶다면 includes 키워드를 사용하면 됩니다.
includes(searchElement: T, fromIndex?: number): boolean;
결과 값은 true or false로 반환 됩니다.

const num1 = [1, 2, 3, 4, 5, 3, 7, 8, 9];
console.log(num1.includes(3));
// true
console.log(num1.includes(77));
// false

참고: MDN