자바스크립트 배열 array의 이해 그리고 예제

자바스크립트에는 많은 데이터 타입이 존재하며 그 중 하나로 배열(array)이 존재합니다. 배열은 자바를 비롯한 대부분의 언어가 가지는 데이터 타입으로 자바스크립트만의 특별한 자료 구조는 아닙니다. 그렇다면 배열이 사용, 선언되는 경우는 언제일까요?

# 배열이 사용되는 경우

배열을 선언하는 이유는 배열값이 한개의 값이 아닌 여러개의 데이터값을 동시에 가질 수 있기 때문입니다. 그래서 데이터의 집합을 저장하기 위한 용도로 사용하며 반대로 단일 데이터의 경우에는 문자 및 숫자 등의 타입이 사용됩니다. 이런 이유로 배열을 사용할 경우 아래와 같은 장점이 있을 것입니다.

! 배열의 데이터 타입(구조)의 장점

• 단일 데이터(Single data)가 아닌 다수의 데이터(Multiple data) 저장
• 연관있는 데이터를 함께 변수에 저장하므로 데이터를 찾는데 용이
  

위 내용까지가 배열의 이해를 돕기위한 내용이라면 아래부터는 실제로 자바스크립트에서 선언하고 사용하기 위한 방법에 대하여 알아보겠습니다.

! Array, 자바스크립트 배열의 선언

배열을 선언할 경우 리터럴 방식과 배열 객체를 사용하는 방법이 있습니다. 일반적으로 대괄호를 사용한 리터럴 방식이 선언에 간편하고 편리하므로 많이 사용됩니다. 그럼 아래 코드를 봐주세요.

이 방법은 리터럴 방식으로 배열값들을 변수 선언과 동시에 함께 선언하여 사용하는 방법입니다. 가장 일반적인 방법입니다.

이 방법은 배열 객체를 사용한 방법으로 인자로 배열의 값을 넘겨주어 선언하는 방법입니다. 참고로, 배열은 최대 4,294,967,295개의 값을 가질 수 있습니다. 이처럼 선언된 배열의 값을 반환하려면 어떻게 해야할까요? 아래는 선언된 배열의 일부의 값을 출력하기 위한 방법입니다.

배열의 값은 그 순서에 의하여 저장되며 해당하는 위치의 index 번호를 사용하여 불러올 수 있습니다. 위의 경우는 배열의 2번째에 해당하는 값인 David을 불러오며 이 값이 empName2라는 병수에 저장될 것입니다.

만약 이를 index 번호와 함께 표현하면 다음과 같습니다. 해당 위치에 해당하는 값을 가지고 있죠.

배열이 저장된 모습과 json 또는 객체 타입을 비교해보면 무엇이 다를까요? json 또는 객체는 선언될 때 이름과 값으로 구분되어 저장될 수 있지만 배열은 이름 대신 해당하는 위치, index 넘버가 저장된다는 점입니다. 물론 인덱스 넘버만으로도 검색에 유용하지만 json 데이터 타입의 경우 이름과 값으로 이루어져 검색하기가 더욱 용이할 것입니다. 하지만 단순한 값들의 나열이라면 배열 타입이 충분히 용이할 것입니다.

# Array attribute, 배열 속성 알아보기

배열 역시 객체이며 배열도 속성을 가지고 있습니다. 그렇기 때문에 이 속성은 모든 배열값에 사용될 수 있습니다. 아래는 배열 객체가 가지는 속성입니다.

# length (문자열에 사용되는 length와 동일)
배열이 가지고 있는 개수를 반환합니다. 만약 배열의 개수가 없다면 0을 반환하고 10개라면 10을 반환하게 됩니다.
위와 같이 배열의 크기를 구할 경우에 사용합니다.

# Array.prototype 사용하여 커스텀 속성, 메소드 만들기
다음은 배열의 prototype을 알아봅니다. prototype은 모든 array 객체에 속성 또는 메소드를 추가할 수 있도록 도와줍니다. 속성 및 메소드를 추가하는 경우 내장된 객체를 변경하기 때문에 주의해야합니다. 일반적으로 내장객체를 사용하여 커스텀 속성이나 메소드 생성보다는 다른 방법을 많이 사용합니다.

아래에는 배열에 사용 가능한 메소드인 함수들에 대하여 알아보겠습니다.

# 배열에 사용되는 메소드 알아보기

자바스크립트의 배열은 아래와 같은 많은 메소드, 함수를 가지고 있습니다.

# concat()
다른 배열을 합쳐서 새롭게 추가된 배열을 생성합니다. 여러 배열을 하나로 만드는데 사용할 수 있습니다.var test =
아래는 위 concat() 메소드의 출력 결과입니다.

참고로 매개변수의 수가 증가할 경우 더 많은 배열을 동시에 추가할 수 있습니다.


# forEach(item, index)를 사용하여 반복문 만들기
배열이 가진 모든 각각의 값으로 반복문을 만들 수 있도록 함수를 호출합니다. 예를들어 만약 아래와 같이 배열인 변수 toys라는 변수가 있다면 이를 각각 콘솔에 찍는 코드를 다음과 같이 작성할 수 있습니다.

실행하면 결과는 아래와 같이 나타납니다.

배열인 경우 많이 사용되는 방법으로 일반적으로 사용되는 for() {} 문 보다 더 간단하게 사용할 수 있습니다.
참고로 IE 9 이하의 경우 정상 동작하지 않을 수 있으며 그 이외에는 잘 동작합니다.


# join()
배열이 가진 모든 값을 하나의 문자로 변환하여 반환하는 방법입니다. 즉 여러 배열 값을 연결하는(join) 함수입니다. 아래의 예제를 봐주세요.

실행 결과 여러 배열이 - 구분자를 가지며 하나의 긴 문자열로 변환되었습니다.


# map()
각각의 값을 사용하여 함수를 호출해 사용할 수 있도록 새로운 배열을 생성합니다.



# pop()
이 메서드는 배열이 가진 마지막 요소값을 제거하고 그 나머지를 반환합니다. 만약 pop()을 배열 개수만큼 반복하면 모든 배열값을 제거할 수 있습니다. 배열 값을 제외하는 방법들 중에서 나름 우수한 성능을 보여줍니다.

실행 결과는 아래입니다.



# push()
배열에 새로운 값을 추가하기 위한 방법으로 맨 뒤에 추가할 수 있습니다. 반대로 unshift()의 경우 맨 앞에 추가되는 것이 차이점입니다.

아래는 결과값입니다.



# reduce()
계속해서 배열 내의 두 개의 값을 사용해 줄여나가 하나의 값을 만들어 반환합니다. 예를들어 1부터 5까지 더하는 함수를 만드는 경우 아래처럼 만들 수 있습니다.

실행하면 아래와 같이 15를 출력합니다.

자바스크립트의 reduce()는 가진 배열값을 사용하여 반복하므로 for문처럼 배열의 루프를 구현하는데도 사용됩니다. reduce()는 매우 중요한 배열 함수 중 하나로 자세히 알아둘 필요가 있습니다.


# reverse()
배열이 가진 값을 역순으로 재배치한 후 반환합니다.


# shift(), 맨 앞에 위치한 값만 삭제하기
배열의 맨 앞의 값을 제거하여 반환합니다. 맨 앞의 값을 먼저 삭제하는 경우 가장 쉽게 사용할 수 있습니다.

맨 앞에 있던 1을 반환하고 기존의 test 함수는 [2, 3]의 값을 가지게 됩니다.



# slice(start, end)
배열의 일부를 자르는데 사용합니다. 함수의 인자로 첫 번째는 자르는 시작점과 반환하는 마지막위치를 설정할 수 있습니다. 예를들어 아래와 같이 사용됩니다.



# sort()
배열값을 정렬한 후 재배치하여 반환함. 간단하게 정렬이 가능하게 해주는 정렬 메소드임


# splice()
배열값을 추가하거나 제거하여 반환하며 제거한 값을 다른 배열값으로 저장함. 첫번째 매개변수는 시작위치이고 두번째는 길이임

위 코드를 실행할 경우 test에는 'a'만 남게되며 test2에 'b', 'c'를 가진 새로운 배열이 저장됨



# toString()
배열값을 텍스트로 변환하여 반환함


# unshift()
새로운 값을 배열의 맨 앞에 추가하여 반환함. push()와 비슷하나 push()의 경우 맨 뒤에 추가한다는 점이 차이점임

# 마치면서

이처럼 배열 타입은 데이터의 구조화를 통해 연관 정보를 보다 쉽게 관리할 수 있습니다. 하지만 무조건 여러개의 값을 가진다는 이유로 배열을 선언하기 보다는 타입을 선언할 때는 데이터에 적합한 타입이 무엇인지 생각해보고 사용해야하며 자료구조에 따른 더 효과적인 타입이 무엇인지도 생각할 필요가 있을 것입니다.