[javascript] 자바스크립트 배열 다루기

자바스크립트에서 배열은 빼놓을 수 없는 데이터 유형 중 하나다. 데이터를 저장하고 관리하는 데 주로 사용되는 유형이며, 매우 중요한 데이터 구조라고 할 수 있다. 그만큼 배열의 개념과 사용방법을 숙지하는 것은 중요한 부분이며, 배열을 다루는 것을 꾸준히 학습해야 한다.
그래서 오늘은 자바스크립트에서 배열을 다루는 방법, 특징, 주의사항 등을 정리해 보려고 한다.

---

배열의 개념과 특징

자바스크립트 배열은 데이터 요소를 순서대로 저장하는 자료구조로, 여러 가지 데이터 유형을 포함할 수 있고, 각 요소는 0부터 시작하는 인덱스로 접근되며, 길이는 요소의 수에 의해 결정된다. 특히 다양한 환경에서 반복 작업을 통해 데이터 조작하는 데에 아주 유용하게 사용된다.


배열의 선언
배열은 대괄호 []를 사용하여 선언한다.

인덱싱
배열의 각 요소는 0부터 시작하는 인덱스를 가지고 있으며, 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1에 위치하는 방식이다. 요소에 접근할 때에는 인덱스를 사용하게 된다.

다양한 데이터 유형
배열은 숫자, 문자열, 객체, 다른 배열 등 다양한 데이터 유형의 요소를 포함할 수 있다.

다차원 배열
배열 안의 다른 배열을 포함하여 다차원 배열을 만들 수 있는데, 이는 행렬 또는 다차원 데이터를 표현하는 데 사용된다.

내장 함수
배열은 다양한 내장 함수를 제공하여 요소를 추가, 제거, 변경하거나 배열을 조작할 수 있다. 자주 사용되는 함수로는 push(), pop(), shift(), unshift(), splice(), slice() 등이 있다.

반복
배열의 요소를 반복하고 각 요소에 접근하기 위해 for, forEach()와 같은 반복문을 사용하여 각 요소를 조작할 수 있다.

가변성
배열은 생성된 후에도 요소를 추가, 제거, 변경할 수 있으며, 이로써 데이터의 동적인 처리가 가능하다.


위와 같은 다양한 특징들을 통해서 배열을 활용하면 데이터를 구조화하고 조작하는 데 매우 유용하다. 기본적으로 제공되는 내장 함수가 매우 다양한 것이 큰 특징 중 하나라고 생각한다.

---

배열 선언

자바스크립트에서 배열을 선언하는 방법은 여러 가지가 있다. 방법에 따라서 차이점이 있으며, 환경에 따라서 어떤 방식으로 사용할지 고려하는 것이 좋다. 하나씩 살펴보자.

리터럴 표기법

const array = [];

리터럴 표기법은 배열을 선언하는 가장 일반적이고 간단한 방법이다. 선언의 특징은 대괄호 []를 사용하며, 배열의 요소를 나열할 때 직접 값을 지정해야 하는 특징이 있다.

- 대괄호 [] 선언
- 가장 일반적이고 간단한 방법
- 배열의 요소를 나열할 때 직접 값을 지정

new Array()

const array = new Array();

위의 방법은 객체를 사용한 배열 선언 방식이다. new 키워드와 함께 Array 객체의 새 인스턴스를 생성하며, 배열의 크기를 지정할 수 있다.
그리고 주로 동적으로 배열의 크기를 설정할 때 사용된다.

- new 키워드를 사용하여 Array 객체의 새 인스턴스를 생성
- 배열의 크기 지정
- 동적으로 배열의 크기를 설정할 때 사용


Array.of()

const array = Array.of();

위의 방식은 Array 객체를 사용하는 일반적인 방식에서 조금 다르게 사용하는 방법이다. of() 함수를 통해서 인수를 전달하고, 전달받은 인수를 통해 새 배열을 생성한다. 배열을 생성하는 데 더 명시적이고 간결한 방법이다.

- Array 객체의 정적 메서드로, 전달된 인수를 가지고 새 배열을 생성
- 배열을 생성하는데 더 명시적이고 간결하게 처리


위와 같이 세 가지 방식의 차이점을 비교하고 상황에 맞게 배열을 선언하여 사용할 수 있다.

---

배열 인덱스 (값 다루기)

배열의 인덱스는 각 요소에 대한 고유한 위치를 식별하는 데 사용된다. 배열은 일련의 요소로 구성되어 있으며, 각 요소는 순서대로 번호가 매겨진 인덱스를 가지고 있다. 이러한 인덱스는 0부터 시작하여 배열의 길이보다 하나 작은 값까지 연속적으로 증가한다.

// 배열 초기화 및 초기값 세팅
var arr = ['a', 'b', 'c', 'd', 'e'];
// 배열 인덱스로 값 찾기
console.log(arr[0]);
console.log(arr[2]);

위의 코드는 배열에 초기값을 세팅하고 인덱스에 맞는 값을 조회하는 예제 코드다.  인덱스로 위치를 찾을 때 주의할 점은 배열의 수보다 큰 인덱스 값을 넣게 되면 값이 없기 때문에 undefined로 나오게 된다. 

위의 예제에서
 - arr의 최대 수 : 5 (1 ~ 5)
 - max 인덱스 : 4 (0 ~ 4)
 배열의 값은 인덱스로 찾기 때문에 0부터 시작하며, arr[5]를 찾게 되면 undefined가 나오게 된다.


배열의 인덱스를 사용하여 요소를 읽고 쓸 수 있으며, 요소를 추가하거나 제거할 수도 있다. 인덱스를 사용하여 배열을 조작하는 것은 배열의 요소에 빠르게 액세스하고 변경할 수 있는 강력한 도구다.

---

배열 값 다루기 (for문 활용)

배열을 다루는 방법 중 하나는 for문을 활용하는 것이다. 이를 통해 배열의 각 요소를 반복하고 각 요소에 대해 원하는 작업을 처리할 수 있다.

// 배열 초기화 및 초기값 세팅
var arr = ['a', 'b', 'c', 'd', 'e'];

// for문을 활용한 배열 값 찾기
const arrLength = arr.length;
for (let i = 0; i < arrLength; i++) {
    console.log(arr[i]);
}

위의 코드는 for문을 활용하여 배열을 다루는 예제 코드다. 위에서 인덱스 다루는 방법을 위와 같이 for문을 활용한다면 순회하면서 인덱스에 맞는 요소를 손쉽게 다룰 수 있다.

여기서 for문을 사용하다보면 보통은 

for (let i = 0; i < arr.length; i++) { }

위와 같은 방식을 많이 사용하게 되는데, 개인적으로는 위의 예제처럼

const arrLength = arr.length;
for (let i = 0; i < arrLength; i++) { }

arr.length를 상단에 먼저 선언하고 난 후 for문에 해당 length값을 설정하여 사용한다. 배열 내의 데이터 수가 적으면 크게 상관없지만 데이터가 많은 경우나 로직이 복잡하고 for문을 많이 사용하는 경우 등 로직의 복잡도에 따라 영향도가 생길 수 있다. 위의 방식 차이로는 for문을 돌 때마다 arr.length를 계속 호출하는지, 아니면 처음에만 한번 선언하고 for문을 순회하는지 차이가 있다. 

코딩 스타일은 개인의 차가 있지만 코딩도 결국에 습관이기 때문에 이런 부분 하나씩 잡아가는 것도 실력을 키우는 것이라고 생각한다.

---

배열 다양한 자료형 값 넣기

// 배열 초기화 및 초기값 세팅
var arr = ['abc', 123, true, '안녕', function () { console.log(1) }];

자바스크립트에서의 배열은 한가지 자료형으로만 넣어주지 않아도 다. 위의 예제와 같이 다양한 자료형을 섞어서 넣을 수도 있다. 하지만 위처럼 정해진 제약 없이 다양한 자료형을 넣게 되면 실제 적용하는 로직에서 체크해야 하는 부분이 많아질 수 있다. 위와 같은 케이스는 상황에 따라 사용하면 좋을 것 같다.

 

 

반응형

---

첫 번째 요소 값 추가 (unshift)

배열의 unshift 함수는 배열의 맨 앞에 하나 이상의 요소를 추가하는 기능이다. 새로운 요소가 추가되면 기존 요소들은 인덱스가 하나씩 증가하게 된다.

// 배열 초기화 및 초기값 세팅
var arr = ['a', 'b', 'c', 'd', 'e'];
// 배열 맨앞 값 추가하기
arr.unshift('f');

console.log(arr);

배열에서 특정 값을 배열 맨 앞에 추가하고자 할 때. unshift()를 사용하면 된다. 위의 예제처럼 arr.unshift('f')를 하게 되면 배열의 맨 앞에 'f'값이 추가된다.

위의 결과 화면과 같이 'f'가 0번째 요소로 추가된 것을 확인할 수 있다.

unshift 함수는 배열에 요소를 추가하는 데 주로 사용되며, 특히 배열의 시작 부분에 요소를 추가할 때 유용하다.

---

첫 번째 요소 값 제거 (shift)

shift 함수는 unshift와 반대로 배열의 첫 번째 요소를 제거하는 기능이다. 배열의 길이가 줄어들고, 나머지 요소들은 인덱스가 하나씩 앞으로 이동한다.

// 배열 초기화 및 초기값 세팅
var arr = ['a', 'b', 'c', 'd', 'e'];
// 배열 값 제거하기
var arrShift = arr.shift();

console.log(arr);
console.log('shift : ' + arrShift);

위의 예시와 같이 shift 함수를 사용하면 배열의 첫 번째 요소인 'a'가 제거되고 반환된다. unshift와 반대로 배열에서 맨 앞의 값을 제거하고자 할 때에는 shift()을 사용하면 된다. shift()의 특징은 배열의 가장 맨 앞의 값을 제거하고 제거한 값을 반환해 준다.

shift 함수는 배열의 첫 번째 요소를 제거하는 데 주로 사용되며, unshift 함수와 적절히 응용해서 사용하면 좋다.

---

배열의 마지막 요소 추가 (push)

push 함수는 배열의 마지막 요소 추가하는 기능이다. 

// 배열 초기화 및 초기값 세팅
var arr = ['a', 'b', 'c', 'd', 'e'];
// 배열 값 추가하기
arr.push('f');

console.log(arr);

위의 코드는 push 함수를 사용하여 배열의 마지막에 값을 추가하는 예제 코드다.
배열의 마지막에 특정 값을 추가해야 하는 경우에는 push()를 사용하면 된다. 위의 예제처럼 push 함수를 사용하여 'f' 값을 추가하였고, 마지막 요소로 값이 추가가 된다. 

push 함수는 배열의 끝에 요소를 추가하는 데 사용되며, unshift와 반대로 요소를 맨 끝에 추가를 하는 차이점이 있다. 상황에 따라 배열의 맨 앞에 요소를 추가할지, 맨 뒤에 추가할지 적절히 활용하면 된다.

---

배열의 마지막 요소 제거 (pop)

pop 함수는 배열에서 마지막 요소를 제거하고 그 요소를 반환하는 기능이다. 이 함수는 배열의 길이를 수정한다.

// 배열 초기화 및 초기값 세팅
var arr = ['a', 'b', 'c', 'd', 'e'];
// 배열 값 제거하기
var arrPop = arr.pop();

console.log(arr);
console.log('pop : ' + arrPop);

위의 코드는 pop 함수를 사용해서 배열의 마지막 요소를 제거하는 예제 코드다.
push와 반대로 배열의 마지막에 특정 값을 제거하고자 할 때에는 pop()을 사용하면 된다. pop 함수의 특징은 배열의 가장 마지막 값을 제거하고 제거한 값을 반환해 준다.

pop 함수는 기존 배열을 직접 변경하며, 제거된 요소를 포함한 배열을 반환하지 않는다. 

---

마무리

오늘은 이렇게 자바스크립트 배열 다루는 방법에 대해 간단한 내용만 정리해 봤다. 배열은 쉬운 것 같으면서도 어려울 때가 있는 것 같다.
내용의 중간에 for문 활용하는 방법을 간략하게 정리한 바와 같이 단순하게 배열을 다루는 for문 문법이었지만 단순한 차이 하나로 로직의 성능이 바뀔 수 있다는 부분도 정리할 수 있었다.

자바스크립트뿐만 아닌 다른 언어, 프로그래밍에서는 배열은 매우 중요한 개념이다. 자바스크립트를 통해서 배열의 개념을 익히고 학습한다면 다양한 언어에서도 큰 어려움 없이 활용할 수 있다. 

다음에도 배열을 활용하여 다룰 수 있는 함수들에 대해서 정리해봐야겠다.