자바스크립트 , Array 배열 . 관련 메서드

• 생성
• reverse()
• sort()
• concat()
• slice()
• join()
• shift()/unshift()
• pop()/push()

자바스크립트의 내장된 코어객체중 Array 객체를 많이 쓰게 될것이다.

배열은 데이터 저장을 하기 위해 사용되고 , 데이터를 컨트롤 하기 위해 자주 사용된다.

주요 메서드들을 살펴보되 , 반환되는것이 어떻게 되는지 주의깊게 본다면 , 추후에 체이닝을 이용하기 편할것이다.

체이닝 : 메서드들을 연결해서 나열하여 사용.

생성 / 초기화

 

1) 생성 후 초기화

let names = new Array();
        names[0] = "홍길동";
        names[1] = "김길동";
        names[2] = "이길동";
        names[3] = "오길동";
        names[4] = "우길동";

        document.write("** names =>" + names + "<br>");

2) 생성과 함께 초기화

        // => 생성과 동시에 초기화
        let days = new Array("일", "월", "화", "수", "목", "금", "토");
        document.write("** days => " + days + "<br>");

        let money = [300, 100, 200, 50];
        let total = 0;
        for (let i = 0; i < money.length; i++) {
            total += money[i];
        }
        document.write("** total => " + total + "<br>");

 

 reverse() ; 역순 정렬 →원본이 바뀜

 

    let days = new Array("일", "월", "화", "수", "목", "금", "토");
        days.reverse();
        document.write("** days => " + days + "<br>");

 

원본 배열의 역순 정렬

 

sort() : 데이터 값을 정렬→원본이 바뀜

 

    let names = new Array();
        names[0] = "홍길동";
        names[1] = "김길동";
        names[2] = "정길동";
        names[3] = "우길동";
        names[4] = "오길동";
    let money = [300, 100, 200, 50];

        names.sort();
        money.sort();
        document.write("** names => " + names + "<br>");
        document.write("** money => " + money + "<br>");

요소를 문자열로 캐스팅(아스키 코드값)하여 문자열 비교를 통해 순서를 결정

즉, 문자 오름차순 정렬됨

이를 해결하려면 sort() 메서드에 인자로 콜백함수를 사용하여 비교함수를 정의해야함.

 

sort() 메소드는 정렬된 배열을 리턴하기도 하지만 원본 배열의 요소 위치도 변경됨.

 

숫자의 정렬에는 색인의 정렬로 정할 수 있는데 , 양수값이면 뒤로 음수값이면 앞으로 가는 원리겠다.

        let numbers = [300 , 100 , 200 , 50 , 0 , 7 , 22];
        numbers.sort((a,b)=>{
            if(a>b) return 1; //인덱스 값의 1증가
            if(a<b) return -1; // 인덱스 값의 1 감소
            return 0;
        });
        document.write("** numbers sort => " + numbers + "<br>");
        document.write("<br>");
        numbers.sort((a,b)=>{
            if(a>b) return -1;
            if(a<b) return 1;
            return 0;
        });
        document.write("** numbers sort => " + numbers + "<br>");
        document.write("<br>");
        // 함수가 인자로 사용되게 된다면 -> 콜백함수라 함.

0보다 큰값을 return 하는 경우 a를 b 보다 높은 색인으로 정렬

0보다 작은값을 return 하는 경우 a를 b 보다 낮은 색인으로 정렬

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

양수값을 return 하게 되는 경우 a 를 b 보다 높은 색인으로 정렬.

즉 , 작은수부터 큰수로의 정렬함을 의미한다.

 

concat() : 배열과 배열의 결합→원본이 바뀌지 않음.

        let names = new Array();
        names[0] = "홍길동";
        names[1] = "김길동";
        names[2] = "정길동";
        names[3] = "우길동";
        names[4] = "오길동";
        
        let days = new Array("일", "월", "화", "수", "목", "금", "토");
        days.reverse();
        
        let result = names.concat(days);
        
        document.write("** names =>" + names + "<br>");
        document.write("** days => " + days + "<br>");
        document.write("** result(names.concat(days)) => " + result + "<br>");

 

concat 도 배열로 반환 함을 알 수 있다.

 

slice(startIndex, lastIndex전까지) : 원하는 데이터만 선택→원본이 바뀌지 않음.

 

문자열에 있던 slice 메서드와 같은 원리라고 할 수 있다.

        document.write("** result(names.concat(days)) => " + result + "<br>");
        result = result.slice(4,7);
        document.write("** result(names.concat(days).slice(4,7)) => " + result + "<br>");

slice 도 원하는 만큼 배열로 반환됨을 알 수 있다.

 

 

join("구분자") : 구분자를 기준으로 데이터를 합침연결→원본이 바뀌지 않음.

        document.write("** days 원본 => " + days + "<br>");
        result = days.join("-");
        document.write("** days.join(-) => " + result + "<br>");
        result = days.join('');
        document.write("** days.join('') => " + result + "<br>");
        document.write(typeof(result)+"<br>");
        document.write(result.length+"<br>");
        document.write("<br>");

구분사이사이의 인자값을 넣어서 하나의 문자열로 만들게 된다.

빈문자열을 인자값에 넣는다면, 하나의 문자열로 보이는것이 확인이 가능하다.

join은 하나의 문자열을 반환함을 확인할 수 있다.

 

shift : 배열의 첫인덱스[0] 데이터 삭제 →원본이 바뀜
unshift: 배열의 첫인덱스[0]에 새데이터를 추가 →원본이 바뀜

 

let names = new Array();
        names[0] = "홍길동";
        names[1] = "김길동";
        names[2] = "정길동";
        names[3] = "우길동";
        names[4] = "오길동";
names.sort(); // 문자정렬


// shift : 배열의 첫인덱스[0] 데이터 삭제

        result = names.shift();
        document.write("** names.shift => " + result + "<br>"); //삭제된 데이터 반환
        document.write("** names.shift 후 원본 names => " + names + "<br>");
        document.write("<br>");
        
//    unshift: 배열의 첫인덱스[0]에 새데이터를 추가
        result =names.unshift("바나나");
        document.write("** names.unshift=> " + result + "<br>"); //배열 길이를 반환
        document.write("** names.unshift 후 원본 names=> " + names + "<br>"); 
        document.write("<br>");

결과를 보면 , shift 를 하게되면 삭제된 0번째의 값이 나오는것이 확인 가능하고,

원본을 확인할 시 인덱스 0 번이 삭제된것이 확인 가능하다.

 

 

첫 원본이 수정된 상태의 4개의 이름들이 있는데,

unshift 를 통해 바나나 라는 문자열을 넣게되고, 그것을 변수로 받게된다면 ,

그 변수는 원본의 배열 길이를 반환하게된다. 추가했기에 5개의 배열의 길이가 반환이 확인가능.

추후 원본을 확인한다면 추가된 바나나를 볼 수 있다.

 

pop : 배열의 마지막 인덱스 데이터 삭제 →원본이 바뀜
push: 배열의 마지막 인덱스에 데이터 추가→ 원본이 바뀜

 

//     pop : 배열의 마지막 인덱스 데이터 삭제
        document.write("** 원본 names=> " + names + "<br>");
        result = names.pop();
        document.write("** names.pop=> " + result + "<br>"); //삭제된 데이터 반환
        document.write("** names.pop 후 원본 names=> " + names + "<br>");
        document.write("<br>");
        
//    push: 배열의 마지막 인덱스에 데이터 추가
        document.write("** 원본 names=> " + names + "<br>");
        result = names.push("바나나");
        document.write("** names.push=> " + result + "<br>"); //배열 길이를 반환
        document.write("** names.push 후 원본 names=> " + names + "<br>");
        document.write("<br>");

 

pop 은 마지막 인덱스의 데이터 삭제를 말하는데 ,

pop의 값은 shift 와 같이.삭제된 데이터를 읽는다.

추후 원본에서 삭제됨이 확인 가능.

push 는 마지막 인덱스의 추가를 말하는데,

push 의 값은 unshift 와 같이 배열의 길이를 말한다.

추후 원본에서 추가됨이 확인 가능.