[Javascript] 배열(Arrays)에 대해서 알아보자!

앞선 포스팅들에서 자바스크립트(Javascript)의 Object에 대해서 알아보았습니다. Object를 알았다면 또 하나 더 알아두어야 할 구조가 바로 배열(Arrays)입니다.

 

 

이번 포스팅에서는 배열이 무엇이고 어떻게 만들고 사용하는지 알아보도록 하겠습니다.

---

Javascript 배열(Arrays)이란

먼저 배열은 여러 개의 Object들을 저장해놓은 공간이라 생각할 수 있습니다. 그래서 배열은 다음과 같은 형태를 가집니다.

const arrays = [object, object, ... , object];

배열 내부에는 숫자가 들어갈수도, 문자 혹은 문자열이 들어갈 수도 있습니다. 다양한 Object가 배열 내에 삽입될 수 있으며 이렇게 여러 개의 Object들이 배열을 구성합니다.

 

배열을 생성하는 방법은 다음과 같습니다.

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

1. 배열은 array literal([, ])을 사용하여 만듭니다. 그리고 Object들의 구분은 콤마(,)를 이용합니다.

const array2 = new Array(1, 2, 3, 4, 5);

2. 배열은 new 키워드를 이용해서 만들수도 있습니다. 다만 array literal을 이용해서 생성하는 것을 추천해 드립니다.

// number array
const array3 = [1, 2, 3];

// sring array
const array4 = ['apple', 'google', 'amazone'];

// mixed array
const array5 = [1, 'apple', 3, 5, 'google'];

3. 배열속 Object는 무엇이든 상관없습니다. 숫자, 문자, 문자열, 혹은 함수와 다른 Object를 넣어서 만들 수도 있습니다.

---

배열(Arrays) 접근 방법

배열을 생성했으니 이제는 배열에 접근하는 방법을 알아보겠습니다. 접근이라는것은 값을 추가하거나 삭제, 혹은 값을 접근하거나 변경하는 방법입니다.

---

배열 값 가져오기

배열에는 번호가 있습니다. 즉, 배열에는 순서가 존재하며 처음과 마지막이 존재합니다. 그래서 연속된 숫자(0, 1, 2, ...)를 이용해서 배열에 접근할 수 있습니다.

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

console.log(array[1]); // 2

배열의 순서는 가장 앞에서부터 시작되고 시작 번호(index)는 0입니다. 그리고 배열 array의 길이(length)는 5입니다. 그래서 2번째 값을 가져오기 위해서는 index = 1인 값을 가져와야 합니다. 시작 번호가 0이기 때문입니다.

---

배열 값 변경하기

배열의 index를 알기 때문에 이제는 이 배열의 값을 다른 값으로 변경해 보도록 하겠습니다.

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

console.log(array[1]); // 2
array[1] = 10;
console.log(array[1]); // 10

배열의 값을 변경하기 위해서는 배열에 접근하여 그 값을 대입연산자를 이용해서 변경하시면 됩니다. 값은 손쉽게 변경할 수 있습니다.

---

배열 요소 추가하기

배열을 사용하다보면 값이 추가되어야 할 경우가 발생합니다. 배열 요소를 추가하는 방법은 아래와 같습니다.

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

console.log(array); // [1, 2, 3, 4, 5]
array.push(8);
console.log(array); // [1, 2, 3, 4, 5, 8]

배열의 값을 추가하기 위해서 사용하는 함수는 push()입니다. push() 함수를 사용하면 배열의 가장 마지막 자리에 추가됩니다.

 

만약 가장 처음에 추가하고 싶다면 어떻게 해야 할까요? 이 또한 쉽게 사용할 수 있는 함수가 있습니다.

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

console.log(array); // [1, 2, 3, 4, 5]
array.unshift(8);
console.log(array); // [8, 1, 2, 3, 4, 5]

바로 unshift() 함수입니다. 이 함수를 사용하면 배열의 가장 앞에 값이 추가되는 것을 알 수 있습니다.

---

배열 요소 삭제하기

배열의 요소를 추가하는 방법을 알아보았다면 이제는 삭제하는 방법을 알아보도록 하겠습니다.

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

console.log(array); // [1, 2, 3, 4, 5]
const popObj = array.pop();
console.log(array); // [1, 2, 3, 4]
console.log(popObj); // 5

배열의 가장 마지막 요소를 삭제하기 위해서는 pop() 함수를 사용합니다. 그리고 pop() 함수를 사용한 return 값은 배열에서 삭제된 값이 return 됩니다.

 

마찬가지로 가장 앞에 있는 요소를 삭제하고 싶을 땐 어떻게 해야 할까요?

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

console.log(array); // [1, 2, 3, 4, 5]
const popObj = array.shift();
console.log(array); // [2, 3, 4, 5]
console.log(popObj); // 1

네, 예상하셨겠지만 위에서 확인한 unshift()의 반대 느낌인 shift() 함수입니다. 역시 return 된 값은 삭제된 값입니다.

---

배열의 길이

배열의 길이도 알 수 있을까요? 반복문을 만들어서 배열의 길이를 알아낼 수도 있습니다. 하지만 배열에서는 사용할 수 있는 함수들과 값들이 있습니다. 그중에서도 length라는 값이 현재 배열의 길이를 의미합니다.

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

console.log(array.length); // 5

그렇다면 다른 함수들은 무엇이 있을까요?

---

배열에서 사용할 수 있는 함수들

배열의 함수들은 굉장히 종류가 많습니다. Chrome의 Inspector를 열어보시고 배열을 하나 생성한 뒤 점(.)을 찍어보시면 매우 다양한 함수들이 존재합니다.

concat(), indexOf(), find(), forEash(), push(), unshift(), pop(), shift(), sort(), slice(), splice() 등이 있습니다. 언급한 함수들은 프로그래밍을 하다 보면 자주 사용하는 함 들이기 때문에 무엇인지 직접 사용해 보면서 익히면 도움이 되실 겁니다.

---

이번 포스팅에서는 배열(Arrays)의 가장 기본적인 부분들을 알아보았습니다. 가장 기본이긴 하지만 여기서 심화는 어떻게 잘 사용하는가의 문제일 뿐입니다. 결국 기본적인 생성 방법과 사용방법, 그리고 함수를 얼마나 유용하게 다룰 수 있는가에 대한 문제입니다. 도움이 되셨으면 합니다. 이상입니다.