[JavaScript] 자바스크립트 - 배열 객체 함수 정리

안녕하세요. 이번 포스팅에서는 지난 포스팅 배열 객체를 사용하는 방법에 이어서 배열 객체에 내장된 다양한 함수에 대해서 알아보도록 하겠습니다. 

 

---

자바 스크립트 배열 객체에는 다양한 종류의 내장함수가 있습니다. 각각의 종류와 설명은 아래 표를 참조해주세요.

 

함수	설명
pop()	배열의 맨 마지막 요소를 반환 및 제거합니다
push(new data)	배열의 맨 마지막 인덱스에 새로운 데이터를 추가합니다
shift()	배열의 맨 앞에있는 요소를 반환 및 제거합니다.
unshift(new data)	배열의 맨 앞에 인덱스에 새로운 데이터를 추가합니다.
join(연결할 문자)	배열 객체의 요소들을 인자로 넘긴 문자로 연결한 새로운 데이터를 반환합니다.
reverse()	배열 객체의 데이터의 순서를 바꾼 새로운 배열을 반환합니다.
sort()	배열 객체 데이터들을 오름차순으로 정렬합니다.
slice(start Index, end Index)	인자로 넘긴 인덱스 구간만큼 잘라서 새로운 배열 객체를 만들어 반환합니다.
splice()	배열 객체의 지정한 데이터를 삭제하고 새로운 데이터를 삽입합니다.
concat()	2개의 배열객체를 하나로 합친 배열 객체를 반환합니다.

---

1. 배열 객체 함수 - pop() / push()

pop() 함수는 배열의 맨 마지막 요소를 반환 및 배열에서 제거하고 push() 함수는 배열의 맨 마지막 인덱스에 데이터를 추가합니다. 

<script>
    var arr1 = ['나무', '산', '바다'];

    arr1.pop();         // 배열객체 맨 마지막 요소인 '바다' 제거
    document.write(arr1);  // 나무, 산

    arr1.push("강");    // 배열객체 맨 마지막 인덱스에 '강' 추가        
    document.write(arr1);  // 나무, 산, 강
</script>

▼ arr1 배열 객체는 최초 ['나무', '산', '바다'] 값으로 초기화된 배열 객체입니다. arr1.pop()을 통해 arr1의 가장 마지막 요소인 '바다'를 제거하고 있습니다. 다음으로 arr1.push("강")를 통해 배열의 맨 마지막 인덱스에 "강" 데이터를 추가하고 있습니다. 

---

2. 배열 객체 함수 - shift() / unshift()

pop()과 push()는 배열의 맨 마지막 인덱스를 기준으로 작업이 이루어진다면 shift()와 unshift() 배열의 맨 앞에 인덱스를 기준으로 작업이 이루어집니다. shift() 함수는 배열의 맨 앞에 있는 요소를 제거하고 unshift() 함수는 배열의 맨 앞에 인덱스에 새로운 데이터를 추가합니다.

<script>
    var arr1 = ['나무', '산', '바다'];

    arr1.shift();          // 배열객체 맨 앞에 요소인 '나무' 제거
    document.write(arr1);  // arr1[0] = '산', arr1[1] = '바다' 

    arr1.unshift("강");    // 배열객체 맨 앞에 '강' 추가
    document.write(arr1);  // arr1[0] = '강', arr1[1] = '산' , arr1[2] = '바다'
</script>

---

3. 배열 객체 함수 - join() / reverse()

join() 함수는 인자로 넘긴 문자를 기준으로 배열의 각 요소를 연결한 새로운 데이터를 반환합니다. reverse() 함수는 배열의 데이터 순서를 바꾼 새로운 객체 배열을 반환합니다.

<script>
    var arr1 = ['나무', '산', '바다'];

    var result = arr1.join("-");
    document.write(result);       // 나무-산-바다 출력

    arr1.reverse();
    document.write(arr1);         // arr1[0] = '바다' arr1[1] = '산' arr1[2] = '나무'
</script>

---

4. 배열 객체 함수 - slice() / splice() / concat()

slice(start Index, end Index) 함수는 배열의 start Index부터 end Index 앞까지의 데이터를 잘라내 새로운 배열 객체를 반환합니다. splice() 함수는 구간으로 지정한 데이터를 잘라내고 새로운 데이터를 추가합니다.

<script>
    var arr1 = ['나무', '산', '바다'];
    var arr2 = ['여행', '맛집']

    var result = arr1.concat(arr2)
    document.write(result);        // 나무,산,바다,여행,맛집 출력

    result = arr1.slice(0,2);
    document.write(result);        // 나무, 산 출력

    arr1.splice(2,1,'여행','맛집');
    document.write(arr1);          // 나무,산,여행,맛집 출력
</script>

▼ arr1.slice(0,2)는 0번 Index부터 시작하여 1번 Index까지 데이터를 자른 새로운 배열 객체를 반환합니다. arr1.splice(2,1,'여행','맛집')은 2번 Index부터 시작하여 한 개의 데이터를 지우고 '여행'과 '맛집' 데이터를 추가합니다.