안녕하세요

7월19일43일차 - 객체생성, 메소드 , 비구조화할당 본문

프론트엔드 국비교육

7월19일43일차 - 객체생성, 메소드 , 비구조화할당

sakuraop 2022. 7. 19. 23:27

객체 생성 방법입니다.
      // 1. 객체 리터럴 표기법을 이용한 객체 생성
      const young = {
        name: "영",
        age: 31,
      };
      console.log(young);

      // 2. 객체 생성자함수를 이용한 객체 생성
      const han = new Object();
      han.name = "한";
      han.age = 29;
      console.log(han);




객체의 메소드 : 객체는 속성(property)과 함수(method)를 가집니다. property (key: value)
      const you = {
        name: "유",
        하는일: function () {
          console.log("허리 펴기");
        },
      };
      console.log(you["name"], you.name);
      you.하는일();
      
객체에서의 this
      const gentry = {
        name: "젠트리",
        age: 19,
        하는일: function () {
          console.log(this.name + " 허리 펴기");
        },
      };
      gentry.하는일();

객체의 메소드로 ()=> 화살표 함수
      const sakura = {
        name: "벚꽃",
        age: 19,
        하는일: () => {
          console.log("오치루");
        },
      };
      sakura.하는일();



setInterval 함수로 딜레이를 줄 수 있습니다.
객체 안 일반적인 함수(무명)에서의 this 바인딩. function 안에서 this를 쓰려면 화살표 함수를 이용합니다.
      const ame = {
        name: "비",
        하는일: function () {
          setInterval(() => {
            console.log(this.name + " 후루");
          }, 1000);
        },
      };
      ame.하는일();



      // etc. 이벤트리스너에서의 this
      // id는 바로 선택을 할 수 있지만 권장하는 방법이 아닙니다.
      // document.quarrySelector('#App'), document.getElementById('App')
      App.addEventListener("click", function () {
        console.log(this); // 이벤트리스너 function에서의 this는 App
      });
      
      This.addEventListener("click", () => {
        console.log(this); // 화살표함수에서의 this는 window
      });
      
      console.log(this) // this는 window




스프레드 연산자를 이용해 객체의 property를 가져올 수 있습니다.
      const 동물 = {
        leg: 4,
        type: "animal",
      };
      const 소 = {
        ...동물,
        sound: "음머",
      };
      console.log(동물, 소);
출력결과 : {leg: 4, type: 'animal'} {leg: 4, type: 'animal', sound: '음머'}




비구조화할당, javascript 구조분해할당.
패킹 언패킹과 비슷하지만 위치에 영향을 받지 않고 같은 이름인 변수의 키와 값만이 할당됩니다.
      const 객체 = {
        name: "han",
        age: 10,
        nickname: "young",
      };
      const { a, b, c, name } = 객체;
      console.log(a, name);
출력결과 : undefined 'han'