[JavaScript] 배열

 

 

배열

자바스크립트에서는 변수선언시 별도의 자료형을 지정하지 않기때문에배열 역시 변수형 var,let,const로 선언자료형에 관계없이 하나의 배열에 담을 수 있다 (자바의 컬렉션과 유사)

배열 선언시 배열의 크기를 지정한 채로 선언한거나,
별도 지정없이 선언 가능 (배열 크기 제약없음-->collection의 장점)

배열 초기화시 지정한 크기를 초과한 인덱스에 값을 대입하면,
해당 인덱스에 값이 대입되는 순간 배열의 크기가 해당 인덱스(+1)의 크기만큼 증가

 <button onclick="arrayTest2();">확인하기</button>
    <div id="area2" class="area big"></div>

배열의 선언 및 값 대입

  <script>
        function arrayTest2(){
            var arr1 = new Array(); // 배열크기가 0인배열 선언 
            var arr2 = new Array(3); // 배열크기가 3인 배열
            var arr3 = []; // 배열크키가 0인 배열

 

            // 배열에 값 대입
            arr1[0] ='감'; // 대입되는 순간 배열의 크기가 0에서 1로 증가
            arr1[1] ='사과'; //배열의 크기가2           
          
            arr1[11] ='매실'; // 배열의 크기가 12이됨
              // 배열 2~10까지는 비어있는 인덱스임
            console.log(arr1);  // ['감', '사과', 비어 있음 × 9, '매실']            
         

           document.getElementById('area2').innerHTML += arr1+'<br>'; // 감,사과,,,,,,,,,,매실
           
           document.getElementById('area2').innerHTML += arr2.length+'<br>'; // 3

           // 배열에 값 대입2
            arr2[0] = '비행기';
            arr2[1] = '지하철';
            arr2[2] = '버스';
            arr2[3] = '배';  
            // 기존 배열길이의 마지막 인덱스를 초과하는 인덱스번호에 값이 대입되는 순간
            // 배열의 크기는 확장됨
            
            document.getElementById('area2').innerHTML += arr2+'<br>'; 
            // 비행기,지하철,버스,배
            document.getElementById('area2').innerHTML += arr2.length+'<br>';
            //4
            

            // 배열 선언과 동시에 초기화
            var arr4 = ['홍길동', '임꺽정'];
            var arr5 = new Array('Java', 'Oracle', 'HTML');


            document.getElementById('area2').innerHTML += arr4 +'<br>'+arr5;
            //홍길동,임꺽정
            //Java,Oracle,HTML

반복문 사용가능: for문 / for - in 문을 이용

        <button onclick="arrayTest1();">확인하기</button>
        <div class="area small" id="area1"></div>

    <script>
        function arrayTest1(){
            //배열의 선언 및 초기화
            var arr = ['홍길동', '한양', 15, true, [1,2,3]]; // 배열객체

            console.log(arr);
            console.log(arr[1]);
            console.log(arr[4][1]);
            // arr 4번 인덱스로 가서 , 해당 인덱스 배열 내의 1번 인덱스로 접근

            var area1= document.getElementById('area1');

            // for(var i=0; i<arr.length; i++){
            
            //     area1.innerHTML += arr[i] +'<br>';
            // }

            // 향상된 for문과 비슷한 친구 (for in문)
            // for(var 변수명 in 순차적으로 접근할 배열명)
            for(var i in arr){ // i는 인덱스 역할을 하는 변수
                area1.innerHTML += arr[i]+'<br>';
            }
        }

 

* Array객체의 메소드

배열.indexOf(찾고자 하는 요소)	열(String 객체)에서 해당요소가 위치한 인덱스 반환 찾는 문자열이 없으면 -1을 리턴 문자열을 찾을때 대소문자를 구분
맨앞배열1.concat(배열2, 배열3, 배열4..)	여러개의 배열을 결합하고자 할 때 사용 합쳐진 배열을 반환 원본배열 영향x 합쳐진 배열을 사용하고자 할때는 변수에 담아야함;
배열.reverse()	배열에 담긴 요소를 역순으로 바꿔주는 메소드 원본배열 영향o
배열.sort()	배열에 담긴 값들을 오름차순 정렬 메소드 sort -> 오름차순 sort 후 reverse -> 내림차순 원본배열 영향o
배열.push(추가할 요소)	배열 맨 뒤에 요소를 추가하고 크기를 반환 원본배열 영향o
배열.pop()	배열의 맨 뒤 요소를 제거하고, 제거된 요소를 반환 원본배열 영향o
배열.unshift(추가할요소)	배열의 맨 앞에 요소추가 후 배열크기 반환 원본배열 영향o
배열.shift()	배열 맨 앞 요소를 제거하고 제거요소 반환 원본배열 영향o
배열.slice(시작인덱스, 끝 인덱스)	배열안 요소 추출메소드 원본배열 영향x
배열.splice(시작인덱스, 제거수, 추가값1, 추가값2, 추가값3....)	배열요소를 추출하여 제거및 추가, 추가값 생략가능 제거시 제거값 리턴 추가시 리턴되는 값은 없음 원본배열 영향o
배열.join()  배열.join(' ')  배열.join('  ')	배열에 담긴 값들을 하나의 "문자열"로 합쳐서 반환 join은 기본적으로 ,를 통해 하나의 문자열로 합쳐짐 구분자를 제시한다면 해당 구분자로 하나의 문자열 생성

indexOf(찾고자하는 요소) 

      	  // prompt창에 치킨명을 입력은 후 , 
           // 아이디 값으로 area3을 가진 div요소에
            // 입력한 치킨이 있을 경우: 당신이 찾는 치킨 xxx은 x번째 인덱스에 있습니다
            // 입력한 치킨이 없을 경우: 당신이 찾는 치킨 xxx은 판매하지 않습니다 
            // 를 출력
        

<div id="area3" class="area small"></div>
    <button onclick="indexOfTest();">확인</button>

    <script>
        function indexOfTest(){
            var arr=['황금올리브', '뿌링클', '고추바사삭','허니콤보','후라이드'];            
            var result =  prompt('찾고자하는 치킨을 입력하세요');                       


            // 1번방법 : for-in문
            for (var i in arr){
                if(result == arr[i]){
                    document.getElementById('area3').innerHTML = 
                    '당신이 찾는 치킨'+result+'는'+i+'번째 인덱스에 있습니다 <br>'; 
                    return;               
                } else {
                    document.getElementById('area3').innerHTML = 
                    '당신이 찾는 치킨'+result + '는 존재하지 않습니다<br>';
                }
            }
            
            //2번방법 : indexOf

           var index =arr.indexOf(result);

           if(index == -1){
           		document.getElementById('area3').innerHTML = 
                  '당신이 찾는 치킨'+result + '는 존재하지 않습니다<br>';

            } else {
                  document.getElementById('area3').innerHTML = 
                 '당신이 찾는 치킨'+result+'는'+index+'번째 인덱스에 있습니다 <br>';     
            }          
        
        }

 

concat(배열, 배열,,..): 원본배열 영향x

 <div id="area4" class="area big"> </div>

    <button onclick="concatTest();">확인</button>

    <script>
        function concatTest(){
            var area4 = document.getElementById('area4');
            var arr1 = ['짬뽕', '짜장면'];
            var arr2 = ['멘보샤', '꿔바로우'];

            console.log(arr1);

           area4.innerHTML = arr1 +'<br>';
           area4.innerHTML += arr2 +'<br>';

           area4.innerHTML += 'arr1을 기준으로 합침: '+arr1.concat(arr2)+'<br>';
           area4.innerHTML += 'arr1 재출력: '+arr1+'<br>'; // 그대로임
           arr1 = arr1.concat(arr2);
           area4.innerHTML += 'arr1 재재출력: '+arr1+'<br>'; // 바뀜

           // concat메소드는 원본 배열에 영향을 미치지 않는 메소드
           // 반환값만 두 개 배열을 합쳐서 반환해줄 뿐..
           // 따라서, 두 개 배열을 합친 결과값을 재 사용하려면, 기존 배열에 반환값을 대입하여야함
           area4.innerHTML += 'arr2을 기준으로 합침: '+arr2.concat(arr1)+'<br>';
           area4.innerHTML += '여러개의 배열을 합침: '+arr2.concat(arr1, [1,2,3])+'<br>';
        }
    </script>

배열.reverse(): 원본배열 영향o

      <div id="area5" class="area small"></div>
        <button onclick="reverseTest();">확인</button>

    <script>
        function reverseTest(){
            var area5 =document.getElementById('area5');
            var arr= ['Apple', 'Banana', 'Lemon', 'Kiwi'];

            area5.innerHTML += 'arr: '+arr+'<br>';
            arr.reverse();
            // 원본배열에 영향을 끼치는 메소드
            area5.innerHTML += 'reverse 결과'+arr+'<br>';
            area5.innerHTML += 'reverse의 reverse:' +arr.reverse()+'<br>';
        }
    </script>

 

배열.sort(): 배열에 담긴 값들을 오름차순 정렬 메소드

 <div id="area6" class="area small"></div>
    <button onclick="sortTest();">확인</button>

    <script>
        function sortTest(){
            var area6 = document.getElementById('area6');
            var arr = ['김남진', '김기진','김우진','김모진'];
            area6.innerHTML += 'arr: '+arr+'<br>'; // 김남진,김기진,김우진,김모진
            area6.innerHTML += 'arr: '+arr.sort()+'<br>'; // 김기진,김남진,김모진,김우진
            area6.innerHTML += 'arr배열 재출력: '+arr+'<br>'; // 김남진,김기진,김우진,김모진
            // 원본배열에 영향을 끼침!

            area6.innerHTML += 'arr배열 내림차순출력: '+arr.reverse()+'<br>'; 
            // 김우진,김모진,김남진,김기진

        }
    </script>

 

push(추가할 요소): 배열 맨 뒤에 요소를 추가하고 추가 후 배열크기를 반환/ list의 add랑 비슷함
pop(): 배열의 맨 뒤 요소를 제거하고, 제거된 요소를 반환값

원본배열 영향 o

 <div id="area7" class="area big"></div>
    <button onclick ="pushPopTest();">확인</button>

    <script>
        function pushPopTest(){
            var area7 =document.getElementById('area7');
            var arr =['별내동', '운서동', '불광동', '장위동', '구의동'];
            area7.innerHTML += 'arr: '+arr+'<br>';
            area7.innerHTML += 'push : '+arr.push('광장동')+'<br>'; // 6
            area7.innerHTML += 'arr배열 재출력: '+arr+'<br>';
            //별내동,운서동,불광동,장위동,구의동,광장동
          
            arr.push('퇴계원읍'); // 7
            area7.innerHTML += 'arr배열 재출력: '+arr+'<br>';
            // 별내동,운서동,불광동,장위동,구의동,광장동,퇴계원읍    
            
            area7.innerHTML += 'arr에서 pop된 요소:'+arr.pop('퇴계원읍')+'<br>';
            // 퇴계원읍
            area7.innerHTML += 'arr배열 재출력: '+arr+'<br>';
            // 별내동,운서동,불광동,장위동,구의동,광장동
            arr.pop();
            area7.innerHTML += 'arr배열 재출력: '+arr+'<br>';
            별내동,운서동,불광동,장위동,구의동
        }

    </script>

unshift(추가할요소): 배열의 맨 앞에 요소추가 후 배열크기 반환
shift(): 배열 맨 앞 요소를 제거하고 제거요소 반환

 

 <div id="area8" class="area big"></div>
    <button onclick="shiftUnshiftTest();">확인</button>
    <script>
        function shiftUnshiftTest(){
            var area8 =document.getElementById('area8');
            var arr=['축구','아이스하키','스피드스케이팅'];                        
            area8.innerHTML += 'arr: '+arr+'<br>';
            area8.innerHTML += arr.unshift('야구')+'<br>';
            area8.innerHTML += 'unshift후 재출력: '+arr+'<br>';
            area8.innerHTML += 'arr에 shift : ' +arr.shift()+'<br>';
            area8.innerHTML += 'shift후 재출력: '+arr+'<br>';
        }    
    </script>

 

slice(시작인덱스, 끝 인덱스): 배열안 요소 추출메소드
splice(시작인덱스, 제거수, 추가값): 배열요소를 추출하여 제거및 추가, 추가값 생략가능

 <div id="area9" class="area big"></div>
    <button onclick="sliceSpliceTest();">확인</button>

    <script>
        function sliceSpliceTest(){
            var area9 = document.getElementById('area9');

            var arr =['나는', '오늘부터', '다이어트를','시작한다'];
            area9.innerHTML += 'arr: '+arr+'<br>';

            //slice
            area9.innerHTML += 'slice결과: '+arr.slice(2,4) +'<br>';
            // 다이어트를,시작한다
            area9.innerHTML += 'slice후 arr:' +arr+'<br>';
            // 나는,오늘부터,다이어트를,시작한다
            // slice는 원본배열에 영항을미치지 않는다

            //splice
            area9.innerHTML += "splice결과: "+arr.splice(2,1) +'<br>';
           //  다이어트를
           // 제거시 제거값  리턴
            area9.innerHTML += 'splice후 arr:' +arr+'<br>';
            // splice는 원본배열 영향미침
            // 나는,오늘부터,시작한다

            area9.innerHTML += "splice결과2: "+arr.splice(2,2,'폭식','후우', '고고싱') +'<br>';
            // 시작한다, 제거시 제거값 리턴, 추가값관련 반환되는 것은 없음
            // 3번째 파라미터부터 원하는 만큼 추가가능!
            area9.innerHTML += 'splice후 arr:' +arr+'<br>';
            //나는,오늘부터,폭식,후우


        }
    </script>

join(구분자) : 배열에 담긴 값들을 하나의 "문자열"로 합쳐서 반환

   

    <div id="area10" class="area small"></div>
    <button onclick="toStringJoinTest();">확인</button>

    <script>
        function toStringJoinTest(){
            var area10 = document.getElementById('area10');
            var arr = ['안','녕','하','세', '요']; //안,녕,하,세,요

            area10.innerHTML += 'arr : '+arr+'<br>'; // 안,녕,하,세,요
            area10.innerHTML += 'toString() : '+arr.toString()+'<br>'; // 안,녕,하,세,요
            // 배열객체를 html문서에 출력시 내부적으로 toString메소드 호출후 돌아온 결과를 출력
            // 원래라면 [Obejct object]이런식으로 나와야함

            console.log(arr);
            area10.innerHTML += 'join: '+arr.join()+'<br>'; //안,녕,하,세,요
            area10.innerHTML += 'join: '+arr.join('')+'<br>'; // 안녕하세요
            area10.innerHTML += 'join: '+arr.join(' ')+'<br>'; // 안 녕 하 세 요

            area10.innerHTML += 'join 결과의 타입: '+typeof(arr.join())+'<br>';
            //string
           
            area10.innerHTML += 'join 후 배열: '+arr+ '<br>';
            //안,녕,하,세,요

           
            // join은 기본적으로 ,를 통해 하나의 문자열로 합쳐짐
            // 구분자를 제시한다면 해당 구분자로 하나의 문자열 생성
        }
    </script>

 

 

 

 참고: 동등비교연산자 (===)

            console.log(1==1) ; // true
            console.log(1=='1') ; //true , ==(동등연산자) 자료형과 무관하게 실제값만 일치하면 true
            console.log(1==='1') ; //false , ===(일치연산자) 자료형, 값 모두 일치해야 true