인기포스트

ABOUT ME

Today
Yesterday
Total
  • 자바 스크립트의 객체(Object)
    프론트엔드/JavaScript 2020. 9. 11. 06:57

    자바 스크립트의 객체(Object)란?

    보통 자바(java)를 생각하면 객체는 클래스와 함께 짝지어 다닌다고 생각할 수 있다.

     

    하지만 자바스크립트의 클래스는 최근 도입된 개념이다.

     

    그래서 그 전에는 클래스 없이 객체를 클래스처럼 이용했다.

     

    자바 스크립트 객체는 'key'와 'value'로 이뤄진 프로퍼티(property) 그리고 메서드의 집합이다.

     

    일반적으로 한 개의 변수는 한 개의 값만 저장이 가능하다.

     

    이럴 경우 변수가 가진 데이터를 명확히 알 수 있으나 여러 면에서 불편함이 생긴다.

     

    또한 필요에 따라 변수 한개에도 여러 자료를 담아야할 경우가 생긴다.

     

    그래서 생겨난 것이 객체(Object)다.

     

    아래 예시를 보면 더 쉽게 이해할 수 있다.

     

    <body>
    <script>

        let name = "steve";  // 변수 선언
        let age = 20;  // 변수 선언
        let major = "korean";  // 변수 선언

        const student1 = { name: 'steve', age: 20, major: "korean" };
        // 객체(Object)를 생성해서 많은 자료를 하나의 변수에 넣어줬다.

    </script>
</body>

     

    객체(Object)의 구성

    자바 스크립트 객체는 크게 둘로 나눠진다.

     

    프로퍼티(property)와 메서드(method)다.

    1. 프로퍼티(property)

    <script>

        const student1 = {  // 객체 선언
        
            name: 'steve',  // 프로퍼티 'key'값은 'name', 'value'값은 'steve'
            age: 20,  // 프로퍼티 'key'값은 'age', 'value'값은 '20'
            major: "korean"  // 프로퍼티 'key'값은 'major', 'value'값은 'korean'
            
            };

    </script>

     

    'key'값과 'value'값으로 구성된 한쌍의 데이터를 말한다.

     

    객체는 다양한 값을 한꺼번에 가지기 때문에 그 값을 불러오기위해 필요한 값이 'key'다.

     

    그리고 'key'값을 통해 불러져오는 값을 'value'라고 한다.

     

    그리고 이 'key'값이 'value'값을 가지고 있다고 생각할 수 있다.

     

    하지만 실제로 'key'값은 'value'의 값을 가진 것이 아닌 외부에 있는 'value'의 주소값을 갖는다.

    2. 메서드(method)

    <script>

        const student1 = {
            name: 'steve',
            age: 20,
            major: "korean",
            study: function () { console.log("공부해요") },
            class: () => { console.log("수업을 들어요") }
            };

        student1.study();  // "공부해요" 출력
        student1.class();  // "수업을 들어요" 출력

    </script>

     

    메서드란 함수를 말한다.

     

    함수가 객체 안으로 들어올 경우 이를 메서드라고 불러준다.

     

    기능은 함수와 같다고 보면 된다.

     

    화살표 함수도 사용 가능하고, 익명함수도 사용이 가능하다.

     

    함수 사용시 함수를 단독으로도 사용가능하고, 'key'값으로 불러오는 것도 가능하다.

    객체(Object)의 생성

    객체를 생성하기 위해선 크게 두가지 방법을 이용한다.

     

    첫번째는 리터럴 표기를 통한 객체 생성이고 다른 하나는 생성자를 이용한 객체 생성이다.

    1. 리터럴 표기를 통한 객체 생성

    객체이름 = {
    프로퍼티1 이름: 프로퍼티1 값,
    프로퍼티2 이름: 프로퍼티2 값,
    프로퍼티3 이름: 프로퍼티3 값
    ......
    };

    		 
    <script>

        const property_Object = {
            property1: "value1",
            property2: "value2",
            property3: "value3"
        }

</script>

     

    리터럴 표기를 통한 객체 생성은 가장 쉬우면서도 원초적인 방법이다.

     

    클래스의 도움 같은 것 필요없이 그냥 내용을 형식에 맞게 적어주면 된다.

     

    프로퍼티 간에는 쉼표( , )를 이용해 구분해준다.

     

    'key'와 'value'간에는 ( : )를 이용해 구분해준다.

     

    객체 변수의 형식은 const 외에도 var, let도 사용이 가능하다.

    2. new 연산자를 이용한 객체 생성

    변수명 = new 생성자명();

    		 
        <script>

        function Student(name, age) {  // 객체 생성자 함수 선언
            this.name = name;
            this.age = age;
        };

        let one = new student("영수", 20);
        let two = new student("철민", 23);

    </script>

     

    java의 class를 통해 객체를 만들 때와 비슷한 방식으로 객체를 생성하는 방식이다.

     

    자바스크립트도 class개념이 도입되었으므로 자바처럼 class를 사용할 경우에는 new 연산자와 생성자(Constructor)를 불러서 위와 같은 방법으로 해줄 수 있다.

     

    하지만 자바스크립트는 예전에 class가 도입되지 않았을 때도 생성자를 통한 객체 생성을 했다.

     

    바로 new를 이용해 객체 생성자(object constructor)를 이용해서 만들었다.

     

    우선 const, var, let으로 리터럴 객체를 만들 경우 new를 이용한 객체 생성이 제한된다.

     

    아래와 같이 리터럴 객체를 만들고 생성자를 만들면 오류가 난다.

     

        <script>

        let student = {
        };

        let one = new student();  // "student is not a constructor" 오류 발생

    </script>

     

    즉 리터럴 객체를 쓸 경우 생성자를 쓸 수 없다.

     

    그래서 리터럴 객체는 전부 손으로 직접 써서 객체를 만들어줘야한다는 것이다.

     

    하지만 new를 이용해 생성자를 통해 객체를 만드는 것은 다르다.

     

        <script>

        function Student(name, age) {
            this.name = name;
            this.age = age;
        };

        let student2 = {
        };

        let one = new student("영수", 20);  // 객체 생성 성공
        let two = new student("철민", 23);  // 객체 생성 성공

        let three = new student2();  // 객체 생성 실패

    </script>

     

    new와 생성자를 이용해 객체를 만들하기 위한 절차는 다음과 같다.

     

    우선 리터럴이 아닌 객체 생성의 대상이 될 함수를 만들어준다.

     

    여기서 함수는 일반 함수 만들어주듯이 만들어준다.

     

    실제로 일반 함수와 객체 생성의 대상이 되는 함수는 형식으로도 차이가 없다.

     

    (참고로 이 때 일반 함수에 리터럴 객체처럼 a : "b"와 같이 프로퍼티를 생성하면 오류가 난다.)

     

    그리고 '변수 = new + 함수명'라는 식으로 객체를 생성하면 된다.

     

    이 과정을 설명하면 new를 붙여서 일반함수를 호출하게 되면 해당 함수의 새로운 객체가 생성되고 그것이 변수에 저장되는 것이다.

     

    그리고 이 new가 붙은 일반함수들은 이때부터 생성자라고 부른다.

     

    즉 여기서 얻을 수 있는 결론은 다음과 같다.

     

    모든 함수는 new를 통해 생성자가 될 수 있고, new를 통해 새로운 객체를 생성할 수 있다.

     

    그리고 new는 함수를 통해 객체를 생성할 때만 쓸 수 있는 연산자다.

     

    참고로 객체 생성의 대상이 되는 함수는 형식적으로는 일반함수와 같다.

     

    하지만 이를 제대로 사용해주기 위해서는 일반 함수와 달리 다르게 구성해줘야 한다.

     

    즉 객체를 만들었을 때 그 안에 정보를 담기 위해서 미리 함수 내부에 세팅을 해주게 된다.

     

    그리고 이것을 초기화라고 부른다.

     

    즉 일반 함수 안에 객체를 생성했을 때 제공할 정보들을 미리 세팅해놓는다.

     

    그리고 그 함수를 new 연산자를 이용해 호출해준다.

     

    그럼 일반 함수는 그때 생성자로서 역할을 하게 되고, 새로운 객체를 생성한다.

     

    그리고 미리 일반 함수 안에 초기화해 넣었던 자료들은 새로운 객체에도 똑같이 복사된다.

    객체의 접근

    객체를 생성하고 나서 접근할 때는 두 가지 방법이 있다.

     

    그리고 이 객체에 접근하는 방법 두가지는 구분해서 사용할 줄 알아야 한다.

    1. 객체에 접근하는 방법

    첫번째는 마침표 ( . )을 사용하는 방법이고, 두번째는 괄호 ( [ ] )를 사용하는 방법이다.

     

    예시는 다음과 같다.

     

    객체명.프로퍼티명

    객체명['프로퍼티명']

    		 
    <script>

        let student1 = {
            name: "철수",
            age: 20
        };

        function student(name, age) {
            this.name = name;
            this.age = age;
        };
        let student2 = new student("영희", 20);
        
        console.log(student1.name);  // 철수 출력
        console.log(student1["name"]);  // 철수 출력
        console.log(student2.name);  // 영희 출력
        console.log(student2['name']);  // 영희 출력

</script>

    2. 객체 접근 방법의 구분

    객체의 접근 방법은 마침표를 이용하는 법과 괄호를 이용하는 두 가지 방법이 있다.

     

    그렇다면 왜 이렇게 나눠놨을까? 바로 동작 시점에 따른 구분이다.

     

    마침표를 통한 접근은 이미 코딩 단계에서 'key'에 맞는 'value'값이 정해져서 고정됐을 때 이용한다.

     

    반면 괄호를 통한 접근은 런타임 과정에서 'value'값이 정해지기 때문에 코딩 시점에선 'value'값이 확정되지 않는다.

     

    이럴 때 괄호를 통해 객체에 접근하는 방법을 사용해야 한다.

    '프론트엔드 > JavaScript' 카테고리의 다른 글

    자바스크립트 this의 정의  (0) 2020.09.14
    자바스크립트의 전역 객체(Global object)  (0) 2020.09.14
    자바 스크립트의 클래스(class)와 객체(Object) 활용  (0) 2020.09.11
    자바와 자바스크립트 클래스와 오브젝트  (0) 2020.09.11
    자바스크립트 함수와 매개변수, 인수  (0) 2020.09.10

    관련글 관련글 더보기

Designed by Tistory.

티스토리툴바