티스토리 뷰

Javascript

[Javascript] 객체

객체

객체는 데이터와 연산 작업을 담고 있는 기본적인 기능입니다. 즉 객체는 테이터 여러개를 하나로 모은 복합 데이터로 연관 배열이라고도 부릅니다.

객체

객체(object)란 변수와 함수를 그룹화한 것을 말하며, 자바스크립트에서 객체를 생성하는 방법은 객체 리터럴을 사용하는 방법과 생성자라는 함수를 사용하는 방법이 있습니다.

객체의 생성

자바스크립트의 객체는 이름과 값을 한 쌍으로 묶은 집합입니다. 이름과 값이 한 쌍을 이룬 것을 프로퍼티라고 하고, 그것의 이름을 프로퍼티 이름 또는 키(Key)라고 합니다. 값으로는 모든 데이터 타입의 데이터를 저장할 수 있으며, 함수의 참조를 값으로 가진 프로퍼티는 메서드라른 이름으로 부릅니다. 자바스크립트로 객체를 생성하는 방법은 객체 리터럴로 생성하는 방법, 생성자로 생성하는 방법, Object.crete로 생성하는 방법이 있습니다.

객체 리터럴로 생성하는 방법

jquery
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //1. 객체를 생성한 후 속성(변수)과 메서드(함수)를 축약형으로 표기하는 방법
        var book = {};
        
        book.name = "javascript";
        book.page = 760;
        book.company = "Gilbert";
        
        console.log(book.name); //javascript
        
        //2. 객체를 생성한 후 속성(변수)과 메서드(함수)를 객체 생성자로 표기하는 방법
        //객체 생성자 표기법
        var book2 = new Object();
        
        book2.name = "jquery";
        book2.page = 500;
        book2.company = "Gilbert";

        console.log(book2.name); //jquery
        
      
        //3. 속성과 메서드를 사전에 정의하여 객체 생성하하는 방법(객체 리터럴)
        var book3 = {
            name: "html",
            page: 400,
            company: "webs"
        }
        
        console.log(book3.name);
        //in 연산자로 프로터티가 있는지 확인하기
        console.log("page" in book3);   //true
        console.log("house" in book3);  //false
        
        //객체 리터럴 예제(원을 표현하는 객체)
        var circle = {
            center: {x:1.0, y: 2.0},     //원의 중점을 표현하는 객체
            radius: 2.5                  //원의 반지름
        }
        console.log(circle.center.x);  //1
        
        //객체 리터럴 예제(회원 정보를 표현하는 객체)
        var person = {
            name: "강인영",                
            age: 23,                   
            sex: "여자",
            married: false
        }
        console.log(person.name, person.age);  //강인영 23
    </script>
</head>
<body>
    
</body>
</html>

생성자로 생성하는 방법

jquery
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //생성자를 생성하는 방법
        //함수를 이용하면 여러개의 객체를 생성할 수 있습니다. 이때는 객체의 이름 대신 this 키워드를 사용합니다.     
        function book(name, page, company){
            this.name = name;
            this.page = page;
            this.company = company;
        }
        var book = new book('javascript',760,"Gilbert");
        
        console.log(book.name); //javascript
    </script>
</head>
<body>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼