JavaScript와 친해지길 바래 🙏(7) - 객체

joyfulwave·2022년 9월 20일

JavaScript object 객체 자바스크립트

JavaScript와 친해지길 바래

목록 보기

8/11

재밌는 이벤트의 세계, JavaScript

💡 객체

📎 객체

빈 객체의 생성 : 아무런 기능이 없는 상태의 빈 객체를 생성. 이 상태를 prototype이라고 해요.
변수 : 빈 객체안에 변수를 추가
함수 : 빈 객체안에 함수들을 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 빈 객체 생성 : 프로토타입 
        let people = {};

        // 변수 추가
        people.name = "자바학생";
        people.gender = "여자";
      	
      	// 함수 추가
        people.saySomething = function(msg){
            document.write("<h1>" + msg + "</h1>");
        };
      
      	// 객체에 추가한 변수를 이용하여 출력하기
      	document.write("<h1>" + people.name + "님은 " + people.gender + "입니다.</h1>");
      
		// 객체에 추가한 함수 사용하기
      	people.saySomething("JavaScript!!!!");

    </script>
</body>
</html>

📎 객체에 함수 추가

객체에 정의된 function을 메서드라고 해요.

객체이름.함수이름 = function(파라미터){};

⚫️ 변수의 함수화

함수가 대입된 변수는 그 자신이 함수처럼 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 일반적인 함수 선언
        function myFunction(){
            document.write("<h1>Hello, JavaScript</h1>");
        }

        // JavaScript 함수와 변수가 동급이다.
        // 함수의 이름을 변수에 대입할 수 있다.
        let value = myFunction;

        // 함수가 대입된 변수는 그 자신이 함수처럼 동작한다.
        value();

        document.write("<h1>---------------------------------</h1>");

        // 함수를 변수에 대입할 수 있기 때문에, 처음부터 변수에 함수의 내용을 대입할 수 있다.
        let value2 = function(){
            document.write("<h1>Hello, JavaScript2</h1>");
        };

        value2();
    </script>
</body>
</html>

📎 메서드안에서 객체 자원 활용하기

객체 안에 포함된 메서드에서 다른 메서드를 호출하거나, 활용하고자 하는 경우에는 this 키워드를 사사용해요.

this.변수이름;
this.함수이름();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 객체 생성
        let people = {};

        // 변수 추가
        people.name = "자바학생";
        people.gender = "여자";

        people.sayName = function(){
            document.write("<h1>" + this.name + "</h1>");
        };

        people.sayGender = function(){
            document.write("<h1>" + this.gender + "</h1>");
        };
      
        people.getName  = function(){
            return this.name;
        };

        people.getGender = function(){
            return this.gender;
        };

        people.sayName();
		people.sayGender();
      
        document.write("<h1>" + people.getName() + "님은 " + people.getGender() + "입니다.</h1>");

    </script>
</body>
</html>

📎 객체의 key와 Value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // key 와 value관계
        let grades = {
            'abc' : 10,
            'def' : 6,
            'ghr' : 80
        };
        

        document.write(grades.abc + "<br>");
        document.write(grades.def + "<br>");
        document.write(grades.ghr + "<br>");
        document.write("------------------------<br>");
        document.write(grades['abc'] + "<br>");
        document.write(grades['def'] + "<br>");
        document.write(grades['ghr'] + "<br>");
    </script>
</body>
</html>

📎 객체안에 직접 변수와 함수 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let grades = {
            'list' : {'aaa' : 10, 'bbb' : 6, 'ccc' : 80},

            'show' : function(){
                document.write("<h1>Hello, World</h1>")
            }
        }; 

        grades.show();
        document.write(grades.list.aaa + "<br>");
        document.write(grades.list.bbb + "<br>");
        document.write(grades.list.ccc + "<br>");
    </script>
</body>
</html>