[JS] 자바스크립트 배열 총정리

배열 vs 객체

배열은 같은 자료들을 담는 자료구조 중의 하나이다.

객체는 어떤 개체에 대한 정보를 클래스로 틀을 만들고 그 클래스로 여러 개체들에 대한 정보를 담는것이다.

에를들어 객체는 사람이라는 개체에 대한 정보를 담는 틀을 클래스로 만들어 보면

이름, 키, 몸무게, 성별 .. 등등 다양한 정보를 사람이라는 공통된 개체에 대한 정보를 클래스로 만들어서

마이크, 엘리스, 존 ...등등 이라는 여러 객체를 찍어 낼 수 있다.

객체는 다양한 자료형을 담는다.

반면에 배열은 단순하게 같은 자료형의 나열이다.

위에서 생성한 사람이라는 객체들을 나열할 수도 있고, 정수를 나열할 수도 있다.

자바스크립트는 다양한 자료형을 섞어서 배열에 담을수는 있지만 이런식으로 사용하지는 않는다.

하나의 배열에는 동일한 자료형을 나열해서 사용하자.

1. 선언 (Declaration)

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

2. 인덱스와 길이

const fruits = ['apple', 'banana'];
console.log(fruits);
console.log(fruits.length); // 2
console.log(fruits[0]); // apple
console.log(fruits[2]); // banana
console.log(fruits[1]); // undefined
console.log(fruits[fruits.length - 1]); // banana

3. 배열의 반복문 (Loooping over an array)

반복문을 이용하여 배열의 모든 요소를 출력해보자.

세팅

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

for

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(function (fruit, index, array) {
  console.log(fruit, index, array);
});

forEach를 사용할 때는 콜백함수를 사용하는데 콜백함수의 인자로 (값, 인덱스, 배열) 로 정의하여 사용한다.

위 함수를 화살표 함수로 좀더 축약해보자.

fruits.forEach((fruit, index) => console.log(fruit, index, array));

fruits이라는 배열의 값을 fruit에 담고 각각의 인덱스를 index에 담아서 출력한다.

4. 배열 다루기

인자 추가하기, 삭제하기, 2개 배열 붙이기

아래에서 소개하는 메서드는 전부 Array의 메서드이다.

즉, arr.메서드(); 형태로 사용한다.

그리고 모든 메서드들은 새로운 값을 리턴한다.

세팅

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

push

배열의 가장 마지막에서부터 값을 추가한다.

fruits.push('pear', 'berry');
console.log(fruits);
// ['apple', 'banana', 'kiwi', 'melon', 'pear', 'berry']

pop

배열의 가장 마지막 값을 삭제한다.

fruits.pop();
console.log(fruits);
// ['apple', 'banana', 'kiwi', 'melon', 'pear']

unshift

배열의 가장 앞에서부터 값을 추가한다.

fruits.unshift('berry', 'grape');
console.log(fruits);
// ['berry', 'grape', 'apple', 'banana', 'kiwi', 'melon', 'pear']

shift

배열의 가장 앞에 값을 삭제한다.

fruits.shift();
console.log(fruits);
// ['grape', 'apple', 'banana', 'kiwi', 'melon', 'pear']

note

쉬프트와 언쉬프트는 정말 느리게 동작한다.

앞에서부터 값을 넣거나 삭제하면 뒤에 있던 아이템들이 전부 이동해야 하기 때문이다.

splice

배열에서 원하는 인덱스의 값을 삭제하거나 삭제하고 추가할 수 있다.

fruits.splice(1, 1); // 인덱스 1부터 1개 삭제
console.log(fruits);
// ['grape', 'banana', 'kiwi', 'melon', 'pear']

fruits.splice(3); // 인덱스 3부터 뒤로 전부 다 삭제
console.log(fruits);
// ['grape', 'banana', 'kiwi']


fruits.splice(1, 1, 'grape', 'berry'); // 1인덱스부터 1개 삭제하고 그 자리에 'grape', 'berry' 추가
console.log(fruits);
// ['grape', 'grape', 'berry', 'kiwi']

concat

두개의 배열을 연결한다.(합친다.)

const fruits2 = ['coconut', 'pear'];
const newFruits = fruits.concat(fruits2); // fruits에 fruits2을 연결한다.
console.log(newFruits);
// ['grape', 'grape', 'berry', 'kiwi', 'coconut', 'pear']

5. 검색하기

마찬가지로 아래에서 소개하는 메서드들도 전부 Array의 메서드이다.

즉, arr.메서드(); 형태로 사용한다.

그리고 모든 메서드들은 새로운 값을 리턴한다.

세팅

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

indexOf

배열에서 처음으로 발견된 값의 인덱스를 리턴한다.

console.log(fruts.indexOf('apple'))
// 0

console.log(fruts.indexOf('waterMelon')); // 없는 값을 입력하면 -1이 반환된다.
// -1

lastIndexOf

배열에서 마지막으로 발견된 값의 인덱스를 리턴한다.

console.log(fruts.lastIndexOf('apple'));
// 3

includes

아이템이 배열에 포함되어있으면 true, 포함이 안되어있으면 false 를 반환한다.

console.log(fruts.include('apple'));
// true

console.log(fruts.include('waterMelon'));
// false