Javascript Array Object – 응용

지난 포스트에 Javascript Array 객체에 대한 기본 적인 사항을 살펴보았습니다.

이번에는 배열 객체를 핸들링 할 수 있도록 다양한 기본 Method를 제공하고 있는데요.

간단한 예제와 함께 알아보도록 하겠습니다.

 

1. concat()

두개 이상의 배열을 합칠때 사용합니다.

아래는 배열 3개(arr1,arr2,arr3)를 concat Method를 이용하여 하나의 배열로 합치는 예제입니다.

실행 결과는 아래와 같이 출력됩니다.

 

2. join([separator])

문자열에 배열의 모든  Element들을 합치고, 결과로 그 문자열을 반환합니다.

각 Element들은 명시된 Separator(분리자)에 의하여 분리가 되고, 파라미터 값이 없을때의 기본 분리자는 [,] 입니다.

예제는 배열을 다양한 구분자를 통하여 문자열화 시키는 예제입니다.

실행  결과는 아래와 같이 출력됩니다.

 

3. pop()

javascript 배열은 기본적으로 스택에서 사용하는 Method명과 동일한 Method명을 사용합니다. (pop(), push())

pop Method는 배열의 마지막 index에 있는 Element를 제외한 나머지 배열을 반환합니다.

아래 예제에서는 마지막 index의 Element인 “Mango”가 제외된 배열이 반환되고, 반환된 배열을 join() Method를 통하여 배열을 출력하는 예제입니다.

실행결과는 아래와 같습니다.

 

4. push()

pop() Method가 배열의 마지막 index의 Element를 제외시키는 Method라면, push는 이와 반대되는 Method입니다.

배열의 마지막 Index Element에 Object를 할당시키죠.

아래 예제는 fruits 배열에 “Kiwi”문자열을 할당하하고 배열을 출력하는 예제입니다.

실행결과는 아래와 같습니다.

 

5. reverse()

reverse() Method는 배열 Element의 순서를 바꾸는 기능을 수행합니다.

Method 실행과정에서 새로운 Array는 생성하지 않고 해당 기능을 수행합니다.

아래 예제를 보시면 바로 이해가 되실겁니다.

실행 결과를 보면 원래 배열의 역순으로 배열이 정렬이 된 것을 볼 수 있습니다.

 

6. shift()

shift() Method는 배열의 맨 처음 index(0번째 index)의 Element를 삭제하여 삭제한 배열을 반환하는 기능을 수행합니다.

실행 결과는 fruits 배열의 맨 처음 Element인 “Banana”가 사라진것을 확인 할 수 있습니다.

 

7. unshift([item1[, item2 [, . . . [, itemN]]]])

shift() Method가 배열의 맨 처음 Element를 삭제 한다면 “un”이 붙었으니 정 반대의 기능을 하겠죠?

맞습니다. 사용자가 지정한 배열을 기존 배열 맨 앞 Element 앞으로 배열을 추가하는 기능을 수행합니다.

예제를 보면 금방 이해가 가실 거에요.

결과는 fruits 배열에 새로 지정된 Element가 추가 되겠지요?

하지만 unshift() Method는 Internet Explorer 8 이하버젼에서 Element는 추가가 되지만 반환되는 객체가 “undefined”가 반환되니 사용할때 브라우져 호환성도 체크를 해야합니다.

 

8. slice(start,[end])

slice Method는 배열의 지정된 부분을 포함하는 배열을 반환합니다.

slice Method는 end로 표시된 Element 앞까지만 복사하고 해당 배열의 Element는 포함하지 않습니다.

두개의 값을 인자로 지정할 수 있는데요. 

start는 필수 요소로 배열에 지정된 부분의 시작을 나타내는 index를, end는 선택 사항으로 배열에 지정된 부분의 끝을 나타내는 index를 지정할 수 있습니다.

end 파라미터를 지정하지 배열의 길이가 자동으로 지정되어 배열의 끝 Element 까지 반환하게 됩니다.

slice Method는 약간 다른 예제로 확인해 보겠습니다.

결과는 아래와 같이 부분 배열을 반환 받습니다.

 

9. splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

splice Method는 start 위치에서 지정된 수만큼 Element를 제거하고 사용자가 지정한 새 Element를 삽입하여 배열를 수정합니다. 

삭제된 요소는 새 배열 개체로 반환됩니다.

splice() Method는 3개의 인수를 지정할 수 있는데요.

start는 필수 요소로서 배열에서  제거할 위치이며 0부터 시작하는 위치입니다.

deleteCount 역시 필수 요소로서 제거할 Element의 수입니다.

item1, item2,. . ., itemN 선택 사항으로서, 삭제된 Element 대신 배열에 삽입할 Element입니다.

예제는 아래와 같습니다.

splice() Method의 반환은 삭제된 요소이며 결과는 대상이 된 Object에 반영이 됩니다.

결과는 아래와 같겠내요.

 

10. sort(sortFunction)

사실 이 Method를 찾다가 Javascript 배열 객체에 대하여 정리를 시작하게 되었죠..ㅎㅎ

sort()  Method는 말그대로 배열의 정렬을 위한 Method입니다.

sort() Method는 특이하게 인자값을 정렬을 위한 Javascript Function으로 받게 되는데요. 선택 사항으로, 요소 순서를 결정하는 데 사용되는 함수의 이름입니다. 

인수를 생략하면 요소가 오름차순, ASCII 문자 순서로 정렬됩니다.

sort 메서드는 Array 개체를 제자리에 정렬하지만 실행 중에 새로운 Array 개체를 만들지는 않습니다.

아래 예제를 보면 이해가 빠르실 것 같내요.

sortFunction 인수에 CompareForSort Function를 지정하면 다음 값 중 하나가 반환됩니다.

  • 처음 전달된 인수가 두 번째 인수보다 작을 경우 음수 값
  • 두 인수가 같을 경우 0
  • 처음 전달된 인수가 두 번째 인수보다 클 경우 양수 값

이를 sort Method에 전달이 되면 이 인자를 기준으로 배열을 정렬합니다.

또, 임의의 sortFunction을 지정하지 않았을 경우에는 ASCII Character 순으로 배열이 정렬이 됩니다.

결과는 다음과 같습니다.

 

이것으로 Javascript 배열에 대한 설명이 끝이 났습니다.

강좌 같은 형태로 처음 블로그 포스팅을 하는것도 있겠지만, Front 웹 공부를 하며 정리를 하고 있는거라, 부족한 부분이 많을 거라 생각이 됩니다.

수정해야할 사항이나, 궁금한 사항있으시면 댓글로 남겨주시고, 많은 도움 되셨으면 좋겠습니다!

그럼 이상 Javascript 배열에 대한 응용 설명을 마치겠습니다.

You may also like...