[HTML/CSS/JS] 객체, this

happyyeom·2024년 10월 27일

객체

객체(object)란 다양한 속성(데이터)과 메서드(기능)를 담는 자료형이다. 한마디로 관련된 데이터와 기능을 하나의 단위로 묶은 복합 자료형이다. 객체는 키(key)와 값(value) 쌍으로 구성(key : value)된 속성을 가지며, 이 키와 값을 통해 데이터를 저장하거나 함수를 정의할 수 있다.
예를 들어보자.

let 사람 = {
  "이름" : "홍길동",
  "성별" : "남"
  "나이" : "20",
  "인사" : function() {
    console.log("안녕하세요. 저의 성별은 남이고 나이는 20살인 홍길동입니다.");
  }
};

여기서 이름, 나이가 객체의 속성이다. 인사는 객체의 메서드로 기능을 정의한 함수다. 다른 방식으로도 작성할 수 있다.

let 사람 = {};
사람.이름 = "홍길동";
사람["성별"] = "남";
사람.나이 = "20";
사람.인사 = function() {
  console.log("안녕하세요. 저의 성별은 남이고 나이는 20살인 홍길동입니다.");
};

객체의 값 또한 변수와 마찬가지로 바뀔 수 있다.

let 사람 = {
  "이름" : "홍길동",
  "나이" : "20"
  "인사" : function(){
    let name = this.이름;
    let age = this.나이;
    console.log("안녕하세요. 저는 " + age + "살 " + name + "입니다.");
  }
};

사람.인사();
//안녕하세요. 저는 20살 홍길동입니다.
사람.이름 = "홍길순";
사람.나이++;
사람.인사();
//안녕하세요. 저는 21살 홍길순입니다.

this의 개념

this는 함수가 호출되는 문맥에 따라 달라지고 현재 실행 중인 코드의 실행 맥락을 가리킨다.
만약 객체 메서드 내부에서 this를 사용한다면 this는 해당 객체를 참조한다. 즉 메서드를 호출한 객체가 this가 된다.

let 사람 = {
  이름 = "홍길동",
  인사 = function() {
    console.log(this.이름);
  }

위 코드에서 this는 객체 사람을 뜻한다. 따라서 console창에는 사람.이름홍길동이 출력된다.

this개념을 사용하여 위 챕터에서 나온

사람.인사 = function() {
  console.log("안녕하세요. 저의 성별은 남이고 나이는 20살인 홍길동입니다.");
};

를 다시 정의해보자.

사람.인사 = function() {
  console.log("안녕하세요. 저의 성별은 " + this.성별 + "이고 나이는 " + this.나이 + "살인 " + this.이름 + "입니다.");
};
profile
🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳

0개의 댓글