6.4 배열(Array)의 주요 메서드(Method)
배열에서 사용할 수 있는 메서드는 여러 가지 형태가 존재하는데 데이터 추가, 삭제, 추출, 정렬 등과 같이 그 기능별로 구분하여 사용할 수 있는 메서드가 어떤 것들이 있는지 그리고 어떻게 사용할 수 있는지 알아봅니다. 먼저 데이터 추가부터 시작합니다.
6.4.1 concat(), push(), unshift() 메서드를 이용한
데이터 추가
배열에 데이터를 추가하는데 concat(), push(),
unshift() 메서드를 이용하여 다음과 같은 형식을 사용합니다.
array.concat(x, [y , z, …]);
array.push(x, [y, z, …]);먼저 concat()메서드는 기존의 배열(array)에 x를 추가하거나, x, [y, z, …]를 추가하여 그 결과를 반환하는
메서드로 기존의 존재하던 배열을 변경하지 않습니다.
다음으로 push() 메서드는 기존의 배열(array)의
끝에 x를 추가하거나 x, [y, z, …]를 추가한 후
그 결과로 새롭게 추가된 아이템을 포함한 배열의 길이(length)를 숫자형태로 반환합니다.
마지막으로 unshift() 메서드는 기존의 배열(array)의
시작부분에 x를 추가하거나 x, [y, z, …]를 추가한
후 그 결과로 새롭게 추가된 아이템을 포함한 배열의 길이(length)를 숫자형태로 반환합니다.
예제를 통해 알아볼까요? concat() 메서드입니다. 메모장을
열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
…
<head>
<script
type="text/javascript">
var shoppinItems = new Array("페레가모 안경", "노트북", "DSLR"); //--①
var addItems = new Array("아이패드", "윈도우폰"); //--②
var
result = shoppinItems.concat(addItems); //--③
ShowItem(result); //--④
document.write("<hr>");
ShowItem(shoppinItems); //--⑤
//배열에 저장된
데이터 표시
function ShowItem(inarr) {
for(var idx=0; idx<inarr.length;
idx++)
document.write("저장되어 있는
요소값 : " + inarr[idx]+"<br />");
}
</script>
</head>
…
</html>
①에서 3개의 요소를 shoppinItems 배열 변수를 선언과 함께 초기화하고 ②에서 ①에 추가할 배열을 addItems 변수를 선언하여
초기화해주고 ③에서 concat()
메서드를 이용하여 ①에 ②을 추가하여 result
변수에 저장합니다. 그리고 result 변수와
shoppinItems
변수에 저장되어 있는 요소들을 원래의 코드를
ShowItem()
함수를 이용하여 출력하도록 합니다.
“concatEx.html”로 저장하고 IE9를 통해서 보면 다음과 같이 원래의 shoppinItems 변수에는 영향이 없습니다.
다음으로 push() 메서드를 알아보기 위해서 메모장으로 “concatEx.html”을 열어서 <script> … </script> 블록을 다음과 같이 수정합니다.
<script
type="text/javascript">
var shoppinItems = ["페레가모
안경", "노트북",
"DSLR"]; //--①
ShowItem(shoppinItems); //--②
document.write("<hr>");
document.write(shoppinItems.push("아이패드",
"윈도우폰")+"<br />"); //--③
ShowItem(shoppinItems); //--④
//배열에 저장된
데이터 표시
function ShowItem(inarr) {
…
}
①에서 3개의 요소를 갖는 shoppinItems 배열 변수를 선언하고 ②에서 선언된 shoppinItems 배열변수에 저장된 값을 표시합니다.
그 다음 ③에서 push() 메서드를 이용하여 기존의 shoppinItems 배열의 마지막에 차례대로 2개의 요소를 추가하고 ④에서 다시 shoppinItems 배열변수에 저장된 값을 표시하도록 합니다.
작성이 끝났으면 다른 이름으로 저장을 선택하여 “pushEx.html”로 저장하고 IE9를 통해 확인하면 다음과 같이 나타나게 됩니다.
마지막으로 unshift() 메서드를 알아보기
위해서 메모장으로 “pushEx.html”을 열어서 <script> …
</script> 블록에서 아래의 해당 부분을 push에서 unshift로 다음과 같이 수정합니다.
document.write(shoppinItems.unshift("아이패드", "윈도우폰")+"<br />");
//--③
이제 다른 이름으로 저장을 선택하여 “unshiftEx.html”로
저장하고 IE9를 통해 확인하면 다음과 같이 나타나게 됩니다.
배열에서 데이터 추가를 정리하면 concat() 메서드는 기존의 배열은 변경하지 않고 단순히 새로운 데이터를 기존의 배열에 연결한 형태를 나타낼 때 사용하고 push(), unshift() 메서드는 기존의 배열을 변경하는데 push() 메서드는 기존 배열의 끝에 새로운 데이터를 추가하고 unshift() 메서드는 기존 배열의 맨 앞에 새로운 데이터들을 추가하는 형태임을 알 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.4.3 slice(), splice() 메서드를 이용한 데이터 추출 (4) | 2013.08.06 |
|---|---|
| 6.4.2 pop(), shift() 메서드를 이용한 데이터 삭제 (0) | 2013.08.06 |
| 6.3 배열(Array)의 속성(Property) (2) | 2013.08.06 |
| 6.2 생성된 배열(array)에 저장된 데이터 접근 및 출력 (0) | 2013.08.06 |
| 6. 배열(Array) (0) | 2013.08.06 |
