앱 만들기/JavaScript

JS Object 선언 하는 방법

나도 처음이야 2023. 8. 7.

자바 스크립트의 오브젝트 도 하나의 변수 입니다.

하지만 오브젝트는 많은 값들을 담을 수 있다는 차이점이 있습니다.

<script>
// Create an object:
const car = {
    type:"PICA",
    model:"500",
    color:"white"
};
</script>

변수와 같이 먼저 선언을 하고

property ={ } 

기호 사이에  여러 데이형을 넣습니다. 하나의 값은 "변수명 : 변수 값" 으로 한쌍을 이룹니다. 이를 자바스크립트 에서는 properties 라고 부릅니다.  프로퍼티 에는 모든 데이터 Type 이 올 수 있습니다. 

  // Create an object:
    const person = {
     //Property : Property Value
      firstName: "John",
      lastName: "Smith",
      age: 30,
      eyeColor: "gray",
      language : ["English", "Korea", "Spanish"]
    };

위 예제에서는 String 과 Number 그리고 배열도 사용이 되었습니다.

이 처럼 사용자가 정의 하는 객체는 자유도가 매우 높습니다. 

객체 메소드(Object Methods)

메소드는 하나의 프로퍼티로 저장되는 함수 입니다. 

메소드 의 syntax 도 프로퍼티와 유사 합니다. property : function(){ ... } 이렇게 선언과 정의를 기재합니다.

예를 들어봅니다.

    const person = {
     //Property : Property Value
      age: 30,
      ageFunction : function(){
          return this.age;
      }
    };

위 예제에서는 age 를 반환하는 메소드가 추가 되었습니다.

객체 프로퍼티 및 메소드 접근하기

객체 프로퍼티에 접근 하는 방법 입니다.

ObjectName.propertyName

혹은

ObjectName["propertyName"]  

 

메소드 접근 방법 입니다.

objectName.methodName() 

  <script>
    const person = {
      firstName: "John",
      lastName: "Smith",
      age: 30,
      eyeColor: "gray",
      language : ["English", "Korea", "Spanish"],
      ageFunction : function(){
        return this.age;
      }
    };    
    document.write(person["firstName"] + "<br>");    
    document.write(person.language[1]+"<br>");
    document.write(person.ageFunction());
  </script>

자바스크립트 오브젝트 선언 과 정의 방법

그리고 프로퍼티 와 메소드 를 사용하는 방법을 정리 해보았습니다

감사합니다.

반응형

댓글