[JavaScript] 배열

1. 배열의 선언과 활용

 

아래 코드는 배열 선언 및 배열의 [ ]를 이용해 원하는 인덱스에 배열 값을 추가해주는 코드입니다.

let fruits=['사과', '배']; //배열 선언
console.log(fruits);
fruits[2]='감'; // 2번 인덱스에 '감' 추가
console.log(fruits);
fruits[4]='바나나'; // 4번 인덱스에 '바나나' 추가
console.log(fruits);
console.log(fruits[2]);
console.log(fruits[3]);

보시면 꼭 순서대로 넣지 않아도 값이 추가는 되는 것을 확인하실 수 있고, 건너 뛴 인덱스의 배열 값은 undefined가 출력되는 것을 확인하실 수 있습니다.

 

그리고 배열의 자료형은 제약을 받는지 않아 문자열, 숫자, boolean값, 함수 등 다양한 값이 들어갈 수 있습니다.

const array=['문자', 1, true, ()=>{console.log('Hi!')}, {name:"Jason", age:23}];
console.log(array);

 

JavaScript에서는 배열을 큐, 스택과 같은 자료구조로도 사용이 가능합니다.

큐, 스택에서 쓰이는 pop, push, shift, unshift 등이 가능하기 떄문인데요, 각 메서드를 살펴보면 아래와 같습니다.

 

1. push

배열 맨 뒤에 요소를 추가할 떄 많이 사용됩니다. 

 

2. pop 

배열 맨 뒤의 요소를 제거하고, 제거한 요소를 반환합니다.

 

3. shift 

배열 맨 앞의 요소를 제거하고, 제거한 요소를 반환합니다.

 

4. unshift

배열 맨 앞에 요소를 추가합니다.

 

push, pop, shift, unshift를 이용해서 간단한 예제 코드를 구현해보면 아래와 같습니다.

const array=['사과', '배'];
array.push('바나나'); //배열 맨 뒤에 바나나를 추가함
console.log(array); //[ '사과', '배', '바나나' ]
console.log(array.pop()); // 바나나
console.log(array); // [ '사과', '배' ]
array.unshift('참외');
console.log(array.shift()); // 창외
console.log(array); // [ '사과', '배' ]

 

2. 배열과 객체

배열은 객채에 포함된다고 합니다.

arr[key]=value;

배열에 접근하는 일반적인 방식을 보시면 [ ] 안의 인덱스 값이 key, = 오른쪽에 오는 값이 value가 되어 객체의 프로퍼티와 같이 작동한다는 것을 알 수 있습니다.

하지만 배열을 단순히 객체와 같이 사용하기보다는 '순서가 있는 자료의 컬렉션'이라는 개념과 사용 용도에 맞춰 사용하는 것이 바람직해 보입니다.

 

3. 배열의 성능

배열에서 push, pop은 성능이 좋은 반면, shift와 unshift는 성능이 좋지 않습니다.

push/pop 연산은 배열의 맨 뒤에서 이루어지는 연산인 반면, shift와 unshift는 배열의 맨 앞에서 이뤄지는 연산입니다.

따라서 push/pop 연산을 구현할 때에는 단순히 맨 뒤에 값을 추가해주거나 삭제하면 됩니다.

반면 shift/unshift 연산의 경우에는 0번 인덱스의 값이 1번 인덱스로, 1번 인덱스 값은 2번 인덱스로, 이런 식으로 값이 한 칸씩 뒤로 밀린 후에 맨 앞인 0번 인덱스에 값이 추가되거나 반대로 0번 인덕스 값이 삭제되면 하나씩 앞으로 자리를 채워나가면서 연산이 실행되기 때문에 속도가 느릴 수 밖에 없습니다.

push/pop 연산은 Big O로 표현한다면 O(1)이 되겠지만, shift/unshift 연산은 O(N)이 되므로 배열의 길이가 길수록 연산 간의 성능 차이가 심해질 것으로 보입니다.

이해를 돕기 위해 아래 참고 주소에서 퍼온 사진을 첨부하도록 하겠습니다.

길이가 4인 배열에서 unshift 연산 실행

길이가 4인 배열에서 pop 연산 실행

 

4. 반복문

배열에서 반복문으로 사용할 수 있는 문법들은 for문, for ... of 문, for ... in 문이 있습니다.

for ... of 문은 배열에서 사용하는 문법이고, for ... in은 객체에서 사용할 수 있는 문법으로 알려져 있는데 앞서 언급드렸듯이 배열은 객체의 일부이기 떄문에 for ... in 문의 사용이 가능합니다.

다만, 성능 상의 이슈로 인해 for ... in 문은 사용을 지양하는 것이 좋다고 합니다.

 

 

5. 다차원 배열

다음과 같이 다차원 배열도 선언 및 접근이 가능합니다.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log( matrix[1][1] ); // 5

 

 

참고 및 사진 출처

https://ko.javascript.info/array

배열