JavaScript - 8. 객체

✔ 자바스크립트의 객체에 대해 정리합니다.

 

 

객체에 대해서

 :) 기본 자료형(숫자, 문자열, 불린)은 값 하나를 담을 수 있지만, 객체는 여러 다양한 자료형을 

    담을 수 있는 자료형이다. 이러한 자료형을 참조형이라고 한다. 참조형에는 기본 자료형을

    제외한 것(함수, 객체, 배열, 정규표현식등)들이 해당된다.  

 

 

 1. 객체란  

   : 객체는 중괄호({})안에 속성들을 담아서 표현하는 자료형이다. 

     객체는 데이터를 의미하는 속성(property)과 이 데이터를 참조하고

     실행해주는 메서드(method)로 구성된다.

 

     객체를 생성하는 방법은 여러가지 있다. 

 

      1) Oject 생성자 함수

        : Oject 생성자 함수를 호출하여 객체를 생성할 수 있다.

 

      2) 객체 리터럴

        : 중괄호를 사용하여 객체를 생성할 수 있다.

 

      3)  생성자 함수 

        : 객체를 생성할 때 일반적으로 객체 리터럴 방식으로 생성한다. 객체 리터럴을 

          사용해서 객체를 생성하는 것은 속성 값만 다른 여러개의 객체를 생성할 때

          쓸데없이 동일한 속성(프로퍼티 key)을 갖는 객체를 매번 작성해야한다. 

          이 생성자 함수 방식은 이렇게 동일한 속성을 갖는 객체의 형태를 탬플릿(= 클래스)

          처럼 만들어서 여러개의 동일한 객체를 생성할 수 있다. 

 

      여기서는 일반적으로 쓰는 객체 리터럴 방식을 사용해서 객체를 생성하고

      사용하는 방법에 대해서 정리한다.

 

 

   1) 객체 생성하기

      : 변수를 만들고 이 변수에 중괄호({})를 담게 되면 빈 객체가 생성된다. 

 

let createObj = {};

   

    2) 객체 속성 

      2-1) 속성(property)

            : 객체가 담고 있는 다양한 정보를 말하며, key: value의 형태로 작성한다.

 

 

 let createObj = {
   // 속성(property) 
   name: 'lee',
   gender: 'man'
};

     위 예제에 name, gender 를 객체의 이름(key)이라고 부르고 'lee', 'man' 을

     값(value)이라고 부른다. 즉, 속성에는 key: value의 관계로 이루어져 있다.

     key는 간단히 속성명이라고 부르기도 한다. 

 

     key는 문자열만 올 수 있으며, 위와 같이 따옴표가 없어도 된다. 하지만 key에

     띄워쓰기가 들어간 경우는 반드시 따옴표를 붙여줘야한다. 

 

   

      2-2) 메서드(method)

           : 객체의 속성중 함수의 기능을 하는 것을 메서드라 한다. 이 메서드는

            객체의 속성을 참조하여 객체에 대한 동작을 수행한다.        

            

 

let createObj = {
   // 속성(property)
   name: 'lee',
   gender: 'man',
   print: function() {
    console.log(this.name + '님의 성별은' + this.gender + '입니다.')
   }
 };
 
 //출력
 createObj.print() //lee님의 성별은man입니다.

 

 

    객체 메서드 안에서의 this는 메서드가 속해 있는 객체를 참조한다.  즉, 객체의

    메서드가 호출될 때, this는 메서드를 호출한 대상을 가리킨다.

    (간단하게 정리하자면 .속성 앞에 있는 대상이 this라고 보면 된다.)

 

     

3) 객체 속성 사용하기 1

        3-1)  객체 속성 접근하기(1)

              :  객체의 속성을 사용하려면 "객체명.속성명"의 형태로 쓰는 방법과

                 "객체명['속성명']"의 형태(이 방법은 속성명을 따옴표로 붙여서 쓸

                 때 사용)로 쓰는 방법이 있다. 

 

let createObj = {
   // 속성(property) 
   name: 'lee',
   gender: 'man'
 };
 
 //출력
 console.log(createObj.name); 
 console.log(createObj.gender); 

 

        3-2) 객체 속성 접근하기(2) - for in 문 

             : for in 문을 사용하여 객체 속성에 접근할 수 있다. 

            

let createObj = {
   // 속성(property)
   name: 'lee',
   gender: 'man'
 };
 
for(let i in createObj) {
  console.log(i + ': ' + createObj[i])
};

        

      3-3) 객체 속성 접근하기(3) - Object객체 속성

            :  객체의 속성을 접근하는 방법이 또 하나 있다.  Object객체의 속성을 

              사용하는 방법이다.

 

            - Object.keys(객체명)

                : 객체의 key 를 담은 새로운 배열을 반환해준다.

 

            - Object.values(객체명)

                : 객체의 value 를 담은 새로운 배열을 반환해준다. 

 

            - Object.entries(객체명)

               : 객체의 key, value를 담은 새로운 배열을 반환해준다.

 

 

let createObj = {
   // 속성(property)
   name: 'lee',
   gender: 'man'
 };
 
 console.log(Object.keys(createObj));
 console.log(Object.values(createObj));
 console.log(Object.entries(createObj));

 

 

 4) 객체 속성 사용하기 2

   4-1)프로퍼티 동적 생성

        : 새로운 속성을 추가할 수 있다. 

 

let createObj = {
   // 속성(property)
   name: 'lee',
   gender: 'man'
 };
// 프로퍼티 동적 추가
 createObj.id = '234avc';
 console.log(createObj) //Object {name: 'lee', gender: 'man', id: '234avc'} 

 

 

   4-2) 프로퍼티 삭제

       : delete 연산자를 사용하면 객체가 소유하고 있던 프로퍼티를 

        삭제할 수 있다.

 

let createObj = {
   // 속성(property)
   name: 'lee',
   gender: 'man'
 };
 
 // 프로퍼티 동적 추가 
 createObj.id = '234avc';
 console.log(createObj); //Object {name: 'lee', gender: 'man', id: '234avc'}
 
 // 프로퍼티 삭제
 delete createObj.gender;
 console.log(createObj) //Object {name: "lee", id: "234avc"}

 

 

   4-3) 프로퍼티 값 수정

        : 이미 존재하는 프로퍼티 key에 다른 값을 담으면

          프로퍼티 값을 수정할 수 있다. 

 

let createObj = {
   // 속성(property)
   name: 'lee',
   gender: 'man'
 };
 
 // 프로퍼티 동적 추가 
 createObj.id = '234avc';
 console.log(createObj); //Object {name: 'lee', gender: 'man', id: '234avc'}
 
 // 프로퍼티 삭제
 delete createObj.gender;
 console.log(createObj) //Object {name: "lee", id: "234avc"}
 
 // 프로퍼티 값 수정
 createObj.name = 'kim';
 console.log(createObj); //Object {name: "kim", id: "234avc"}

 

  

 

 지금까지 객체를 생성하고 객체 속성(property)을 사용하는 방법에 

 대해서 정리해보았다. 

 

 

 

 

 

---

 

 정리하면서 참고한 사이트

1. poiemaweb

웹 프로그래밍 튜토리얼 | PoiemaWeb

2. 제로초블러그

(JavaScript) 객체(Object)와 배열(Array)