본문 바로가기
Front-end/javascript

[JavaScript] 객체

by 잔디🌿 2023. 7. 12.

    객체 만들기

     

    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 객체명을 출력하면 된다.

    'Front-end > javascript' 카테고리의 다른 글

    [JavaScript] 반복문  (0) 2023.07.12
    [JavaScript] 배열  (0) 2023.07.12
    [JavaScript] 콜백함수  (0) 2023.07.10
    [JavaScript] 호이스팅과 화살표함수  (0) 2023.07.10
    [JavaScript] 함수  (0) 2023.07.10