7.1 ๊ฐ์ฒด ๋ฉ์๋ ๋ง๋ค๊ธฐ
JavaScript์ ๊ฐ์ฒด ๋ฉ์๋๋ ๊ฐ์ฒด์ ์ฐ๊ฒฐ๋์ด ๊ทธ ๊ฐ์ฒด ์์ ๋์์ ์ํํ ์ ์๋ ํจ์์ผ. ๋ฉ์๋๋ ๊ฐ์ฒด๊ฐ ์๊ธฐ๋ง์ ํ๋์ ๊ฐ์ง ์ ์๊ฒ ํด์ ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ค์ํ ๋ถ๋ถ์ ์ฐจ์งํด. ์๋์ ๊ฐ์ฒด ๋ฉ์๋์ ์์ฑ๊ณผ ์ฌ์ฉ์ ์ดํด๋ณด์.
๊ฐ์ฒด ๋ฉ์๋๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๋ง๋ค ์ ์์ด. ์ฃผ์ํ ๋ฐฉ๋ฒ๋ค์ ์ดํด๋ณด์.
1. ๊ฐ์ฒด ๋ฆฌํฐ๋ด
ํจ์๋ฅผ ์ฌ์ฉํด์ ๊ฐ์ฒด ๋ฆฌํฐ๋ด ์์ ์ง์ ๋ฉ์๋๋ฅผ ๋ง๋ค ์ ์์ด.
์ด ์์ ์์ ๊ฐ์ฒด person
์ greet()
๋ฉ์๋๋ฅผ ๊ฐ์ง๊ณ ์์ด, ์ด ๋ฉ์๋๋ ๊ฐ์ฒด์ name
์์ฑ์ ์ฌ์ฉํด์ ๋ฌธ์์ด์ ๋ฐํํด:
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๋ถํฐ ๊ฐ์ฒด ๋ฉ์๋ ์์ฑ์ ๋ํ ์ถ์ฝ ๋ฌธ๋ฒ์ด ์๊ฒผ์ด.
์ด ๋ฌธ๋ฒ์ ์ฝ๋๋ฅผ ๋ ๊ฐ๊ฒฐํ๊ณ ์ฝ๊ธฐ ์ฝ๊ฒ ๋ง๋ค์ง:
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
์ด ์์ฑ๋ ํ์ ์ถ๊ฐ๋ผ:
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()
๋ก ์์ฑ๋ ๋ชจ๋ ๊ฐ์ฒด ์ธ์คํด์ค๋ฅผ ์ํด ๋ง๋ค์ด์ ธ:
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. ์ ์ผ๋ก ๋ฉ์๋ ์ ๊ทผํ๊ธฐ
๊ฐ์ฒด ๋ฉ์๋๋ ์ ๋ฌธ๋ฒ์ ์ฌ์ฉํด์ ํธ์ถํ ์ ์์ด:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // ์ถ๋ ฅ: Hello, my name is John
2. ๋๊ดํธ๋ก ๋ฉ์๋ ์ ๊ทผํ๊ธฐ
๊ฐ์ฒด ๋ฉ์๋๋ ๋๊ดํธ ๋ฌธ๋ฒ์ ์ฌ์ฉํด์๋ ํธ์ถํ ์ ์์ด:
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()
๋ฉ์๋์์ ์ค์ ๋ ๊ฐ์ ์ฌ์ฉํด:
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
ํค์๋๋ ๊ทธ ๊ฐ์ฒด ์์ฒด๋ฅผ ๊ฐ๋ฆฌ์ผ, ๊ทธ ์์ฑ์ด๋ ๋ค๋ฅธ ๋ฉ์๋์ ์ ๊ทผํ ์ ์๊ฒ ํด์ค:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // ์ถ๋ ฅ: Brand: Toyota, Model: Camry
5. ๋ฉ์๋๋ฅผ ์ฝ๋ฐฑ์ผ๋ก ์ ๋ฌํ๊ธฐ
๊ฐ์ฒด ๋ฉ์๋๋ฅผ ์ฝ๋ฐฑ์ผ๋ก ์ ๋ฌํ ๋ this
๊ฐ์ ์ฃผ์ํด์ผ ํด:
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()
๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ํจ์๋ฅผ ํน์ ์ปจํ
์คํธ์ ๋ฐ์ธ๋ฉํ ์ ์์ด:
setTimeout(person.greet.bind(person), 1000); // ์ถ๋ ฅ: Hello, my name is John
๋๋ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ ์ ์์ด:
setTimeout(() => person.greet(), 1000); // ์ถ๋ ฅ: Hello, my name is John
7.3 ๋ฉ์๋ ๊ณต์ ์ฌ์ฉ
1. ํ๋กํ ํ์ ์ ํตํ ๋ฉ์๋ ์์
๋ฉ์๋๋ ๊ฐ์ฒด์ ํ๋กํ ํ์ ์ ์ถ๊ฐ๋์ด ๋ชจ๋ ์ธ์คํด์ค๊ฐ ์ฌ์ฉํ ์ ์๊ฒ ํ ์ ์์ด:
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()
๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ ๋ค๋ฅธ ๊ฐ์ฒด์ ๋ํด ํธ์ถ๋ ์ ์์ด:
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
GO TO FULL VERSION