[3일차] JavaScript의 함수와 객체

JavaScript에서의 함수는 Java와 정말 유사한 구조를 가지고 있는 것 같습니다.

다른게 있다면 변수에 함수를 넣을 수 있다. 정도인 것 같네요.

 

바로 시작하겠습니다.

 

 

함수선언

function 함수명([매개변수, 매개변수...]){
      해당함수 호출시 실행할 코드;

      [return 결과값;]
}

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

실행확인 누른 결과

 

익명함수

변수 | 속성 = function([매개변수, 매개변수...]){
            해당함수 호출시 실행할 코드;
            [return 결과값;]
        } 
        특정 변수나 속성에 대입되는 함수 제시시 주로 사용됨.
        (주로 이벤트 핸들러(이벤트 발생시 실행할 함수))

    <button id="btn">실행학인</button>
    <div id="area2" class="area"></div>
    <script>
        const btn = document.getElementById("btn"); //button요소 객체
        btn.onclick = function(){ //익명함수 => 이름이 없어서 직접 호출 불가
            // 이벤트 속성에 대입되는 function == 이벤트 핸들러

            document.getElementById("area2").innerHTML += "이벤트 핸들러를 통해 실행됨 <br>"
        }
    </script>

 

함수의 매개변수

    <button onclick="test2('안녕하세요');">실행확인</button>

    <br>

    <button onclick="test2(prompt('이름을 입력해주세요'));">실행확인</button>
    <button onclick="test2('안녕하세요', '반값습니다.');">실행확인</button>
    <button onclick="test2(10, true, '안녕');">실행확인</button>

 

 

클릭하면 색이 바뀌게 해보기

<button onclick="test4(this)">클릭</button>

    <script>
        function test4(el){
            if(el.style.background !== "red"){
                el.style.background = "red";
                el.innerHTML = "클릭됨";
            }else {
                el.style.background = "white";
                el.innerHTML = "클릭";
            }
            
        }
    </script>

 

 

함수의 리턴

<button onclick="test5()">실행</button>
    <div id="area5" class="area"></div>

    <script>
        function ran(){
            const random = parseInt(Math.random() * 100 +1);
            return random;
        }

        function test5(){
            document.querySelector("#area5").innerHTML += ("랜덤값 :" + ran() + "<br>");
        }
    </script>

 

 

 

함수를 리턴 ★ 중요

이름 : <input type="text" id="userName">
    <button onclick="test6()">실행</button>    

    <script>
        function test6(){
            const inputE1 = document.getElementById("userName");
            return function(){
                alert(inputE1.value);
            }
        }
    </script>

자바와는 완전히 다른 개념이다. 

막상 개념은 어렵지않다. 그냥 변수에 함수가 들어가는 것 뿐. 다만 실수할 확률이 크니까  잘보고 익혀둬야한다.

또 변수에 함수가 들어가는건 머리가 일단 튕겨내기 때문에 잘받아들이자!

 

---

객체

 

 

선언 및 사용

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


변수 = {
            속성명 : 속성값,
            속성명 : 속성값,
            속성명 : 속성값,
            ...        }

<button onclick="test1()">실행</button>
    <div id="area1" class="area big"></div>

    <script>
        function test1(){
            const arr = ["Dry Mango", 4000, "pickle", ["mango", "sugar"]];
            //자바스크립트의 배열 == 자바의 컬렉션(ArrayList)와 유사

            const product = {
                pName : "Dry Mango",
                price : 4000,
                kind : "pickle",
                ingredient : ["mango", "sugar"]
            };
            //자바스크립트에서의 객체 ==자바에서의 컬렉션(HashMap) 유사

            console.log(typeof product)
            const area1 = document.getElementById("area1");
            area1.innerHTML += ("product :" + product + "<br>")

            //객체의 속성에 접근하는 방법
            //방법1. 대괄호를 이용하는 방법 : 객체명["속성명"]


            area1.innerHTML += `<b> 객체명['속성명(key)']으로 접근하기</b><br>`;
            area1.innerHTML += `pName : ${product['pName']}<br>`;
            area1.innerHTML += `price : ${product['price']}<br>`;
            area1.innerHTML += `kind : ${product['kind']}<br>`;
            area1.innerHTML += `ingredient : ${product['ingredient'][0]}<br>`;


            //방법2.   .을 이용하여 접근한느 방법 : 객체명.속성명(key
            
            area1.innerHTML += `<b>객체명.속성명(key)으로 접근하기</b><br>`
            area1.innerHTML += `pName : ${product.pName} <br>`
            area1.innerHTML += `price : ${product.price} <br>`
            area1.innerHTML += `kind : ${product.kind} <br>`
            area1.innerHTML += `ingredient : ${product.ingredient} <br>`
        }
    </script>

 

 

객체의 메소드 속성

여기서는 this가 사용되었다.

자바스크립트에서 this는 아주 명확할 때 사용해야 하는데 그 이유는 자바스크립트의 this는 호출한 사람을 기준으로

this를 실행하기 때문에 상위인 document와 window. 까지 갈 수있기 때문에 조심해야한다.

또 this를 실행한 시점에서 무엇을 가르키고 있냐도 중요하기 때문도 있다.

(자바처럼 클래스별로 나눠져서 this를 사용하는게 아니기 때문에 조심)

<button onclick="test4();">실행확인</button>
    <div id="area4" class="area small"></div>

    <script>
        function test4(){
            const area4 = document.getElementById("area4");

            const name = "차은우";

            const dog = {
                name: "복실이",
                kind: "비글",
                eat : function(food){
                    area4.innerHTML += `${this.kind}종류인 ${this.name}가 ${food}를 먹습니다. <br>`
                }
            };

            dog.eat("사과");
        }
    </script>

 

 

 

객체 배열을 사용한 다량의 데이터 관리

<button onclick="test5()">실행</button>
    <div id="area5" class="area small"></div>

<script>
       
        function test5(){
           

            const StudentList =[
                {name: "문동은", java: 100, oracle: 75, html: 40},
                {name: "박연진", java: 80, oracle: 30, html: 40},
                {name: "이사라", java: 90, oracle: 75, html: 50},
                {name: "전재준", java: 55, oracle: 85, html: 70},
            ]

            //getSum : 모든 정수의 합
            //getAvg : 모든 점수의 평균

            for(let i in StudentList){
                StudentList[i].getSum  = function(){
                    return this.java + this.oracle + this.html;
                }

                StudentList[i].getAvg = function(){
                    return this.getSum() / 3;
                }
            }
            console.log(StudentList);

            // area5의 content에 이름 : xxx, 총점 : xxx, 평균 : xxx
            const area5 = document.querySelector("#area5");
            for(let i in StudentList){
                area5.innerHTML += `이름 : ${StudentList[i].name} <br>`
                area5.innerHTML += `총점 : ${StudentList[i].getSum()} <br>`
                area5.innerHTML += `평균 : ${StudentList[i].getAvg()} <br>`
            }



        }

    </script>

 

 

사실 별반 다를 게 없는 것 같다.

자바의 ArrayList = 자바스크립트의 list이다.

 

오늘은 객체에 대해 알아보았다.

우리가 익히 알고있는 개념이라 머리속으로 매칭시키면 돼서 금방금방 넘어갔다. 재밌었다.