[Javascript] 배열

자바스크립트에서 자료형 지정을 해주지 않기 때문에 모든 자료형을 보관하는 변수의 모음을 배열로 취급한다.

 

1. 배열 생성하는 4가지 방법

• 배열 선언시 배열의 크기를 지정하지 않아도 배열이 생성된다.
• 값을 바로 넣어서 배열을 생성할 수도 있다.

var arr1 = new Array();
var arr2 = new Array(5);
var arr3 = [];
var arr4 = ['유재석', 20, true, [1,2,3,4]];

arr2 배열은 크기가 5인데 만약 6개의 값을 넣는다면 넣을 수 있을까?

자바에서는 절대 안되지만 자바스크립트의 배열에서는 가능하다. 이런 점은 자바에서 arraylist와 비슷한 것 같다.

 

 

2. 배열 객체의 메소드

배열 객체의 메소드는 굉장히 많지만 몇 개만 다뤄보도록 하자. 오늘 연습문제를 풀때 indexOf를 깜빡해서 index를 찾는 함수를 또 만들어서 문제를 풀었는데 다시는 그런 바보짓을 하지 않도록 잘 기억해두자!ㅠㅠㅠ

 

1) indexOf("값") : 매개변수로 넣어준 값이 배열에서 존재하는 인덱스를 리턴

var arr = ['사과','딸기','바나나','복숭아','키위','파인애풀']

var str = prompt("찾는 과일의 이름을 입력하세요");
area3.innerHTML += "당신이 찾는 과일 " + str + "은(는) "+ arr.indexOf(str)+"번째 인덱스에 있습니다.<br>"

 

2) concat() : 두 개의 배열을 결합할 때 사용한다.

원본 배열에는 영향을 끼치지 않는 메소드로 합친 배열을 반환해주니 변수에 담아주자

var arr1 = ['사과','딸기','바나나']
var arr2 = ['복숭아','키위','파인애풀']
var arr3 = ['오렌지','자몽']

var arr = arr1.concat(arr2)
var sumArr = arr1.concat(arr2, arr3)

arr1.concat(arr2, arr3) 여러 개 합쳐줄 수도 있다! 순서는 나열된 순서로 합쳐진다.

 

3) join() : 배열을 결합해서 문자열로 반환한다.

매개변수로 넣어주는 값을 기준으로 배열의 요소들을 구분해준다.

var arr = ['사과','딸기','바나나']

var arrJoin = arr.join();

console.log(arr);      //(3) ["사과", "딸기", "바나나"]
console.log(arrJoin);  //사과,딸기,바나나

• arr.join();        //사과,딸기,바나나
• arr.join("^");    //사과^딸기^바나나

4) reverse() : 배열의 순서를 뒤집는다.

원본 배열에 영향을 미치는 메소드이다.

var arr = [1,2,3,4,5]

var arrJoin = arr.join();

console.log(arr);     	     // [1,2,3,4,5]
console.log(arr.reverse());  // [5,4,3,2,1]
console.log(arr);            // [5,4,3,2,1]

 

5) sort() : 배열의 오름차순 혹은 내림차순정렬을 할때 사용한다. 

원본 배열에 영향을 미치는 메소드이다.
compareFunction이 제공되지 않으면 요소를 문자열로 변환하고 유니코드 순서로 문자열을 비교하여 정렬된다. 따라서 숫자를 정렬하고자 하는경우 원하는 대로 정렬이 되지 않을 수 있다.

• arr.sort( [compareFunction] )
  • 이 함수는 2개의 배열 요소를 파라미터로 입력받는다. 이 함수가 a,b 2개의 요소를 파라미터로 입력받는 경우,
    이 함수가 리턴하는 값 < 0 일 경우, a가 b보다 앞에 오도록 정렬하고,
    이 함수가 리턴하는 값 > 0 일 경우, b가 a보다 앞에 오도록 정렬한다.
    만약 0을 리턴한다면, a와 b의 순서는 변경하지 않는다. 

var arr = [10, 543, 450, 450, 123, 855, 80, 9]

            //오름차순 정렬
            //원본배열에 영향을 미치는 메소드이다.
            //오름차순(작 -> 큰) a-b 양수이면 위치 변동
            //arr.sort() -> 이상하게 나옴 mdf확인 => 기본 정렬 순서는 문자열의 유니코드 포인트를 따르기 때문에 원하는 값이 나오지 않는다.
            //그래서 sort 메소드의 매개변수로 함수를 넣어준다.
            //arr.sort([compareFunction])
            area7.innerHTML += "arr.sort()의 값 : " + arr.sort(function(left,right){
                                                                    console.log('------------오름차순 정렬------------')
                                                                    console.log('arrays : ',arr)
                                                                    console.log('left : ',left)
                                                                    console.log('right : ',right)
                                                                    
                                                                    console.log('left - right', left - right)
                                                                    return left - right;
                                                                }) + "<br>"     
            area7.innerHTML += "arr 정렬 후의 값: " + arr + "<br>"


            //내림차순 정렬
            //원본배열에 영향을 미치는 메소드이다.
            //오름차순(큰 -> 작) b-a 양수이면 위치 변동
            //arr.sort() -> 이상하게 나옴 mdn확인
           area7.innerHTML += "arr.sort()내림차순의 값:" + arr.sort(function(left,right){
                                                                    console.log('------------내림차순 정렬------------')
                                                                    console.log('arrays : ',arr)
                                                                    console.log('left : ',left)
                                                                    console.log('right : ',right)
                                                                    
                                                                    console.log('right-left', right-left)
                                                                    return right-left;
                                                                }) + "<br>"           
            area7.innerHTML += "arr 정렬 후의 값: " + arr + "<br>"

• 따라서 숫자를 정렬하고자 하는 경우에 sort메소드에 비교함수를 매개변수로 전달해주면 원하는 대로 정렬이 가능하다.
• 숫자를 비교하기 위해서 비교함수인 compare함수는 a에서 b를 뺄 수 있고 이 함수는 오름차순으로 정렬한다.

function compareNumbers(a, b) {
  return a - b;
}

좀더 자세히 알아보기 위해서 console에 일일히 다 찍어보았다. 오름차순, 내림차순 정렬 모두 left와 right는 같게 나오는데 오름차순은 left-right 이고 내림차순은 right-left이다. 

따라서 오름차순에서 left: 543(a), right: 10(b)일 때 뺀 값이 533, 양수이므로 right: 10(b)을 앞에 오도록 정렬한다.

그리고 내림차순에서 left: 543(a), right: 10(b)일때 뺀 값이 -533, 음수이므로 left: 543(a)을 앞에 오도록 정렬한다.

 

6) push() : 배열의 맨 뒤에 요소추가  /  pop() : 배열의 맨뒤에 요소를 제거하여 리턴

원본배열에 영향을 미치는 메소드이다.

배열변수명.push(추가할 요소값) : 배열의 맨끝에 추가된다.

배열변수명.pop() : 배열의 맨 뒤 요소 제거

var arr = ['사과','딸기','바나나','복숭아','키위','파인애풀']
arr.push('토마토');
arr.push('망고');

console.log(arr)    // ['사과','딸기','바나나','복숭아','키위','파인애풀','토마토','망고']

arr.pop()
arr.pop()
arr.pop()
arr.pop()

console.log(arr)    // ['사과','딸기','바나나','복숭아']

 

7) shift() : 배열의 맨 앞 요소 제거  /  unshift() : 배열의 맨 앞에 요소 추가

원본배열에 영향을 미치는 메소드이다.

var arr = ['사과','딸기','바나나','복숭아','키위','파인애풀']

arr.shift()
console.log(arr)   // ['딸기','바나나','복숭아','키위','파인애풀'] 

arr.unshift('망고')
console.log(arr)   // ['망고','딸기','바나나','복숭아','키위','파인애풀']

 

8) slice() : 배열의 요소를 선택해서 잘라내기  /  splice() : 배열의 index 위치의 요소 제거 및 추가

slice()는 원본배열에 영향을 미치지 않지만 splice()는 원본 배열에 영향을 미친다.

    <div id="area10" class="area"></div>
    <button onclick="methodTest8();">확인하기</button>
        
        function methodTest8(){
            var area10 = document.getElementById("area10");

            var arr = ['사과','딸기','바나나','복숭아','키위','파인애풀']


            area10.innerHTML += "arr 기본값 : " + arr + "<br>"

            //slice(시작인덱스, 종료인덱스) : 원본 배열에 영향을 미치지 않는다.
            area10.innerHTML += "arr.slice(2,4) : " + arr.slice(2,4) + "<br>"
            area10.innerHTML += "arr : " + arr + "<br>"

            //splice(index, 제거수, [추가값]) : 원본 배열에 영향을 미친다.
            area10.innerHTML += "arr.splice(2,2,'망고') : " + arr.splice(2,2,'망고') + "<br>"
            area10.innerHTML += "arr : " + arr + "<br>"

        }

//결과
arr 기본값 : 사과,딸기,바나나,복숭아,키위,파인애풀
arr.slice(2,4) : 바나나,복숭아
arr : 사과,딸기,바나나,복숭아,키위,파인애풀    -> 원본 배열 변경 없음
arr.splice(2,2,'망고') : 바나나,복숭아        -> 바나나,복숭아 삭제 & '망고'추가
arr : 사과,딸기,망고,키위,파인애풀             -> 원본 배열 변경됨

 

9) toString() : 배열을 문자열로 반환한다.

Array객체는 Object 객체의 toString메서드를 재정의(Override) 한다.

 toString 메서드는 배열을 합쳐(join) 쉼표로 구분된 각 배열 요소를 포함하는 문자열 하나를 반환한다.

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); // 'Jan,Feb,Mar,Apr'을 myVar에 할당.

 

 

참고 및 출처:

1. sort : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

2. MDN 사이트