Front-end/javascript

[JavaScript] 객체

잔디🌿 2023. 7. 12. 02:33

객체 만들기

 

let person = {
  key: "value", //프로퍼티
  key: "value1"
  };//객체 리터럴방식

위 코드는 객체 리터럴방식으로 객체를 생성하고, 프로퍼티를 설정한다. (자바 클래스와 유사)

 

console.log(person.key) //점표기법
console.log(person["key"]) //괄호표기법

객체의 프로퍼티를 불러올 때에는 다음과 같이 점표기법과 괄호표기법을 사용할 수 있다. 

주의할 점은 괄호표기법에서 key 이름은 꼭 string형으로 넣어주어야 한다는 점이다.

 

let person = {
    name : "jack",
    age : 22,
    };
    
console.log(get("name"));

function get(key){
   return person(key);
   }

괄호표기법은 위와 같이 함수를 호출하여 리턴받는 기능을 구현할 때 사용하기 편하다.

 

프로퍼티 추가하기

 

person.location = "korea";
person["gender"] = "men";

이와 같은 명령어는 객체에 프로퍼티를 추가한다.

 

프로퍼티 수정하기

person.name = "soo";
person["name"] = "joy";

이 명령어는 객체에 이미 존재하는 프로퍼티의 값을 수정한다.

객체를 const로 선언했어도 에러가 나지 않는다.

 

 

 

프로퍼티 삭제

 

person.name = null;
person["name"] = null;

 

객체 내 메서드 출력

 

const act = {
    say : function(){
      console.log("안녕");
      }
    };
    
    
    
act.say();  //안녕 출력
act["say"](); // 안녕 출력

기존 함수 호출 방식과 동일하게 호출한다.

여기서의 함수를 메서드라고 한다.

 

 

const act = {
    name = "joy",
    say : function(){
      console.log("안녕 ${this.name}");
      console.log("안녕 ${this["name"]}");
      }
    };
    
act.say();  //안녕 joy 출력
act["say"](); // 안녕 joy 출력

객체 내에서 메서드가 프로퍼티를 사용할 때 이를 this.프로퍼티명으로 호출한다.

 

console.log("name : ${"name" in person}"); // name : true 출력

해당 프로퍼티가 존재하는지 알아보려면 "key명" in 객체명을 출력하면 된다.