[JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 객체 메소드를 만드는 여러 방법
const person = {
  name: "김코딩",

  // 1. 메소드 단축 구문 (추천!)
  sayHi() {
    console.log("안녕하세요!");
  },

  // 2. 전통적인 방법
  sayBye: function () {
    console.log("안녕히가세요!");
  },

  // 3. 화살표 함수
  greet: () => {
    console.log("반갑습니다!");
  },
};

person.sayHi(); // "안녕하세요!"
person.sayBye(); // "안녕히가세요!"
person.greet(); // "반갑습니다!"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const key = "name";
const value = "김코딩";

// 1. 기본적인 계산된 프로퍼티
const user = {
  [key]: value, // name: "김코딩"
};

// 2. 복잡한 표현식도 가능
const prefix = "user";
const userInfo = {
  [`${prefix}_id`]: 1234,
  [`${prefix}_name`]: "박해커",
  [`${prefix}_age`]: 20,
};

console.log(userInfo.user_id); // 1234
console.log(userInfo.user_name); // "박해커"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const game = {
  title: "슈퍼마리오",
  level: 1,

  // this로 자신의 프로퍼티 접근
  showInfo() {
    console.log(`게임: ${this.title}, 레벨: ${this.level}`);
  },

  // 레벨업 메소드
  levelUp() {
    this.level++;
    console.log(`레벨 업! 현재 레벨: ${this.level}`);
  },
};

game.showInfo(); // "게임: 슈퍼마리오, 레벨: 1"
game.levelUp(); // "레벨 업! 현재 레벨: 2"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const calculator = {
  result: 0,
};

// 동적으로 메소드 추가
calculator.add = function (num) {
  this.result += num;
  return this;
};

// 계산된 프로퍼티로 메소드 추가
const operations = {
  subtract: "sub",
  multiply: "mul",
};

calculator[operations.subtract] = function (num) {
  this.result -= num;
  return this;
};

// 메소드 체이닝
calculator.add(5).sub(2);
console.log(calculator.result); // 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const createCharacter = (name) => {
  return {
    name,
    level: 1,
    hp: 100,
    mp: 50,

    // 상태 표시 메소드
    [`show${name}Status`]() {
      // 계산된 프로퍼티로 메소드 이름 생성
      console.log(`
                캐릭터: ${this.name}
                레벨: ${this.level}
                HP: ${"❤️".repeat(this.hp / 20)}
                MP: ${"💙".repeat(this.mp / 10)}
            `);
    },

    // 스킬 사용 메소드
    useSkill(skillName) {
      const skills = {
        파이어볼: 30,
        아이스빔: 25,
        힐링: 20,
      };

      if (this.mp >= skills[skillName]) {
        this.mp -= skills[skillName];
        console.log(`${this.name}의 ${skillName} 사용! (MP: ${this.mp})`);
        return true;
      }

      console.log("MP가 부족합니다! 😢");
      return false;
    },
  };
};

const wizard = createCharacter("마법사");
wizard.showMagicianStatus(); // 계산된 프로퍼티로 만든 메소드 호출
/*
    캐릭터: 마법사
    레벨: 1
    HP: ❤️❤️❤️❤️❤️
    MP: 💙💙💙💙💙
*/

wizard.useSkill("파이어볼");
/*
    캐릭터: 마법사
    레벨: 1
    HP: ❤️❤️❤️❤️❤️
    MP: 💙💙
*/

// 상태 다시 확인
wizard.showMagicianStatus();
/*
    캐릭터: 마법사
    레벨: 1
    HP: ❤️❤️❤️❤️❤️
    MP: 💙💙
*/

// MP 부족할 때
wizard.useSkill("파이어볼"); // "MP가 부족합니다! 😢"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const api = {
  // 동사+명사 형태 추천
  getData() {
    /* ... */
  },
  updateUser() {
    /* ... */
  },
  deletePost() {
    /* ... */
  },

  // 불리언 값은 is, has 등으로 시작
  isValid() {
    /* ... */
  },
  hasPermission() {
    /* ... */
  },
};

1
2
3
4
5
6
7
8
9
10
const fields = ["id", "name", "age"];
const values = [1, "김코딩", 20];

// 객체 생성을 동적으로!
const user = fields.reduce((obj, field, i) => {
  obj[field] = values[i];
  return obj;
}, {});

console.log(user); // { id: 1, name: '김코딩', age: 20 }