JavaScript(배열)

JavaScript 배열
자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에
어떤 자료형의 값이 오던 한 배열에 담을 수 있다. (Java의 컬렉션과 유사)

---

배열의 선언(1)

형 변수이름 = [값, "값", false, [123], 50];

이런식으로 어떤 자료형의 값이 오던 한 배열에 담아서 저장할 수 있다.

 <button onclick="arrayTest();">확인</button> <br><br>
    <div id="area1" class="area small"></div>

    <script>
        function arrayTest(){

            var arr = ["안녕",'바보',50,false,[123]];

            console.log(arr);
            console.log(arr[0]);
            console.log(arr[3]);

            var div1 = document.getElementById("area1");

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

            //배열의 0번인덱스에서부터 마지막인덱스까지 순차적으로 모두 접근할 목적일때
            //사용하는 반복문 = for in문
            //for(var i in arr){ //i=0 -> i=1 -> i=마지막인덱스 수 

            for(var i in arr){
                div1.innerHTML+=arr[i]+"<br>";
            }
        }
    </script>

---

배열의 선언(2)

배열선언 시 배열의 크기를 지정한 채로 선언하거나, 크기를 지정하지 않아도 된다.

var arr1 = new Array(); // 배열의 크기가 0인 빈 배열

var arr2 = new Array(2); // 배열의 크기가 2인 배열

var arr3 = []; // 배열의 크기가 0인 빈 배열

<script>
        function arrayTest2(){
            var arr1 = new Array(); //배열의 크기가 0인 빈 배열
            var arr2 = new Array(2); //배열 크기가 2인 빈 배열
            var arr3 = []; //배열의 크기가 0인 빈 배열

            console.log(arr1);
            console.log(arr2);
            console.log(arr3);

            //배열에 값 대입
            arr1[0]="날씨";
            arr1[1]="흐림";
            arr1[2]="살짝 쌀쌀";
            arr1[10]="눈이온다";

            console.log(arr1); //배열의 크기가 11로 늘어나있다 (3~9까지는 비어있음 empty)
            
            arr2[2]=50;
            arr2[3]=10;

            console.log(arr2); //크기가 2에서 4로 자동으로 늘어남 

            //선언과 동시에 초기화
            var arr4=new Array("원하는값","안원하는값");

            console.log(arr4);

            //선언과 동시에 초기화(간편)
            var arr5=["저녁메뉴","뭐먹지","시켜먹자"];
            
            console.log(arr5);
        }
    </script>

---

배열의 활용(1)

Array 객체의 메소드

• indexOf(찾고자하는요소) : 배열에서 해당요소가 위치해있는 인덱스를 반환해준다.
• indexOf()의 값이 -1이 출력될경우에 배열에 해당요소가 존재하지 않는것이다.

<script>
        function indexofTest(){
            var area2=document.getElementById("area2");

            var arr = ["다이어트","피자","엽기닭볶음탕","족발","식단"];
            var dinner=prompt("오늘 저녁 메뉴를 입력하세요");

            var index = arr.indexOf(dinner); //-1은 해당 배열에 없는 요소를 찾고자 했을때
            //j)해당하는 요소가 몇번째 요소에 있는지 찾아주는 함수 (디너에 입력한것이 몇번째 있니)

            console.log(index);

            //있을경우 : 당신이 입력한 메뉴는 x번째 인덱스에 있습니다
            //없을경우 : 당신이 입력한 메뉴는 없습니다

            area2.innerHTML+="당신이 선택한 메뉴는 "+dinner;
            if(index==-1){ //메뉴가 배열에 없을때
                area2.innerHTML+="는(은) 메뉴에 없습니다.<br>"
            }else{ //있을때
                area2.innerHTML+="는 "+index+"번째 있습니다.<br>";
            }
        }
            console.log(1==1); //당연히 true
            console.log(1=="1"); //true => 동등연산자 : 자료형과 무관하게 실제 값만 일치하면 true
            console.log(1==="1"); //false => 동일연산자 : 자료형과 값이 일치해야 true
    </script>

 

---

배열의 활용(2)

Concat()

• concat(배열, 배열, . . . ) : 여러개의 배열을 결합하고자 할 때 사용
• n개의 배열을 합쳐서 새로운 배열을 반환해준다.

<script>
        function concatTest(){
            var area3 = document.getElementById("area3");

            var hobby=["게임","자전거","축구보기","산책","영화보기"];
            var hobby2=["노래듣기","카페가기","잠자기","등산"];

            area3.innerHTML+="hobby1 :"+hobby +"<br>";
            area3.innerHTML+="hobby2 :"+hobby2 +"<br>";

            area3.innerHTML +="hobby1 기준으로 배열 합침 :"+hobby.concat(hobby2)+"<br>";
            area3.innerHTML +="다시 hobby1 :"+hobby+"<br>";
            //원본 배열에 영향을 끼치지 않는 메소드
            //두개의 배열을 합쳐서 새로운 배열을 반환한다.

            area3.innerHTML +="hobby2 기준으로 배열 합침 : "+hobby2.concat(hobby)+"<br>";

            //배열 여러개 합치기
            area3.innerHTML+="배열 여러개 합치기 :"+hobby.concat(hobby2,["멍때리기","클라이밍","보드타기"])+"<br>";
        }
    </script>

---

배열의 활용(3)

reverse()

• 배열에 담긴 값들을 역순으로 바꿔주는 메소드

sort()

• 배열 안에 담긴 값들을 오름차순으로 정렬시켜주는 메소드

push(추가할 요소)

• 배열 맨 뒤에 요소를 추가하고 배열의 크기를 반환한다.

unshift(추가할 요소)

• 배열의 맨 앞에 요소 추가 후 배열의 크기를 반환한다.

shift()

• 배열의 맨 앞 요소를 제거하고 제거된 요소 반환

slice(시작, 끝)

• 배열안의 요소들을 추출하는 메소드

splice(시작, 제거수, 추가값)

• 배열의 요소를 추출해서 제거 및 추가, 추가값은 생략가능

pop()

• 배열의 맨 뒤 요소를 제거하고 제거된 요소를 반환한다.

join([구분자])  /  toString()

• 배열에 담긴 값들을 하나의 문자열로 합쳐서 반환해주는 메소드

 

reverse() 실습

<h4>3)reverse() : 배열에 담긴 값들을 역순으로 바꿔주는 메소드</h4>
    <div id="area4" class="area small"></div>
    <button onclick="reverseTest();">역순확인</button>

    <script>
        function reverseTest(){
            var area4 = document.getElementById("area4");

            var doThing=["게임","등산","찜질방","공부","캠핑","잠자기","드라이브","에버랜드"];

            area4.innerHTML+="arr: "+doThing+"<br>";
            area4.innerHTML+="reverse arr "+doThing.reverse() +"<br>";
            area4.innerHTML+="다시 arr: "+doThing+"<br>";
            //원본 배열에 영향을 끼치는 메소드
        }
    </script>

sort() 실습

 <h4>3) sort() : 배열 안에 담긴 값들을 오름차순으로 정렬시켜주는 메소드</h4>
    <div id="area5" class="area small"></div>
    <button onclick="sortTest();">정렬 확인</button>

    <script>
        function sortTest(){

            var area5 = document.getElementById("area5");

            var bestFood=["고바우설렁탕","할머니불고기","어탕국수","고치돈","스테이크","춘천닭갈비","매운족발"];

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

push() pop() 실습

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

    <script>
        function pushPopTest(){

            var area6=document.getElementById("area6");

            var greatPlace=["장가계","아침고요수목원","우도","브루클린브릿지","퀸스타운","발리","안나푸르나","기장"]
        
            area6.innerHTML+="arr : " +greatPlace+"<br>";
            greatPlace.push("함덕해수욕장");

            area6.innerHTML +="arr에 추가 후 "+greatPlace+" "+greatPlace.length+"<br>";
            area6.innerHTML +="arr에 추가 후 배열의 크기 "+greatPlace.push("GOP")+"<br>";
            area6.innerHTML +="다시 arr : "+greatPlace+"<br>";

            area6.innerHTML +="arr에 pop 후 : "+greatPlace.pop()+"<br>";
            area6.innerHTML +="다시 arr : "+greatPlace+"<br>";
        }
    </script>

unshift(추가할요소) / shift() 실습

 <div id="area7" class="area big"></div>
    <button onclick="shiftUnshiftTest();">확인하기</button>
    <script>
        function shiftUnshiftTest(){

            var area7=document.querySelector("#area7")

            var arr=["솔의눈","데자와","민트초코우유","실론티","2%","버디언","지코"];

            area7.innerHTML += "arr : "+arr +"<br>";
            arr.unshift("아침햇살");
            area7.innerHTML += "arr에 unshift 후 "+arr+"<br>";
            area7.innerHTML += "arr에 unshift 후 배열의 크기 : "+arr.unshift("닥터페퍼")+"<br>";

            area7.innerHTML += "arr에 shift : "+arr.shift()+"<br>";
            area7.innerHTML += "arr 최종 : "+arr+"<br>";
        }
    </script>

slice(시작, 끝) / splice(시작, 제거수, 추가값) 실습

<div id="area8" class="area small"></div>
    <button onclick="sliceSpliceTest();">클릭</button>

    <script>
        function sliceSpliceTest(){

            var area8=document.getElementById("area8");

            var arr = ["마라탕","굴","가지무침","닭발","곱창","홍어","오이","낙지","매생이죽"];

            area8.innerHTML+="arr : "+arr+"<br>";

            //slice(시작인덱스,끝인덱스) -> 끝 인덱스는 포함 X
            area8.innerHTML+="slice 결과 : "+arr.slice(2,4)+"<br>";
            area8.innerHTML+="최종 arr : "+arr+"<br>";
            //원본배열에 영향을 끼치지 않음

            //splice(시작인덱스,제거수,추가값(요소))
            area8.innerHTML+="splice 결과 : "+arr.splice(3,3,"회","생간","생강")+"<br>";
            area8.innerHTML+="최종 arr : "+arr+"<br>";
            //원본 배열에 영향을 끼친다.
        }
    </script>

join([구분자]) / toString() 실습

<div id="area9" class="area small"></div>
    <button onclick="joinTostringTest();">클릭</button>

    <script>
        function joinTostringTest(){
            let area9=document.querySelector("#area9");

            let arr=["오늘은","월요일","주말이","너무","짧아요..."];

            area9.innerHTML+="arr : "+arr+"<br>";
            area9.innerHTML+="tostring : "+arr.toString()+"<br>";
            /*배열객체를 html 요소에 출력할 경우 내부적으로 toString메소드가 호출되어 결과앖이 나온다.*/

            area9.innerHTML+="join : "+arr.join()+"<br>";
            area9.innerHTML+="join[구분자] :"+arr.join(" ")+"<br>";
        }
    </script>