객체와 메소드

메소드 (Method)

- 객체의 프로퍼티에 어떤 값이든 저장할 수 있음

- 프로퍼티값으로 함수를 넣어줌

let greetings = {
  sayHello: function() {
    console.log('Hello!');
  },
  sayHi: function() {
    console.log('Hi!');
  },
  sayBye: function() {
    console.log('Bye!');
  },
  sayGoodBye: function(name) {
    console.log('GoodBye! ${name}');
  }
};

greetings.sayHello(); // Hello
greetings.sayGoodBye('Pengsoo'); // GoodBye! Pengsoo!

// 대괄호 표기법
greetings['sayGoodBye']('Pengsoo'); // GoodBye! Pengsoo!

 

메소드를 사용하는 이유

- 어떤 객체의 고유한 동작으로써 함수의 의미를 부여할 수 있음

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;
  }
}

 

실습

지난번 과제에서 단어장 객체에 단어를 추가하고 삭제하는 연습을 해봤는데요.

이번에는 단어장 객체에 단어를 추가하고 삭제하고, 콘솔에 출력도 해주는 다양한 메소드를 만들어 사용해봅시다.

 

1. 단어를 추가하는 addVoca 메소드를 만들어주세요. addVoca 메소드는 영어단어와 뜻, 총 두 개의 문자열 값을 파라미터로 전달받아서 myVoca객체에 새로운 프로퍼티를 추가하는 메소드입니다.

2. 단어를 삭제하는 deleteVoca 메소드를 만들어주세요. deleteVoca 메소드는 영단어 문자열을 파라미터로 전달받아서 해당하는 단어를 삭제하는 메소드입니다.

3. 단어를 출력하는 printVoca 메소드를 만들어주세요. printVoca 메소드는 영어단어 문자열을 파라미터로 전달받아서 특별한 포맷의 문자열을 콘솔에 출력하는 메소드입니다. 특별한 포맷은 "[영어단어]"의 뜻은 "[뜻]"입니다.로 제작해주세요.

 

let myVoca = {
  addVoca: function(key, value) {
    myVoca[key] = value;
  },
  deleteVoca: function(key, value) {
    delete myVoca[key];
  },
  printVoca: function(key) {
    console.log(`"${key}"의 뜻은 "${myVoca[key]}"입니다.`);
  }
};

// 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');

 

실습 결과

{
  addVoca: [Function: addVoca],
  deleteVoca: [Function: deleteVoca],
  printVoca: [Function: printVoca],
  parameter: '매개 변수',
  element: '요소',
  property: '속성'
}
{
  addVoca: [Function: addVoca],
  deleteVoca: [Function: deleteVoca],
  printVoca: [Function: printVoca],
  property: '속성'
}
"property"의 뜻은 "속성"입니다.