[JavaScript] 자바스크립트 배열의 개념과 APIs 총정리 (8)

프로그래밍에서 비슷한 데이터들을 묶어서 보관하는 것을 자료구조 라고 합니다.

오브젝트와 자료구조의 차이는 

오브젝트는 서로 연관된 특징과 행동들을 묶어 놓는 것을 말합니다.

비슷한 타입의 오브젝트들을 묶어놓는 것을 자료구조라고 합니다. 하지만 자바스크립트는 다른 타입의 오브젝트를 담을 수 있지만 역시 권장하지 않습니다.

 

 

1. Array declaration

배열은 다음처럼 정의할 수 있습니다.

const arr1 = new Array();
const arr2 = [1, 2];

 

2. Index position

배열은 다음과 같이 접근할 수 있습니다.

const fruits = ['사과', '바나나'];
console.log(fruits); // ['사과', '바나나']
console.log(fruits.length); // 2
console.log(fruits[0]); // 사과
console.log(fruits[2]); // undefined
console.log(fruits[fruits.length - 1]);

 

3. Looping over an array

반복문으로 배열을 순서대로 출력할 수 있는 방법들입니다.

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

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

// forEach
fruits.forEach((fruit) => console.log(fruit))

 

 

4. Add, delete, copy

배열을 조작하는 방법들입니다.

// push: add an item to the end
fruits.push('딸기', '복숭아');
console.log(fruits);

// pop: remove an item from the end
fruits.pop();
console.log(fruits);

// add an item to the beginning
fruits.unshift('망고', '자두')
console.log(fruits)

// remove an item from the beginning
fruits.shift();
console.log(fruits)

하지만 shift와 unshift는 pop과 push보다 느립니다. pop과 push는 기존의 데이터들은 움직이지 않아도 되지만 shift와 unshift는 앞의 모든 데이터들의 위치를 조작해야하기 때문입니다.

 

splice

첫번째 인자로는 몇번째 인덱스부터 지울건지, 두번재 인덱스는 몇개를 지울건지가 들어갑니다. 하지만 여기서 두번째 인자를 넣지 않으면 첫번째 인자의 인덱스부터 뒤까지 전부 지우게 됩니다.

 

// splice
fruits = ['사과', '레몬', '복숭아', '포도'];

// 어디서 부터 지울건지, 몇개를 지울건지
fruits.splice(1); // ['사과']
fruits.splice(1, 1); // ['사과', '복숭아', '포도']
fruits.splice(1, 1, '배', '수박');  // 인덱스 1이 지워진 자리에 '배'와 '수박이 채워짐

뒤에 다른 문자열을 넣으면 자른 자리에 문자열이 들어오게 됩니다.

 

두가지 배열을 묶어서 만들 수도 있습니다. fruits와 fruits2가 하나의 배열이 됩니다.

// combine two arrays
const fruits2 = ['배', '사과'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits

 

5. Searching

indexOf 와 includes

fruits = ['사과', '레몬', '복숭아', '포도'];
console.log(fruits.indexOf('사과'))  // 0
console.log(fruits.indexOf('포도'))  // 3
console.log(fruits.includes('포도')) // true 
console.log(fruits.includes('코코넛')) // false
console.log(fruits.indexOf('코코넛'))  // -1

lastIndexOf

console.log(fruits.indexOf('사과'));  // 맨 처음 값의 인덱스 출력
console.log(fruits.lastIndexOf('사과'));  // 맨 마지막 값의 인덱스 출력