[JavaScript] 객체의 프로퍼티/Property of Object

자바스크립트 - 객체의 프로퍼티/Property of Object

개념 과 예시 문제 풀이

 
 
객체의 프로퍼티 값으로 이름이 없는 함수를 선언하면, 해당 객체의 메소드가 된다.
함수의 이름은 프로퍼티 네임이 되기 때문이다.

// 메소드 (Method)
let myObject = {
  sayHello: function () {
    console.log('안녕하세요!');
  },
};

myObject.sayHello();

 
파라미터를 잘 활용하면 아래의 코드 같이 객체에 프로퍼티를 추가하는 메소드를 만들 수 있다.

// 메소드 (Method)
let myObject = {
  addProperty: function (key, value) {
    myObject[key] = value;
  },
};

myObject.addProperty('name', 'Codeit');
console.log(myObject.name);

 
파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해 주어야 한다.
그리고 할당연산자로 프로퍼티에 값을 할당해주면 새로운 값이 추가된다.

Codeit  // 출력 결과

 
 
 

---

문제

1. 단어를 추가하는 addVoca메소드를 만들어 주세요. addVoca메소드는 영어단어와 뜻, 총 두 개의 문자열 값을 파라미터로 전달받아서 myVoca 객체에 새로운 프로퍼티를 추가하는 메소드 입니다.
2. 단어를 삭제하는 deleteVoca메소드를 만들어 주세요.deleteVoca메소드는 영단어 문자열을 파라미터로 전달받아서 해당하는 단어를 삭제하는 메소드 입니다.
3. 단어를 출력하는 printVoca메소드를 만들어 주세요. printVoca메소드는 영어단어 문자열을 파라미터로 전달받아서 특별한 포멧의 문자열을 콘솔에 출력하는 메소드 입니다. 특별한 포멧은 "[영어단어]"의 뜻은 "[뜻]"입니다.로 제작해 주세요.

 

결과 예시

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

 

문제 풀이

이 문제는 빈 객체에 3가지 메소드를 만드는 문제이다. 
일단 가장 먼저 프로퍼티를 추가하는 메소드 인데,
addVoca라는 이름의 프로퍼티에, 프로퍼티 값으로 myVoca 객체에 새로운 프로퍼티를 추가하는 동작을 가진 함수를 선언 해주면 된다! 
문제중 조건을 보면 두 종류의 문자열 값을 파라미터로 전달받는다고 되어있는데, 아래와 같이 하면 해당 조건을 만족 시킬 수 있다. 

let myVoca = {
  // 코드를 작성해 주세요.
  addVoca: function (key, value) {
    myVoca[key] = value;
  },
};

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

 
한 가지 조심해야 될 부분은 파라미터로 다른 변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해 주어야 한다.
위 메소드에서 만약 점 표기법으로 key값에 접근을 하게 되면, 파라미터 key를 가리키는 것이 아니라,
myVoca에 문자 그대로 key라는 프로퍼티 이름을 가진 프로퍼티 값에 접근하는 것과 같은 의미가 되기 때문이다.
 
 
삭제 메소드는 delete 연산자와 대괄호 표기법으로 파라미터를 잘 활용해서 아래와 같이 작성할 수 있다.

let myVoca = {
  // 코드를 작성해 주세요.
  addVoca: function (key, value) {
    myVoca[key] = value;
  },
  deleteVoca: function (key) {
    delete 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');

 
참고로 메소드도 프로퍼티기 때문에, 잊지 말고 꼭 쉼표로 각 프로퍼티를 구분해야한다!
 
세 번째 메소드는 프로퍼티 값을 조합해서 특별한 포멧을 갖춘 문자열로 출력하는 메소드인데,
프로퍼티에 접근하는 방식과 console.log함수, 그리고 템플릿 문자열을 활용하면 아래와 같이 간단하게 작성할 수 있다.
 
 

모범 답안

let myVoca = {
  // 코드를 작성해 주세요.
  addVoca: function (key, value) {
    myVoca[key] = value;
  },
  deleteVoca: function (key) {
    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);