CodeGym /ํ–‰๋™ /Frontend SELF KO /๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ

๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ

Frontend SELF KO
๋ ˆ๋ฒจ 36 , ๋ ˆ์Šจ 1
์‚ฌ์šฉ ๊ฐ€๋Šฅ

7.1 ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ ๋งŒ๋“ค๊ธฐ

JavaScript์˜ ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์— ์—ฐ๊ฒฐ๋˜์–ด ๊ทธ ๊ฐ์ฒด ์œ„์— ๋™์ž‘์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์•ผ. ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด๊ฐ€ ์ž๊ธฐ๋งŒ์˜ ํ–‰๋™์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์„œ ๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•ด. ์•„๋ž˜์— ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ์˜ ์ƒ์„ฑ๊ณผ ์‚ฌ์šฉ์„ ์‚ดํŽด๋ณด์ž.

๊ฐ์ฒด ๋ฉ”์†Œ๋“œ๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด. ์ฃผ์š”ํ•œ ๋ฐฉ๋ฒ•๋“ค์„ ์‚ดํŽด๋ณด์ž.

1. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด

ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ์•ˆ์— ์ง์ ‘ ๋ฉ”์†Œ๋“œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด.

์ด ์˜ˆ์ œ์—์„œ ๊ฐ์ฒด person์€ greet() ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด, ์ด ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์˜ name ์†์„ฑ์„ ์‚ฌ์šฉํ•ด์„œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•ด:

JavaScript
    
      let person = {
        name: 'John',
        age: 30,
        greet: function() {
          return `Hello, my name is ${this.name}`;
        }
      };

      console.log(person.greet()); // ์ถœ๋ ฅ: Hello, my name is John
    
  

2. ๋ฉ”์†Œ๋“œ์˜ ์ถ•์•ฝ ๋ฌธ๋ฒ•

ES6๋ถ€ํ„ฐ ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ ์ƒ์„ฑ์— ๋Œ€ํ•œ ์ถ•์•ฝ ๋ฌธ๋ฒ•์ด ์ƒ๊ฒผ์–ด.

์ด ๋ฌธ๋ฒ•์€ ์ฝ”๋“œ๋ฅผ ๋” ๊ฐ„๊ฒฐํ•˜๊ณ  ์ฝ๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์ง€:

JavaScript
    
      let person = {
        name: 'John',
        age: 30,
        greet() {
          return `Hello, my name is ${this.name}`;
        }
      };

      console.log(person.greet()); // ์ถœ๋ ฅ: Hello, my name is John
    
  

3. ๊ฐ์ฒด ์ƒ์„ฑ ํ›„ ๋ฉ”์†Œ๋“œ ์ถ”๊ฐ€ํ•˜๊ธฐ

๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋œ ํ›„์— ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ์–ด.

์ด ์˜ˆ์ œ์—์„œ ๋ฉ”์†Œ๋“œ greet()๋Š” ๊ฐ์ฒด person์ด ์ƒ์„ฑ๋œ ํ›„์— ์ถ”๊ฐ€๋ผ:

JavaScript
    
      let person = {
        name: 'John',
        age: 30
      };

      person.greet = function() {
        return `Hello, my name is ${this.name}`;
      };

      console.log(person.greet()); // ์ถœ๋ ฅ: Hello, my name is John
    
  

4. ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์‚ฌ์šฉํ•˜๊ธฐ

์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ๋ชจ๋“  ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค๋ฅผ ์œ„ํ•ด ๋ฉ”์†Œ๋“œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜.

์ด ์˜ˆ์ œ์—์„œ greet() ๋ฉ”์†Œ๋“œ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜ Person()๋กœ ์ƒ์„ฑ๋œ ๋ชจ๋“  ๊ฐ์ฒด ์ธ์Šคํ„ด์Šค๋ฅผ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ ธ:

JavaScript
    
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.greet = function() {
          return `Hello, my name is ${this.name}`;
        };
      }

      let john = new Person('John', 30);
      let jane = new Person('Jane', 25);

      console.log(john.greet()); // ์ถœ๋ ฅ: Hello, my name is John
      console.log(jane.greet()); // ์ถœ๋ ฅ: Hello, my name is Jane
    
  

7.2 ๊ฐ์ฒด ๋ฉ”์†Œ๋“œ ์‚ฌ์šฉํ•˜๊ธฐ

1. ์ ์œผ๋กœ ๋ฉ”์†Œ๋“œ ์ ‘๊ทผํ•˜๊ธฐ

๊ฐ์ฒด ๋ฉ”์†Œ๋“œ๋Š” ์  ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์–ด:

JavaScript
    
      let person = {
        name: 'John',
        age: 30,
        greet() {
          return `Hello, my name is ${this.name}`;
        }
      };

      console.log(person.greet()); // ์ถœ๋ ฅ: Hello, my name is John
    
  

2. ๋Œ€๊ด„ํ˜ธ๋กœ ๋ฉ”์†Œ๋“œ ์ ‘๊ทผํ•˜๊ธฐ

๊ฐ์ฒด ๋ฉ”์†Œ๋“œ๋Š” ๋Œ€๊ด„ํ˜ธ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•ด์„œ๋„ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์–ด:

JavaScript
    
      let person = {
        name: 'John',
        age: 30,
        greet() {
          return `Hello, my name is ${this.name}`;
        }
      };

      let result = person['greet']();
      console.log(result); // ์ถœ๋ ฅ: Hello, my name is John
    
  

3. ๋‹ค๋ฅธ ๋ฉ”์†Œ๋“œ ์•ˆ์—์„œ ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœํ•˜๊ธฐ

๊ฐ์ฒด ๋ฉ”์†Œ๋“œ๋Š” ๋™์ผํ•œ ๊ฐ์ฒด์˜ ๋‹ค๋ฅธ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์–ด.

์ด ์˜ˆ์ œ์—์„œ sum()์™€ mul() ๋ฉ”์†Œ๋“œ๋Š” setValues() ๋ฉ”์†Œ๋“œ์—์„œ ์„ค์ •๋œ ๊ฐ’์„ ์‚ฌ์šฉํ•ด:

JavaScript
    
      let calculator = {
        a: 0,
        b: 0,
        setValues(a, b) {
          this.a = a;
          this.b = b;
        },
        sum() {
          return this.a + this.b;
        },
        mul() {
          return this.a * this.b;
        }
      };

      calculator.setValues(2, 3);

      console.log(calculator.sum()); // ์ถœ๋ ฅ: 5
      console.log(calculator.mul()); // ์ถœ๋ ฅ: 6
    
  

4. ๋ฉ”์†Œ๋“œ์—์„œ this ์‚ฌ์šฉํ•˜๊ธฐ

๊ฐ์ฒด ๋ฉ”์†Œ๋“œ์˜ this ํ‚ค์›Œ๋“œ๋Š” ๊ทธ ๊ฐ์ฒด ์ž์ฒด๋ฅผ ๊ฐ€๋ฆฌ์ผœ, ๊ทธ ์†์„ฑ์ด๋‚˜ ๋‹ค๋ฅธ ๋ฉ”์†Œ๋“œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜:

JavaScript
    
      let car = {
        brand: 'Toyota',
        model: 'Camry',
        getInfo() {
          return `Brand: ${this.brand}, Model: ${this.model}`;
        }
      };

      console.log(car.getInfo()); // ์ถœ๋ ฅ: Brand: Toyota, Model: Camry
    
  

5. ๋ฉ”์†Œ๋“œ๋ฅผ ์ฝœ๋ฐฑ์œผ๋กœ ์ „๋‹ฌํ•˜๊ธฐ

๊ฐ์ฒด ๋ฉ”์†Œ๋“œ๋ฅผ ์ฝœ๋ฐฑ์œผ๋กœ ์ „๋‹ฌํ•  ๋•Œ this ๊ฐ’์— ์ฃผ์˜ํ•ด์•ผ ํ•ด:

JavaScript
    
      let person = {
        name: 'John',
        age: 30,
        greet() {
          console.log(`Hello, my name is ${this.name}`);
        }
      };

      setTimeout( person.greet, 1000 ); // ์ถœ๋ ฅ: Hello, my name is undefined
    
  

์ด ์˜ˆ์ œ์—์„œ greet() ๋ฉ”์†Œ๋“œ๊ฐ€ setTimeout()์˜ ์ฝœ๋ฐฑ์œผ๋กœ ์ „๋‹ฌ๋  ๋•Œ this ๊ฐ’์ด ์‚ฌ๋ผ์ ธ๋ฒ„๋ ค. ๊ฒฐ๊ณผ์ ์œผ๋กœ greet() ๋‚ด๋ถ€์˜ this๋Š” ์ „์—ญ ๊ฐ์ฒด window๋ฅผ ๊ฐ€๋ฆฌ์ผœ. ๋ธŒ๋ผ์šฐ์ €์˜ window ๊ฐ์ฒด์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋นˆ ๋ฌธ์ž์—ด ""์ธ name ์†์„ฑ์ด ์žˆ์–ด์„œ "Hello, my name is"๊ฐ€ ์ถœ๋ ฅ๋ผ. ์˜ฌ๋ฐ”๋ฅธ this ๊ฐ’์„ ์œ ์ง€ํ•˜๋ ค๋ฉด bind() ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ•จ์ˆ˜๋ฅผ ํŠน์ • ์ปจํ…์ŠคํŠธ์— ๋ฐ”์ธ๋”ฉํ•  ์ˆ˜ ์žˆ์–ด:

JavaScript
    
      setTimeout(person.greet.bind(person), 1000); // ์ถœ๋ ฅ: Hello, my name is John
    
  

๋˜๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด:

JavaScript
    
      setTimeout(() => person.greet(), 1000); // ์ถœ๋ ฅ: Hello, my name is John
    
  

7.3 ๋ฉ”์†Œ๋“œ ๊ณต์œ  ์‚ฌ์šฉ

1. ํ”„๋กœํ† ํƒ€์ž…์„ ํ†ตํ•œ ๋ฉ”์†Œ๋“œ ์ƒ์†

๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž…์— ์ถ”๊ฐ€๋˜์–ด ๋ชจ๋“  ์ธ์Šคํ„ด์Šค๊ฐ€ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์–ด:

JavaScript
    
      function Person(name, age) {
        this.name = name;
        this.age = age;
      }

      Person.prototype.greet = function() {
        return `Hello, my name is ${this.name}`;
      };

      let john = new Person('John', 30);
      let jane = new Person('Jane', 25);

      console.log(john.greet()); // ์ถœ๋ ฅ: Hello, my name is John
      console.log(jane.greet()); // ์ถœ๋ ฅ: Hello, my name is Jane
    
  

2. ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ ์‚ฌ์šฉํ•˜๊ธฐ

ํ•œ ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋Š” call() ๋˜๋Š” apply() ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋‹ค๋ฅธ ๊ฐ์ฒด์— ๋Œ€ํ•ด ํ˜ธ์ถœ๋  ์ˆ˜ ์žˆ์–ด:

JavaScript
    
      let person1 = {
        name: 'John',
        age: 30,
        greet() {
          return `Hello, my name is ${this.name}`;
        }
      };

      let person2 = {
        name: 'Jane',
        age: 25
      };

      console.log(person1.greet.call(person2)); // ์ถœ๋ ฅ: Hello, my name is Jane
    
  
์ฝ”๋ฉ˜ํŠธ
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION