JavaScript 배열(Array) 정리

Array

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체이다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않다.

요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며, 무조건 정수만 허용한다.

1. Declaration

const arr1 = new Array();
const arr2 = [1, 2];
console.log(arr1); // []
console.log(arr2); // [1,2]

2. Index position

const fruits = ["🍎", "🍌"];
console.log(fruits); // ["🍎", "🍌"]
console.log(fruits.length); // 2
console.log(fruits[0]); // 🍎
console.log(fruits[fruits.length - 1]); // 🍌

3. Looping over array

3.1 for

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // 🍎 // 🍌
}

3.2 for of

for (let fruit of fruits) {
  console.log(fruit); // 🍎 // 🍌
}

3.3 forEach

: 배열의 항목들을 순환하며 처리한다.

arr.forEach(callback(currentvalue[,index[,array]])[,thisArg])

매개변수

• callback : 각 요소에 대해 실행할 함수로, 다음 세 가지 매개변수를 받는다.

  • currentValue : 처리할 현재 요소

  • index (Optional) : 처리할 현재 요소의 인덱스

  • array (Optional) : forEach()를 호출한 배열

• thisArg (Optional) : callback을 실행할 때 this로 사용할 값

fruits.forEach((fruit) => console.log(fruit)); // 🍎 // 🍌
fruits.forEach((item, index, array)=>console.log(item, index)); // 🍎 0 // 🍌 1

4. Addition, deletion

4.1 push

: 배열 끝에 항목 추가하기

fruits.push("🍓", "🍑");
console.log(fruits); // ["🍎", "🍌", "🍓", "🍑"]

4.2 pop

: 배열 끝에서부터 항목 제거하기

fruits.pop(); // return "🍑"
console.log(fruits); // ["🍎", "🍌", "🍓"]

4.3 unshift

: 배열 앞에서부터 항목 추가하기

fruits.unshift("🍋");
console.log(fruits); // ["🍋", "🍎", "🍌", "🍓"]

4.4 shift

: 배열 앞에서부터 항목 제거하기

fruits.shift(); // return "🍋"
console.log(fruits); // ["🍐", "🍎", "🍌", "🍓"]

❗ note
shift, unshift are slower than pop and push.

pop과 push는 기존에 있던 데이터들을 움직이지 않아도 되지만,
shift와 unshift는 앞에 있는 데이터들을 하나씩 옮겨줘서 빈공간을 만들어 넣고, 또 없앨때는 빈 공간을 다시 채워주러 하나씩 옮겨야하므로 느리다. ( 배열의 길이가 길수록 shift하는 행동을 반복 )

4.5 splice

: 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

array.splice(start[,deleteCount[,item1[,item2[,...]]]])

매개변수

• start : 배열의 변경을 시작할 인덱스

  • 배열의 길이보다 큰 값인 경우 : 실제 시작 인덱스는 배열의 길이로 설정됩니다.
  • 음수인 경우 : 배열의 끝에서부터 요소를 세어나간다.
    (-n이면 요소 끝의 n번째 요소를 가리키며, 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정)

• deleteCount (Optional) : 배열에서 제거할 요소의 수

  • 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거한다.
  • deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다.

• item1, item2, ... (Optional) :배열에 추가할 요소
  아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

반환 값

제거한 요소를 담은 배열을 반환하며, 아무 값도 제거하지 않았으면 빈 배열을 반환한다.

console.log(fruits); // ["🍐", "🍎", "🍌", "🍓"]

fruits.splice(1, 2); // return ["🍎", "🍌"]
console.log(fruits); // ["🍐", "🍓"]

fruits.splice(1, 1, "🍌", "🍇"); // return ["🍓"]
// index 1부터 1개를 지운후 그 자리에 새로운 것들 추가해줌

console.log(fruits); // ["🍐", "🍌", "🍇"]
//deleteCount를 0으로 하고 이어서 추가할 value를 넣으면 아무것도 지우지 않고 해당 자리에 추가해주는 기능으로도 쓰일 수 있음

4.6 concat

: 배열을 매개변수로 주어진 배열·값과 이어붙인 새로운 배열을 반환한다.

console.log(fruits); // ["🍐", "🍌", "🍇"]

const fruits2 = ["🍒", "🍍"];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // ["🍐", "🍌", "🍇", "🍒", "🍍"]

5. Searching

5.1 indexOf

: 배열 안 항목의 인덱스 찾기

console.log(fruits); // ["🍐", "🍌", "🍇"]
console.log(fruits.indexOf("🍇")); // 2 
// 해당 값이 배열에서 몇 번째 인덱스를 가지고 있는지

console.log(fruits.indexOf("🍒")); // -1 
// 없는 건 -1로 나옴

5.2 includes

: 배열이 주어진 값을 포함하는지 판별해 true/false를 반환한다.

console.log(fruits.includes("🍒")); // false

5.3 lastIndexOf

: 배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환한다. 없으면 -1을 반환

console.log(fruits); // ["🍐", "🍌", "🍇"]

fruits.push("🍐");
console.log(fruits); // ["🍐", "🍌", "🍇", "🍐"]

console.log(fruits.indexOf("🍐")); // 0
// 여러 개 있을때 가장 처음꺼
console.log(fruits.lastIndexOf("🍐")); // 3
// 여러 개 있을때 가장 마지막꺼

6. Copy

6.1 slice

: 배열 복사하기

console.log(fruits); // ["🍐", "🍌", "🍇", "🍐"]

const copy=fruits.slice()
console.log(copy); // ["🍐", "🍌", "🍇", "🍐"]

❗ 참고 자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w