[JS] Object Property & Method 객체 프로퍼티와 메소드

 

 

✳️ Property : 객체 Object 에 소속된 변수

let aoto = {
        name: "yae", // name => key, "yae" => value
        age: 20, // age => key, 20 => value
};

name : "yae"   =>   PROPERTY

age : 20   =>   PROPERTY

 

💡 key 값은 문자열 String 타입을 가지고 있다.

그래서 'name' 이런 식으로 따옴표로 감싸줘야 하지만,

감싸지 않아도 자바스크립트가 문자열로 형 변환 해 인식한다.

 

💡 value 에는 모든 자료형을 넣을 수 있다. 함수까지 가능! (그 함수가 메소드 😬)

 

❗️ Property Name 규칙!

1. 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작

2. 띄어쓰기 금지

3. 하이픈(-) 금지

** 불가피하게 이 규칙을 벗어날 시 따옴표로 감싸야 한다.

 

✳️ Method : 객체 Object 에 소속된 함수

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

저 안에 있는 함수들이 객체의 METHOD

함수 이름은 property name이 대신해준다.

 

💡 메소드에 접근하는 법 ~

- 점 표기법

- 대괄호 표기법

greetings.sayHello(); // "Hello!"
greetings.sayBye("yae"); // "Bye! yae!" 점 표기법
greetings['sayBye']("yae"); // "Bye! yae!" 대괄호 표기법

 

➕ 응용

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

// 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"의 뜻은 "속성"입니다.

 

❗️ 그런데, 그냥 함수가 아니라 왜 메소드를 만들어서 사용하는 걸까?

: 메소드는 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있기 때문

: 함수 이름 중복을 피할 수 있기 때문

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

똑같이 넓이를 구하는 getArea 함수지만,

어떤 객체의 메소드인지에 따라 그 객체에 맞는 동작을 할 때 메소드를 사용한다!

 

만약 일반적인 함수로 정의했다면 함수 이름이 중복되지 않게 신경써야 하기도 하고,

하나의 함수로 만들었더라도 상황에 따라 복잡하게 만들어야 했을 것이다.