JavaScript .05

004. 객체와 메소드(Method)

연관성 있는 여러 함수들을 하나로 묶고 싶은경우(=객체)
객체의 프로퍼티는 어떤 자료형이든 저장할수가 있기 때문에 프로퍼티값으로 함수를 넣어주면 된다

let greetings = { // sayHello, sayHi, sayBye : 세가지의 메소드
  sayHello: function() { // sayHello(프로퍼티네임) = 함수이름대신사용
    console.log("hello!");
  },
  sayHi: function() {
    console.log("hi!");
  },
  sayBye: function() {
    console.log("BYE");
  }
};

greetings.sayHello(); //"hello!"

// 파라미터 사용시
let greetings = { // sayHello, sayHi, sayBye : 세가지의 메소드
  sayHello: function(name) { // sayHello(프로퍼티네임) = 함수이름대신사용
    console.log(`Hello ${name}!`);
  },
  sayHi: function() {
    console.log("hi!");
  },
  sayBye: function() {
    console.log("BYE");
  }
};

greetings.sayHello("JM"); //(=console.log와 모양이 비슷 콘솔이라는 객체의 로고 메소드)
greetings["sayHello"]("JM"); //대괄호표기법 : [프로퍼티에 먼저접근](메소드 호출)

• 메소드를 사용해서 함수를 사용하는 이유 메소드는 어떤 객체의 고유한 동작으로써 함수에 의미를 부여할수 있어서!

  • 메소드를 활용하면 다른 함수의 이름 중복을 피할수 있음

  • 좀더 객체에 집중해서 함수의 동작 부분을 작성할 수가 있음

  • 사용할때도 객제의 고유한 동작으로 구분할수 있기때문에 좀더 의미있는 코드로 활용가능

    let rectAngle = {
      width: 30,
      height: 50,
      getArea: function() {
        return rectAngle.width * rectAngle.height;
      }
    }
    
    let triAngle = {
      width: 15,
      height: 40,
      getArea : function() {
        return triAngle.width * triAngle.height / 2;
      }
    }
    
    // 메소드를 활용하면 다른 함수의 이름 중복을 피할수 있음
    // 좀더 객체에 집중해서 함수의 동작 부분을 작성할 수가 있음
    // 사용할때도 객제의 고유한 동작으로 구분할수 있기때문에 좀더 의미있는 코드로 활용가능

예제(영단어 추가 삭제 출력)

• 파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용
• 메소드도 프로퍼티기 때문에, 잊지 말고 꼭 쉼표로 각 프로퍼티를 구분

let myVoca = {
  // 코드를 작성해 주세요.
  addVoca : function(word,meaning) {
    myVoca[word] = meaning; // 파라미터로 다른 변수에 담긴값을 가져올때 : [표기법]
  },
  deleteVoca : function(word){
    delete myVoca[word]; //메소드도 프로퍼티기 때문에 꼭 쉼표로 각 프로퍼티를 구분
  },
  printVoca : function(word) {
    console.log(`"${word}"의 뜻은 "${myVoca[word]}"입니다.`);
  }
};

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

// // deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

// // printVoca메소드 테스트 코드
myVoca.printVoca('property');

005. for...in 반복문

객체안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할때사용

• 객체의 프로퍼티 네임을 가져오는 반복문이기 때문에 일반적인 for문으로는 대체할수 없는 특별한 반복문
• 객체 내부에 있는 모든 프로퍼티 값들을 하나씩 다루어야 하는경우 사용

(특정한 변수 in 반복할 객체) : 객체의 프로퍼티 네임이 변수에 할당 -> 객체에 프로퍼티 개수만큼 반복동작

for(변수 in 객체) {
  // (특정한 변수 in 반복할 객체) : 객체의 프로퍼티 네임이 변수에 할당 -> 객체에 프로퍼티 개수만큼 반복동작
  동작부분
};

let miinii = {
  name : "MIINII",
  bornYear : 1800,
  insungGood : true,
  worst : null,
  bestPoint : "미니공주"
}
 
for (let key in miinii) { //key라는 변수에 miinii의 프로퍼티 개수만큼 반복
  console.log(key);
}

for (let key in miinii) { //key라는 변수에 miinii의 프로퍼티 개수만큼 반복
  console.log(key); // 네임 
  console.log(miinii[key]); // 대괄호 : 프로퍼티값(벨류)에도 접근
}