객체

객체(object)
: 관련된 데이터와 함수의 집합

객체에 소속된 데이터를 속성(property), 객체에 소속된 함수를 메소드(method)라고 한다.

 

 

간단하게 설명하면 객체는

서로 연관된 함수와 변수 및 데이터들을 정리정돈하기 위해 한데 묶은 수납상자 같은 것

 

 

객체 기본 구조 (출처 mdn)

var objectName = {
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
};

 

이전까지 작성했던 코드 중

document.querySelector('body')

에서 document는 객체, querySelector은 document객체에 속한 함수, 즉 메소드였다.

 

 

 

 

객체의 쓰기와 읽기

 

배열은 순서대로 데이터가 저장되지만, 객체는 그냥 연관된 데이터를 순서없이 저장하고 꺼낼 수 있게 한다.

<script>

        // 객체를 만들 때 쓰는 기호는 중괄호로, 이를 object literal이라 한다.
        // literal : 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법. 배열의 literal은 대괄호.          var 오전일과 = {
            "아침운동": "헬스", 
            "아점": "돈까스"
        };
        // key : value 쌍으로 이루어짐. 아침운동이라는 key의 value로 헬스를, 아점 key의 value로 돈까스를 저장함.       

        // 객체에서 데이터 꺼낼 때
        document.write("아침운동 : " + 오전일과.아침운동 + "<br>");
        // ()안의 . 을 object access operator ? 라고 부름..
        document.write("아점 : " + 오전일과.아점 + "<br>");


        // 객체에 데이터 추가할 때
        오전일과.산책 = "with 감자랑 지현이";
        document.write("<p>" + "산책 : " + 오전일과.산책 + "</p>");


        // 객체에 들어가는 데이터 이름에 띄어쓰기가 필요할 때
        오전일과["이제 없는데"] = "오후에 투썸갔음";
        document.write("<p>" + "이제 없는데 : " + 오전일과["이제 없는데"] + "</p>")

</script>

 

 

이 블로그도 참고함 → 객체 리터럴

[Javascript] 객체 리터럴(object literal)

 

 

 

 

객체와 반복문

 

 

 

 

 

객체 속성과 메소드

 

<script>

        // 오전일과 객체에서 All라는 함수(메소드) 정의
        // this : All 메소드에 딸린 객체 오전일과 자신을 가리킴
        오전일과.All = function () {
            for (var key in this) {
                document.write(this[key] + "<br>")
            }
        }

        오전일과.All();    // All 함숫값 모두 출력

        // 객체에 소속된 함수 : 메소드
        // 객체에 소속된 변수 : 프로퍼티

    </script>

 

 

 

※ 참고 (객체 vs 인스턴스)

 

 

인스턴스는 클래스로부터 생성된 객체의 한 종류.

클래스는 객체를 생성하기 위한 템플릿이며, 인스턴스는 해당 클래스를 기반으로 생성된 객체.

 

 

아래 코드에서 car는 객체로 자동차의 속성과 메소드를 포함한다. redCar와 blueCar는 Car 클래스로부터 생성한 객체로, make, model, color, weight 속성과 drive(), stop() 메소드를 가지고 있다. 이렇게 클래스로부터 생성된 객체들 각각이 인스턴스이다.

// 객체 예시 - 자동차
let car = {
  make: "BMW",
  model: "X5",
  color: "black",
  weight: "2000kg",
  drive: function() {
     console.log("Driving the car...");
  },
  stop: function() {
    console.log("Stopping the car...");
  }
};

// 인스턴스 예시 - 자동차 클래스로부터 생성한 객체
class Car {
  constructor(make, model, color, weight) {
  this.make = make;
  this.model = model;
  this.color = color;
  this.weight = weight;
}
  drive() {
    console.log("Driving the car...");
  }
  stop() {
    console.log("Stopping the car...");
  }
}

let redCar = new Car("Hyundai", "Veloster", "red", "1500kg");
let blueCar = new Car("Kia", "Stinger", "blue", "1800kg");

// by chatGPT. GPT최고!

 

결론 : 

클래스로 만든 객체를 그 클래스의 인스턴스라고 한다.

인스턴스는 특정 객체가 어떤 클래스의 객체인지를 관계 위주로 설명할 때 사용하는 용어! ( by [점프 투 파이썬] )

 

 

 

 

객체 활용

 

객체를 활용하여 최종적으로,

 

배경과 텍스트 컬러는

Body 객체에 SetColor와 SetBackgroundColor 라는 이름의 함수(메소드)로 포함시키고,

 

링크태그 컬러는

Links 객체에 SetColor 함수(Body 객체의 메소드 SetColor와는 다른거.. 알쥬?)를 포함시켰다.

 

이후 주간, 야간 모드변경 함수인 nightdayft 내에서

각 모드에 따라 Body 및 Links 객체의 메소드들을 호출해서 인수(색깔들!)를 지정했다. 

 

 

See the Pen Untitled by j1n00000 (@j1n00000) on CodePen.