📚 JavaScript 배열

---

📕 배열이란?

배열은 순서가 있는 값들의 모음이다. 이때 순서는 인덱스(index)로 구성되어있다. 배열 내부의 값들을 각각 요소(element)라고 부르며 쉼표(,)로 구분한다.

사용방법

자바스크립트에서 배열은 아래와 같은 형식으로 선언한다.

const arr = [ 요소1, 요소2 ];

console.log(arr); // (2) [ 요소1, 요소2 ]
console.log(arr.length); // 2

위 코드에서 요소1의 인덱스는 0, 요소2의 인덱스는 1이 된다. 객체와 달리 배열에서는 length를 사용하여 배열의 길이를 알 수 있다.

객체에서 key를 이용해 데이터를 검색했던 것과 같이, 배열에서는 인덱스를 통해 검색할 수 있다.

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

console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // undefined

console.log(fruits[fruits.length - 1]); // banana

배열의 길이를 사용하여 마지막 요소 확인할 수도 있는데, 이때 인덱스가 0부터 시작하기 때문에 -1을 해주어야 한다.

---

📗 배열의 요소 순회하기

배열 내부의 요소들을 모두 출력하기 위해서는 어떻게 해야할까?

사용방법

for 문, for of 문, forEach 등 다양한 방법이 있다.

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

// 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((fruit) => console.log(fruit));

참고 - forEach

배열명.forEach((요소, 인덱스, 배열) => 
	console.log(요소, 인덱스, 배열)
);

forEach 에서는 위와 같이 콜백 함수를 전달할 수 있는데, 인자로 요소와 인덱스, 배열을 넣을 수 있다.

---

📘 배열 수정하기

배열의 요소 추가 (pop, unshift)

배열의 맨 뒤에 새로운 요소를 추가하기 위해서는 push를 사용한다.

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

fruits.push('peach');
console.log(fruits); // ['apple', 'banana', 'kiwi', 'orange', 'peach']

배열의 맨 앞에 새로운 요소를 추가하기 위해서는 unshift를 사용한다.

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

fruits.unshift('lemon');
console.log(fruits); // ['lemon', 'apple', 'banana', 'kiwi', 'orange']

배열의 요소 삭제 (pop, shift)

배열의 맨 뒤의 요소를 삭제하기 위해 pop을 사용한다.

const fruits = ['apple', 'banana', 'kiwi', 'orange', 'peach'];

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

배열의 맨 앞의 요소를 삭제하기 위해 shift를 사용한다.

const fruits = ['lemon', 'apple', 'banana', 'kiwi', 'orange'];

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

배열의 특정 인덱스의 요소를 삭제하기 위해서는 splice를 사용한다.

const fruits = ['lemon', 'apple', 'banana', 'kiwi', 'orange', 'peach'];

// 시작할 인덱스만 작성
fruits.splice(1);
console.log(fruits); // ['lemon']  

// 지울 요소의 개수까지 작성
fruits.splice(1, 3);
console.log(fruits); // ['lemon', 'orange', 'peach']  

// 삽입할 데이터까지 작성
fruits.splice(1, 3, 'pineapple', 'melon');
console.log(fruits); // ['lemon', 'pineapple', 'melon', 'orange', 'peach'] 

splice( )의 괄호 안에는 시작할 인덱스와 지울 요소의 개수를 순차적으로 작성할 수 있는데, 지울 요소의 개수는 반드시 적지 않아도 된다. 추가로, 지워진 자리에 데이터를 삽입할 수도 있다.

참고 - shift 와 unshift

shift와 unshift는 push와 pop에 비해 굉장히 느리다. push와 pop은 기존에 아무것도 없던 빈 공간에 요소를 추가했다가 삭제하는 것이기 때문에 기존의 데이터들에 변화를 가져오지 않는 반면, shift와 unshift는 기존 데이터의 인덱스를 변경해준 후에 작업이 진행되기 때문이다.

배열의 요소 복사 (concat)

두 배열을 합치기 위해서는 concat을 사용한다.

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

const fruits2 = ['mango', 'coconut'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // ['apple', 'banana', 'kiwi', 'orange', 'mango', 'coconut']

---

📙 배열의 요소 검색하기

어느 요소가 몇 번째 인덱스에 있는지, 혹은 배열 안에 존재하고 있는지 알 수 없을 때도 있을 것이다. 이때는 indexOf와 includes를 사용한다.

indexOf

배열 안의 요소들의 인덱스를 찾기 위해서는 indexOf을 사용한다.

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

console.log(fruits.indexOf('apple')); // 0
console.log(fruits.indexOf('kiwi')); // 2
console.log(fruits.indexOf('melon')); // -1

배열 안에 찾고자 하는 요소가 없다면 -1을 반환한다.

includes

배열 안에 어떠한 요소가 있는지 알고 싶을 때는 includes를 사용한다.

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

console.log(fruits.includes('apple')); // true
console.log(fruits.includes('melon')); // false

배열 안에 해당 요소가 있다면 true, 없다면 false를 반환한다.

lastIndexOf

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

console.log(fruits.indexOf('apple')); // 0
console.log(fruits.lastIndexOf('apple')); // 4

배열 안에 중복되는 값이 있을 때, indexOf는 배열 안의 모든 요소를 처음부터 살펴보며 제일 첫번째 해당 요소를 만났을 때의 인덱스 값을 반환한다. 반대로 lastIndexOf를 사용하면 제일 마지막에 있는 해당 요소의 인덱스 값을 반환한다.

---

📒 객체와 배열의 차이

객체와 배열을 구분하기 위해서는 아래와 같은 방법을 사용할 수 있다.

차이점

let arr = []; // Array
let obj = {}; // Object
 
/* typeof는 배열인지 객체인지 구분 불가 */
typeof(arr) // "object"
typeof(obj) // "object"
typeof(arr) === type(obj) // true
 
/* Array.isArray()를 통한 분별 */
Array.isArray(arr); // true
Array.isArray(obj); // false
 
/* 객체는 length 사용 불가*/
arr.length // 0
obj.length // undefined

---

📓 참고

(유튜브) 드림코딩 - 자바스크립트 8. 배열 제대로 알고 쓰자.