배열

1. 배열

: 자바스크립트에서는 변수선언시, 별도의 자료형 지정이 없기 때문에 모든 자료형의 값들을 하나의 배열 공간에 담을 수 있다. (자바의 컬렉션과 유사)

2. 배열의 선언

: 배열 선언시 배열의 크기를 지정한 채로 선언하거나, 크기 지정 안해도 됨(크기에 제약 없음)

<button onclick="arrayTest2();">확인하기</button>
    <script>
        function arrayTest2(){
            var arr1 = new Array(); // 크기 지정하지 않은 빈 배열 
            var arr2 = new Array(3); // 크기 지정한 배열
            var arr3 = [];

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

            // 배열에 값 담기
            arr1[0] = "head";
            arr1[1] = "body";
            arr1[2] = "foot";
            arr1[10] = "neck";

            console.log(arr1);
            // 빈 값을 지정하지도 않아도 자동지정됨! 맙소사

            arr2[0] = "car";
            arr2[1] = "bus";
            arr2[2] = "motor cycle";
            arr2[3] = "air plane";

            console.log(arr2);
            // 크기를 미리 지정해놔도 자기가 알아서 늘어남! 맙소사 

            // 배열 선언과 동시에 초기화
            var arr4 = new Array("홍길동", "임꺽정");
            var arr5 = ["a", "b", "c"];
        }
    </script>

3. Array 객체의 메소드

1) 배열.indexOf(찾고자 하는 요소)

: 배열에서 요소가 위치해있는 인덱스를 찾아서 리턴

    <div class="small" id="area2"></div>
    
    <button onclick="indexOfTest();">확인하기</button>

    <script>
        function indexOfTest(){
            var arr = ["a", "b", "c", "d", "e"];
            // 배열 arr에 담긴 값 

            var alphabet = prompt("a~e 중 하나만 입력하세요.");
            // 배열 alphabet에 담긴 값 = 명령어를 통해 사용자가 입력한 값

            var index = arr.indexOf(alphabet);
            //  
            if(index != -1){
                area2.innerHTML += "당신이 찾는 alphabet은 " + index + "번째 인덱스에 있습니다.";
            } else {
                area2.innerHTML += "당신이 찾는 alphabet은 없습니다.";
            }
            
            // js에서 === 는 내용물, 자료형 다 맞냐? 물어보는것임
            console.log(1 == "1"); // true 1 과 1 이 같냐?
            console.log(1 === "1") // false 1과 "1"이 자료형도, 내용물도 같냐?
        }
    </script>

2) 배열.concat(배열, ...)

: 여러개의 배열을 결합시키고자 할 때 사용

    <div id="big" class="area3"></div>
    <button onclick="concatTest();">확인하기</button>

    <script>
        function concatTest(){
            var arr1 = ["사과", "딸기"];
            var arr2 = ["키위", "파인애플", "토마토"];

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

            area3.innerHTML += "arr1 : " + arr1 + "<br>";
            area3.innerHTML += "arr2 : " + arr2 + "<br>";

            area3.innerHTML += "arr1 : 기준으로 배열 합침" + arr1.concat(arr2) + "<br>";
            area3.innerHTML += "다시 arr1 : " + arr1 + "<br>";

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

            area3.innerHTML += "여러개의 배열 합침 : " + arr1.concat(arr2, [1, 2, 3]);

        }
    </script>

3) 배열.reverse()

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

    <div class="small" id="area4"></div>
    <button onclick="reverseTest();">확인하기</button>

    <script>
        function reverseTest(){
            var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

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

            area4.innerHTML += "arr : " + arr + "<br>";
            area4.innerHTML += "reverse결과 : " + arr.reverse() + "<br>";
            area4.innerHTML += "다시 arr : " + arr;

            //원본 배열에 영향을 미치는 메소드 
        }
    </script>

4) 배열.sort()

: 배열을 오름차순 정렬시켜주는 메소드

    <!-- 내림차순 하고싶으면 오름차순 해놓고 reverse 하셈 -->
    <div class="small" id="area5"></div>
    <button onclick="sortTest();">확인하기</button>

    <script>
        function sortTest(){
            var arr = ["전", "광" , "렬", "허", "준"];

            var arr5 = document.getElementById("area5");
            
            area5.innerHTML += "arr : " + arr + "<br>";
            area5.innerHTML += "sort 결과 : " + arr.sort() + "<br>";
            area5.innerHTML += "다시 arr : " + arr + "<br>";
            // 원본 배열에 영향을 미치는 메소드

            // 내림차순 정렬하고 싶다면 => 오름차순 정렬 후 역순으로 뒤집기
            area5.innerHTML += "내림차순정렬 : " + arr.sort().reverse();
        }
    </script>

5_1) 배열.push(추가할요소)

: 배열의 맨 뒤에 요소 추가하고 배열의 크기 반환

5_2) 배열.pop()

: 배열의 맨 뒤 요소 제거하고 제거된 요소 반환

    <div class="big" id="area6"></div>
    <button onclick="pushPopTest();">확인하기</button>
    
    <script>
        function pushPopTest(){
            var arr = ["서초", "방배", "역삼", "삼성", "대치"];

            var area6 = document.getElementById("area6");
            area6.innerHTML += "arr : " + arr + "<br>";

            arr.push("봉천");
            area6.innerHTML += "arr에 push 후 : " + arr + "<br>";
            
            area6.innerHTML += "arr에 push 결과 : " + arr.push("잠실") + "<br>";
            area6.innerHTML += "다시 arr : " + arr + "<br>";

            area6.innerHTML += "arr에 pop 결과 : " + arr.pop() + "<br>";
            area6.innerHTML += "다시 arr : " + arr + "<br>";
            // 원본 배열에 영향을 미치는 메소드

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

            area6.innerHTML += "최종 arr: " + arr;
        }
    </script>

6_1) 배열.unshift(추가할요소)

: 배열의 맨 앞에 요소 추가

6_2) 배열.shift()

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

    <div class="big" id="area7"></div>
    <button onclick = ""></button>

    <script>
        var arr = [];
    </script>

7_1) 배열.slice(시작, 끝)

: 배열안의 요소들을 단지 추출해보는 메소드

7_2) 배열.splice(시작, 제거수, [추가시킬요소])

: 배열의 요소 추출해서 제거 및 추가

    <div class="small" id="area8"></div>
    <button onclick ="sliceSpliceTest();">확인하기</button>

    <script>
        function sliceSpliceTest(){
            var arr =["자바", "오라클", "HTML", "CSS", "JavaScript"];

            var area8 = document.getElementById("area8");
            area8.innerHTML += "arr : " + arr + "<br>";

            // slice (시작인덱스, 끝인덱스)
            area8.innerHTML += "slice 결과 : " + arr.slice(2, 4) + "<br>"; // 2<= < 4
            area8.innerHTML += "다시 arr : " + arr + "<br>";
            // 원본 배열에 영향을 끼치는 메소드 아님

            // splice(시작인덱스, 제거수, [추가할 요소])
            area8.innerHTML += "splice 결과 : " + arr.splice(2, 2, "Spring") + "<br>";
            area8.innerHTML += "다시 arr : " + arr + "<br>";
            // 원본 배열에 영향을 끼치는 메소드

        }
    </script>

8) 배열.toString() / 배열.join([구분자])

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

    <div class="small" id="area9"></div>
    <button onclick = "toStringJoinTest();">확인하기</button>

    <script>
        function toStringJoinTest(){
            var arr = ["나는", "오늘부터", "다이어트를", "시작한다!"];

            var area9 = document.getElementById("area9");
            area9.innerHTML = "arr : " + arr + "<br>";
            area9.innerHTML = "arr의 toString : " + arr.toString() + "<br>";
            // 알게 모르게 객체를 html화면에 출력시 toString() 호출한 결과 출력

            area9.innerHTML += "arr의 join : " + arr.join() + "<br>";
            // 기본적인 구분자는 , 
            // join 메소드는 구분자 제시해서 문자열 연결 가능

            area9.innerHTML += "arr의 구분자 제시한 join + " + arr.join(" ");
            
        }
    </script>

함수(function)

1. 선언적 함수

[표현법]

function 함수명([매개변수, 매개변수, ...]){ 소스코드;
(return 결과값;) // 다음함수에 최종결과값 반환하겠다.
}

    <button onclick="test1();">실행확인</button>
    <div class="area" id="area1"></div>
    <script>
        function test1(){
            document.getElementById("area1").innerHTML += "test1() 함수 실행됨<br>";

        }
    </script>

2. 익명함수

[표현법]
function([매개변수, 매개변수, ...]){ 소스코드; }
: 변수나 속성에 함수를 대입할 때 주로 사용됨(주로 이벤트 핸들러 작성시 사용)

    <button id="btn1">실행확인</button>
    <div class="area" id="area2"></div>

    <script>
        var btn1 = document.getElementById("btn1"); // button요소 객체

        btn1.onclick = function(){
            // 이벤트 속성에 대입되는 function == 이벤트핸들러
            document.getElementById("area2").innerHTML += "이벤트핸들러를 통해 실행됨<br>";
        };
    </script>

3. 자동으로 스스로 실행되는 함수

[표현법]
(function(){ 소스코드; })();

    <div class="area" id="area3"></div>
    <script>
        (function(){
            document.getElementById("area3").innerHTML = "자동으로 지혼자 스스로 실행됨"
        })();
    </script>

4. 매개변수

: 매개변수 제시시 자료형 지정 x, var 제시 x => 변수명만 제시!

    <button onclick="test4('안녕하세요');">실행확인</button>
    <button onclick="test4('감사해요');">실행확인</button>
    <button onclick="test4('잘있어요');">실행확인</button>
    <button onclick="test4('다시만나요');">실행확인</button>
    <button onclick="test4(10);">실행확인2</button>
    <button onclick="test4([1,2,3]);">실행확인3</button>
    <button onclick="test4(true);">실행확인4</button>
    <button onclick="test4(prompt('이름을 입력하시오'));">실행확인5</button>
    <!-- 프롬포트 창 띄워서 물어보고 사용자가 입력한 값 출력 -->
    <button onclick="test4('안녕하세요', '감사해요');">실행확인6</button>
    <!-- 정의해둔 매개변수 갯수보다 더 많이 전달하는것 가능(문제없음) 단, 초과된 전달값은 무시됨-->
    <button onclick="test4();">실행확인7</button>
    <!-- 전달값 없이 함수호출 -> undefined 문제는 없으나, 매개변수에 초기화가 되어있지 않아 undefined -->
    <div class="area" id="area4"></div>

    <script>
        function test4(value){ // 매개변수 제시시 자료형 지정 x, var 제시 x => 변수명만!
            // value 매개변수에 담긴 값을 div에 출력
            document.getElementById("area4").innerHTML = value;
            // test4(value에 담긴 값이 ) => div요소(area4)에 출력되도록 하는 함수 만듦
            
        }
    </script>

1) 매개변수 arguments 배열객체

: 함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담김
arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열객체
즉, 매개변수를 넣었지만, 받아주는 함수에 매개변수 자체가 없으면 어떻게 되나? 그때는, 임시저장소 개념이라고 생각하자! arguments가 있어 따로 "배열"의 형태로 저장하고 있다!

    <button onclick ="test5(11, 12, 1, 5, 7)">실행확인</button>
    <div class="area" id="area5"></div>

    <script>
        function test5(){
            // 매개변수를 넣었지만, 함수에 매개변수 자체가 없다면 어떻게 될까?
            console.log(arguments);

            var sum = 0;
            for(var i=0; i<arguments.length; i++){
                sum += arguments[i];
            }

            document.getElementById("area5").innerHTML += "총합 : " + sum + "<br>";
            document.getElementById("area5").innerHTML += "평균 : " + sum/arguments.length + "<br>";
            document.getElementById("area5").innerHTML += "랜덤값 : " + ran() + "<br>";
        }
    </script>

2) 매개변수가 있는 함수에 this 관련 전달하기

: this로 자기 자신의 요소를 가리킬 수 있게 함.

    <button onclick="testFn(this);">버튼1</button>
    <button onclick="testFn(this.innerHTML);">버튼2</button>
    <!-- this로 testFn 자기 자신의 요소를 가리킬 수 있게 됨. -->
    <input type="button" value="버튼3" onclick="testFn(this.value);">
    <!-- input요소에 this로 (자기 자신을 가리킴) value 속성 불러오겠다 -->

    <script>
        function testFn(el){
            console.log(el);
        }
    </script>

5. 함수의 리턴

1) 일반적인 값 리턴

    <button>실행확인</button>
   <div class="area" id="area6"></div>

   <script>
       // 1~100 사이에 랜덤값 구해서 반환해주는 함수
       function ran(){
           return parseInt(Math.random()) * 100 + 1;
       }

       function test6(){
           document.getElementById("area6").innerHTML += "랜덤값 : " + ran() + "<br>";
       }
   </script>

2) 익명함수를 리턴하는 함수

    이름 : <input type="text" id="userName">
    <button onclick="test7()();">실행확인</button>

    <!-- test7() 함수 에 console.log까지는 출력이 되지만 이후 return 하는 함수 실행은 안됐음.  -->
    <script>
        function test7(){
            var name = document.getElementById("userName").value;

            console.log(name);

            return function(){ 
                alert(name);
            }
        }
    </script>

객체

1. 객체 선언 및 호출

: 객체는 중괄호{ }를 사용해서 생성하고, 중괄호 안에 이 객체에 필요한 속성들을 정의한다.
속성 : 속성값; 의 형태로 정의함(키:밸류) 속성값으로는 모든 자료형의 값 들어갈 수 있음

[표현법]
var 변수명 = {
속성: 속성값;
};

<객체생성 예시>
var product = {
                pName : "Mango",
                price : 4000,
                "kind":"pickle",
                ingredient: ["vitamin", "sugar"]
            };

1) 객체 속성에 접근하는 방법

1)-(1) 대괄호를 이용한 방법

:객체명["속성명"] (ex> student["name"])

1)-(2) . 을 이용한 방법

:객체명.속성명 => 속성값 반환 (ex> student.name)

2. 객체 생성 특이케이스

1) 속성명(property)이 공백이나 특수문자 포함될 경우

: 반드시 속성명을 문자열의 형태로 제시-> 속성가져오기 할 때 반드시 대괄호로 해주어야함

<예시>
    <button onclick="test2();">실행확인</button>
    <div class="small" id="area2"></div>

    <script>
        function test2(){
            // 속성명 제시시 공백이나 특수문자가 포함될 경우 반드시 속성명을 문자열의 형태로 제시
            var user = {
                "user Name" : "홍길동",
                "age!!" : 20
            };

            console.log(user);

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

            // .을 이용 => 객체명.속성명
            // area2.innerHTML += "user Name : " + user.user Name + "<br>";
            // area2.innerHTML += "age!! : " + user.age!! + "<br>"
            // 위와같은 속성명 가져오기 안됨. 그러므로 반드시 대괄호로 이용해주어야함

            area2.innerHTML += "user Name : " + user["user Name"] + "<br>";
            area2.innerHTML += "age!! : " + user["age!!"] + "<br>"
            

        }
    </script>

3. 객체에서의 반복문

: 객체가 가지고 있는 모든 속성들에 접근하고자 한다면 반복문 이용 가능
단, 단순한 for loop문으로는 사용 불가능하고 for in문만 사용가능함.
=> for in 문에 객체접근은 .이 안되고 대괄호를 통한 방법만 가능!

    <button onclick="test3();">실행확인</button>
    <div class="small" id="area3"></div>

    <script>
        function test3(){
            var arr = ["홍길동", 10, true];
            // js에서의 배열 == 자바 ArrayList

            // for(var i=0; i<arr.length; i++){ }
            for(var i in arr){ // for in 문
                console.log(arr[i]);
            }

            var game = { 
                title: "오버워치",
                price: 35000,
                lang: "kor",
                surpportOS : ["window", "IOS"],
                service : true
            };
            // js에서의 객체 == 자바에서의 HashMap

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

            for(var key in game){ // key = "title" => key ="price" ...
                // .을 통한 방법 안됨!
                // => 진짜 game 객체에 key라는 이름의 속성을 찾음
                //area3.innerHTML += key + " : " + game.key + "<br>";

                // 대괄호를 통한 방법
                area3.innerHTML += key + " : " + game[key] + "<br>";
            }

        }
    </script>