자바스크립트의 자료형 중 참조 타입에 포함되는 배열(Array)에 대한 내용입니다. 😊

📋 배열(Array)이란?

배열(Array)을 간단하게 설명하면 순서를 가진 복수의 자료들을 저장하는 구조이다. 여기서 순서를 갖는다는 의미는 각 요소마다 인덱스를 활용할 수 있다는 점이 이에 해당하고, 복수의 자료들은 말 그대로 여러 자료들을 한 번에 저장할 수 있다는 점이다.

배열을 통해 하나의 변수에 여러가지 값을 동시에 저장할 수 있게 되면서 다량의 데이터를 효과적으로 다룰 수 있고, 인덱스를 활용하여 데이터를 추가하거나 제거하는 등의 다양한 기능들을 활용할 수 있다.

이번 포스팅에선 배열의 생성과 접근 방식, 메서드와 관련된 내용 등에 대해 알아볼 것이다.

배열의 생성

배열을 생성하는 방법은 크게 두 가지가 있는데 첫 번째로 리터럴을 사용하는 방식, 두 번째로 new 를 활용한 생성 방식이 있다.

let arr1 = [] // 리터럴(문자열) 방식
let arr2 = new Array(arrayLength) // new 활용 방식

첫 번째 방식은 간단하게 대괄호를 활용하는 것으로 배열을 생성할 수 있고, 두 번째 방식은 arrayLength 에 해당하는 부분에 숫자를 대입하여 해당 숫자 만큼의 길이를 갖는 배열을 생성할 수 있다. 해당 배열의 내부 요소들은 전부 undefined 로 구성된다.

let arr3 = new Array(3) // output : (3) [undefined, undefined, undefined]

또한 두 가지 방식 모두 배열 생성과 동시에 초기화가 가능하다. 리터럴 방식의 경우 대괄호 안에 요소를 콤마를 통해 구분하여 작성하는 방법으로, new 를 활용한 방식의 경우 소괄호 안에 요소를 콤마를 통해 구분하여 작성하는 방법으로 가능하다.

let arr4 = [1, 2, "Hi"] // output : (3) [1, 2, "Hi"]
let arr5 = new Array(1, 2, "Hi") // output : (3) [1, 2, "Hi"]

그리고 위에서 확인할 수 있듯이 배열은 다양한 데이터 타입을 함께 포함하여 사용할 수 있다.

이렇게 배열을 생성한 뒤에 배열 내 요소들을 활용하거나 추가 및 제거하는 방법에 대해 알아보자

배열 요소의 추가와 삭제

배열 내 요소는 각 요소마다 인덱스(index)를 갖고 있고, 인덱스를 통해 각 요소에 접근할 수 있다. 인덱스는 0 부터 시작하며 인덱스 위치를 지정하는 방법은 배열 이름에 대괄호([])를 열어 안에 인덱스를 삽입하면 된다.

let arr = [1, 2, "Hi"]
console.log(arr[0], arr[2]) // output : 1 "Hi"

위와 같이 배열의 인덱스를 지정하거나 배열 메서드(Method)를 활용하여 배열 요소의 추가와 삭제가 가능하다.

💡 자바스크립트에서 메서드(Method)란?

메서드와 함수는 서로 유사하지만 명확히 정의하자면 다른 존재이다.

간단히 정의하면 함수가 메서드를 포함하는 용어이고, 메서드는 객체에 종속되는 함수를 의미한다.

함수의 경우에는 그 자체가 기능을 수행하지만, 메서드의 경우에는 객체에 명령을 주고 객체가 기능을 수행하는 함수라고 이해하면 될 것이다.

그렇기에, 함수 호출 방식과 메서드 호출 방식에서도 차이를 보인다.

// 임의의 함수 선언
function funcName() {
	console.log('Hello')
}
funcName() // output : 'Hello'
// Array Method : pop()
let arr = [1, 2, 3]
console.log(arr.pop()) // output : 3

위 임의의 함수 funcName 은 함수명을 통해 바로 실행이 가능하지만 배열의 pop() 메서드의 경우 배열명(arr)에 . 를 붙이고 사용한다.

여기서 pop() 메서드는 Array 객체에 종속되어 있기 때문에, Array 객체에서 호출할 수 있다.

🔖 출처

함수와 메서드 : canonmj님 벨로그 : Javascript : 함수와 메서드의 차이는? object를 파헤쳐보자!
함수와 메서드 : 지속가능한 개발 블로그 : 메소드와 함수 (Method and Function)의 차이점

배열 요소의 추가

배열 요소 추가는 다음과 같이 인덱스를 활용하여 필요한 위치에 값을 할당할 수 있다.

let arr = []

arr[0] = 1

console.log(arr) // output : (1) [1]

이때 순서대로 할당할 필요는 필요는 없고, 필요 위치에 할당을 하면 된다. 만약 배열의 길이를 초과하는 범위에 요소를 할당하면 그 사이의 요소들은 모두 undefined 로 할당된다.

// 위 예시 코드에서 이어서 작성
arr[4] = 1

console.log(arr) // output : (5) [1, undefined, undefined, undefined, 1]

그리고 메서드(method)를 통해 요소를 추가하는 것도 가능하다. 대표적인 메서드로 push() 와 unshift()가 있다.

push() 배열 맨 뒤에 요소를 추가하고, unshift() 는 배열 맨 앞에 요소를 추가하는 메서드이다. 그리고 두 메서드는 요소를 추가한 뒤 새로운 배열의 길이를 반환한다.

push() 와 unshift() 메서드는 매개변수로 추가할 요소를 작성하여 사용할 수 있다.

let arr = [1, 2, 3, 4]

let pushArr = arr.push(5)

console.log(pushArr) // output : 5
console.log(arr) // output : (5) [1, 2, 3, 4, 5]

let unshiftArr = arr.unshift(0)

console.log(unshiftArr) // output : 6
console.log(arr) // output : (5) [0, 1, 2, 3, 4, 5]

배열 요소의 제거도 이와 유사한 방법으로 이루어진다.

배열 요소의 제거

배열 요소의 제거는 기본적으로 delete 연산자를 활용하여 가능하다.

let arr = [1, 2, 3, 4]

delete arr[2]

console.log(arr) // output : (3) [1, 2, undefined, 4]

하지만 해당 방법을 활용할 경우, 위와 같이 배열 길이(length)에는 변함이 없고 기존 위치에는 undefined 가 남음을 알 수 있다.

그렇기에 완전히 배열 요소를 제거하기 위해서 다음의 pop() 과 shift() 메서드를 활용할 수 있다.

pop() 메서드는 push() 와 유사하게 배열 맨 뒤의 요소를 제거하고, shift() 메서드는 unshift() 메서드와 유사하게 배열 맨 앞의 요소를 제거한다. 해당 두 메서드는 반환 값으로 배열에서 제거된 값을 반환한다.

let arr = [1, 2, 3, 4]

let popArr = arr.pop()

console.log(popArr) // output : 4
console.log(arr) // output : (3) [1, 2, 3]
  
let shiftArr = arr.shift()

console.log(shiftArr) // output : 1
console.log(arr) // output : (2) [2, 3]

또한, 추가적으로 splice() 메서드를 활용해서 요소의 제거를 진행할 수 있는데, 동시에 추가도 함께 할 수 있다. splice() 의 문법은 다음과 같다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

해당 문법을 사용하여 추가와 제거를 동시에 진행하면 다음과 같이 할 수 있다.

let arr = [1, 2, 3, 4]

let spliceArr = arr.slice(1, 1, 'two') // 요소를 제거하고 해당 인덱스에 요소 추가

console.log(spliceArr) // output : [2]
console.log(arr) // output : [1, 'two', 3, 4]

그리고 splice() 는 요소의 추가와 제거를 분리하여 각각의 용도로 사용할 수도 있다.

// 요소 제거
let arr = [1, 2, 3, 4]

arr.slice(1, 1)

console.log(arr) // output : (3) [1, 3, 4]

// 요소 추가
arr.slice(1, 0, 2)

console.log(arr) // output : (4) [1, 2, 3, 4]

위에서 알아본 메서드를 포함하여 배열 내 데이터들을 인덱스로 접근하여 추가 및 수정이 가능하다. 이제 이러한 배열이 자료구조적으로 어떠한 의미를 갖는지 간단하게 알아보자.

배열의 특징

배열은 하나의 변수에 여러 가지의 값을 저장할 수 있는 자료형으로서, 배열 또한 객체이기 때문에 관련된 속성과 메서드가 존재한다.

대표적인 속성으로는 length 가 이에 해당하고 메서드는 위에서 언급한 메서드들이 이에 해당한다.

눈으로 보이는 배열의 가장 큰 특징은 인덱스가 존재하기에 순서가 있다는 점이고, 이를 활용하여 효과적으로 데이터를 관리할 수 있다는 점이다.

그렇다면 배열은 어떠한 자료구조를 갖고 있으며, 자바스크립트의 배열은 타 언어의 배열과는 어떠한 차이점이 존재할까? 이에 대해 간단히 알아보자.

배열과 자료구조

우선 배열의 자료구조를 설명하기에 앞서 자료구조에 대한 간단한 설명을 해아 한다.

자료구조(Data Structure)란 컴퓨터 과학에서 자료에 효율적인 접근 및 수정을 가능케 하는 자료의 조직 및 관리와 저장을 의미한다.

자료구조는 그 형태에 따라 분류가 되는데, 선형 구조(Linear)와 비선형 구조(NonLinear)가 이에 해당한다.

선형 구조는 자료를 구성하는 데이터를 순차적으로 나열시킨 형태를 의미하며 배열, 스택(Stack), 큐(Queue) 등이 이에 해당한다. 선형 구조의 경우 저장된 자료의 전후 관계가 1:1인 것이 특징이며, 요소를 순서대로 작업하는 경우 효과적으로 활용할 수 있다.

반대로 비선형 구조는 하나의 자료와 여러가지의 자료가 연결될 수 있는 형태를 의미하며 트리(Tree)와 그래프(Graph) 등이 이에 해당한다. 비선형 구조는 데이터가 1:n 관계를 갖는 것이 특징이며 자료 간의 관계를 정의할 때 효과적으로 활용할 수 있다.

위에서 언급했 듯이 배열은 선형 구조에 속하며 그렇기에 선형 구조의 특징을 이해하면서 배열의 특징을 이해하면 수월할 것이다. 이어서 배열의 특징과 자바스크립트의 배열은 어떤 차이가 있는 지에 대해서 알아보자.

🔖 출처

자료 구조 : Wikipedia : 자료 구조
Linear & NonLinear : HelloWorld : 선형구조와 비선형구조
자료 구조 : blackb0x님 벨로그 : 자바스크립트의 자료구조

자바스크립트 배열의 특징

자바스크립트에서 배열은 타 프로그래밍 언어와는 차이점을 보인다. 이에 대해 알아보기 위해 프로그래밍 언어에서의 배열 특징에 대해 우선적으로 알아보자.

일반적으로 배열(Array)이란 같은 자료형을 가진 연속된 메모리 공간으로 이루어진 자료구조라고 할 수 있다.

위 두 가지 특징은 배열의 가장 기본적인 특징이면서 자바스크립트의 배열과 구분되는 특징이기도 하다.

먼저 같은 자료형을 가진다는 부분은 자바스크립트의 경우, 배열에 다양한 자료형의 자료들을 동시에 할당할 수 있다는 점에서 차이점을 갖는다.

let arr = [1, 2, 'Hello', true]
// Number와 String, Boolean의 자료형이 동시에 할당된 모습이다.

위와 같이 자바스크립트의 배열의 경우, 타 언어의 배열과 다르게 다양한 자료형을 하나의 변수에 할당할 수 있다.

그리고 일반적인 배열이 연속된 메모리 공간을 갖는다는 부분에서, 자바스크립트의 배열은 각각의 배열 요소들이 연속적으로 이루어지지 않아도 된다.

let arr = [1, 2, 'Hello', true]

delete arr[1]

console.log(arr) // output : (4) [1, undefined, "Hello", true]

일반적으로 배열에서 배열 요소의 삭제가 이루어지면, 배열 요소를 연속적으로 유지하기 위해 요소들을 이동시켜야 하지만, 자바스크립트의 배열 요소 삭제 방법 중 하나인 delete 를 사용하면 배열 길이가 감소하지 않고 배열 요소의 공간은 그대로 유지된다는 점이 이에 해당한다.

🔖 출처

배열 : CodeDragon : 배열(Array)
배열 차이 : CodeDragon : 배열(Array), 배열 차이 (java vs javscript)

💡 자바스크립트의 배열은 배열이 아니다?

위에서 언급한 바와 같이 자바스크립트의 배열은 여타 프로그래밍 언어에서의 배열과는 차이점이 있다.

기존의 배열은 밀집 배열(dense array)로 배열 요소가 밀접하게 연속적으로 이어져서 순차적인 작업에 최적화 된 형태이다.

하지만 자바스크립트의 경우에는 희소 배열(sparse array)로 배열 요소의 각 메모리 공간의 크기가 다를 수 있고 연속적으로 이루어지지 않아도 된다는 점에서 일반적인 배열의 의미를 갖는다고 말하기에 어려울 수 있다.

자바스크립트의 배열을 배열이라고 하지 않는다면, 자바스크립트의 배열은 일반적인 배열의 특징을 갖춘 객체라고 말할 수도 있다.

쉽게 말하자면 자바스크립트의 배열에서 인덱스는 객체(Object)의 프로퍼티 키(key)에 해당하고, length 프로퍼티를 별도로 갖는 객체라는 말이다.

그렇기에 자바스크립트의 배열은 기존 배열이 인덱스를 통해 각 요소에 빠르게 접근할 수 있는 만큼 효율적이지 않지만, 배열 요소의 추가와 삭제 등과 같은 작업에서 좀 더 효율적일 수 있다는 부분이 장점이다.

추가적으로, 모던 자바스크립트 엔진에서는 배열을 여타 배열과는 구별하여 좀 더 배열처럼 동작하도록 최적화하여 구현했다는 점도 알아두자.

🔖 출처

자바스크립트의 배열 : poiemaweb : 자바스크립트 배열은 배열이 아니다

배열과 시간 복잡도(Time Complexity)

특정 배열에 하나의 요소를 추가하는 메서드는 같은 실행 시간을 가질까? 같은 갯수의 요소를 처리하는 메서드라도 그 방식에 따라 다른 효율을 보일 수 있을 것이다.

자바스크립트 배열의 메서드들이 실행 시간을 각각 얼마나 갖는 가에 대해 이해하기 앞서, 시간 복잡도(Time Complexity)와 빅 오(Big-O) 표기법에 대해 알 필요가 있다.

우선 시간 복잡도란 실행 시간의 관점에서 해당 알고리즘의 효율을 측정하는 정도라고 말할 수 있다. 그리고 빅 오 표기법은 이러한 시간 복잡도를 나타내는 표기법이다. 빅 오 표기법은 O() 의 형태로 작성하고 시간 복잡도에 따라 괄호 안에 들어가는 값이 달라진다.

위 시간 복잡도와 빅 오 표기법을 활용하여 자바스크립트 배열의 일부 메서드들이 어떤 시간 복잡도를 갖는 지에 대해 알아보자.

우선, 배열 요소의 추가 및 제거와 관련된 push() 그리고 pop() 메서드와 unshift(), shift() 메서드가 있다.

push() 와 pop() 의 경우, 배열의 맨 끝에 요소를 추가하거나 제거하는 메서드이기 때문에, 한 번의 단계만 필요하고 시간 복잡도는 O(1) 로 나타낼 수 있다.

unshift() 와 shift() 의 경우에는, 배열 맨 앞에 요소를 추가하거나 제거하는 메서드이기 때문에, 다른 요소들의 인덱스 값이 바뀌므로 O(n) 의 시간 복잡도를 갖는다.

💡 pop() 이 shift() 보다 효율적이라고?

shift() 메서드가 O(n) 의 시간 복잡도를 갖는 것에 대해 자세히 설명하면 다음과 같다.

pop() 의 경우, 맨 끝의 요소만 제거하기 때문에 다른 요소의 인덱스에 영향을 주지 않는다.

let arr = [1, 2, 3]
arr.pop()
console.log(arr) // output : (2) [1, 2]

위 예시를 보면 맨 끝의 요소인 3 은 사라지고 기존 요소인 1, 2 는 인덱스 값이 그대로 임을 알 수 있다.

let arr = [1, 2, 3]
arr.shift()
console.log(arr) // output : (2) [2, 3]

하지만, shift() 의 경우 맨 앞의 요소인 1 을 제거함과 동시에 기존 요소인 2, 3 의 인덱스 값이 1 씩 감소하는 것을 확인할 수 있다.

그렇기에 같은 갯수의 요소를 처리하지만, shift() 의 경우 모든 요소를 순환하며 인덱스 값을 변환하기 때문에 시간 복잡도에서 차이를 보이는 것이다.

이렇게 배열의 메서드들의 시간 복잡도가 어느 정도인지를 알고 이해한다면 같은 데이터를 처리함에 있어서도 효율적으로 다른 결과를 만들어 낼 수 있기에, 많은 데이터를 처리할수록 시간 복잡도에 대한 이해가 충분하다면 그것은 필히 도움이 될 것이다.

🔖 출처

배열과 시간 복잡도 : 손누누님 Tistory : [Javascript/JS] 자바스크립트에서의 배열과 시간복잡도
자바스크립트 자료형과 복잡도 : 러닝워터 개발 블로그 : 문제 31 : 자바스크립트 자료형의 복잡도

🔖 전체적인 참고

배열 : MDN Web Docs : Array
자바스크립트 Array : poiemaweb : 5.28 Array 배열