JavaScript ν΄λμ€λ
μλ°μ€ν¬λ¦½νΈμμ ν΄λμ€(class)λ κ°μ²΄λ₯Ό μμ±νκΈ° μν ν νλ¦Ώμ΄λ€. ν΄λμ€λ κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°(OOP)μ κ°λ μ λ°νμΌλ‘, μ½ μ¬μ¬μ©μ±κ³Ό ꡬ쑰μ μΈ μ½λλ₯Ό μμ±νλ λ° λμμ μ€λ€.
ν΄λμ€ μ μΈ λ°©λ²
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
print() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
Person : ν΄λμ€λͺ
constructor : κ°μ²΄κ° μμ±λ λ νΈμΆλλ κ² / νλλ₯Ό μ μΈνλ€.
- name, age : Person ν΄λμ€μ νλ
print : Person ν΄λμ€μ λ©μλ / μΆλ ₯ κΈ°λ₯μ λ΄λΉνλ€.
κ°μ²΄ μμ± λ°©λ²
const person1 = new Person('Alice', 30);
person1.print(); // "Hello, my name is Alice and I am 30 years old."
Person ν΄λμ€λ₯Ό κΈ°λ°μΌλ‘ person1μ΄λΌλ κ°μ²΄λ₯Ό μμ±νκ³ , ν΄λμ€ μμ λ©μλμΈ print()λ₯Ό νΈμΆνμ¬ κ°μ μΆλ ₯νλ€. (print() λ©μλκ° μΆλ ₯ λ©μλμ΄κΈ° λλ¬Έμ μΆλ ₯κ°μ΄ λμ€λ κ²μ΄λ€.)
νλΌμ΄λΉ νλλ?
κ·Έλ λ€λ©΄, ν΄λμ€μμ νλλ₯Ό μ μΈν λ #μ μ΄μ©νμ¬ νλΌμ΄λΉ νλλ‘ μ μΈνμ¬ ν΄λμ€ λ΄λΆμμλ§ μμ±μ μ κ·Όν μ μλλ‘ λ§λ λ€. μ΄μ κ° λκΉ? νλΌμ΄λΉ νλλ‘ μ μΈνμ§ μμλ μ½λλ λμνλ λ° μ νλΌμ΄λΉ νλλ‘ μ μΈν΄μΌ ν κΉ?
κ°λ¨νκ² ν λ¬Έμ₯μΌλ‘ μμ½νλ©΄ κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°μ ν΅μ¬ κ°λ μ€ νλμΈ μΊ‘μν(encapsulation) λ°©μμ μ μ©νμ¬ μ½λλ₯Ό μμ±ν΄μΌ νκΈ° λλ¬Έμ΄λ€. κ·Έλ λ€λ©΄, μ μΊ‘μν λ°©μμ μ μ©ν΄μΌ κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°μ μμ νκ² ν μ μμκΉ?
μΊ‘μν(encapsulation)
μΊ‘μνλ λ°μ΄ν°(μμ±)μ λ©μλ(λμ)λ₯Ό νλμ λ¨μλ‘ λ¬Άκ³ , μΈλΆλ‘λΆν° μ 보λ₯Ό μλνλ λ°©μμ μλ―Ένλ€.
κ·Έλ λ€λ©΄ λ°μ΄ν°μ λ©μλλ₯Ό νλμ λ¨μλ‘ λ¬Άκ³ μ μΈλΆλ‘λΆν° μ 보λ₯Ό μλν΄μΌ νλ μ§ μμ보μ.
μΊ‘μνκ° νμν μ΄μ
μ°μ μΊ‘μνλ₯Ό ν΅ν΄ κ°μ²΄μ λ΄λΆ λ°μ΄ν°λ₯Ό 보νΈνμ§ μκ³ μΈλΆμμ μμ μ΄ κ°λ₯νλλ‘ νλ©΄, λ°μ΄ν°κ° μλμΉ μκ² λ³κ²½λλ μν©μ΄ λ°μν μ μλ€.
μλ₯Ό λ€μ΄ μκ°ν΄λ³΄μ.
μν κ³μ’μ μμ‘, λ‘κ·ΈμΈ μΈμ μ μ 보, 물건μ μ¬κ³ μλ κ°μ μ€μν λ°μ΄ν°λ μΈλΆμμ μμλ‘ λ³κ²½ν΄μλ μλλ€. κ°κ°μ΄ κ³ μ ν λ°μ΄ν°μ΄κ³ νλΌμ΄λΉ κ°μ²΄λ₯Ό νμ©ν λμμ΄ μλλΌλ©΄, μκΈ°μΉ λͺ»ν μ€λ₯κ° λ°μνκΈ° μ½λ€.
1. λ°μ΄ν° λ³΄νΈ λ° λ¬΄κ²°μ± μ μ§
μΈλΆμμ μ§μ μ κ·Όνμ§ λͺ»νλλ‘ λ°μ΄ν°μ 무결μ±μ μ μ§ν΄μΌ νκΈ° λλ¬Έμ μΊ‘μνκ° νμνλ€. λ¬΄κ²°μ± μ μ§λ₯Ό ν΅ν΄ μκΈ°μΉ μμ μ€λ₯μ λ²κ·Έλ₯Ό μλ°©ν μ μλ€.
2. μ½λμ μΌκ΄μ±κ³Ό μμ μ± μ μ§
μ΄μμ μΈ κ°μ²΄λ μμ μ μνμ νλμ μ€μ€λ‘ κ΄λ¦¬ν΄μΌ νλ€.
μλ₯Ό λ€μ΄ μλμ°¨ κ°μ²΄λ₯Ό μ€κ³νλ€λ©΄ μμ§μ μνλ μλμ°¨μ λ΄λΆμμ κ΄λ¦¬λμ΄μΌ νλ©° μΈλΆμμ λ§μλλ‘ μμ§μ ν€κ³ λ μ μλλ‘ ν΄μλ μλλ€.
κ·Έλ κΈ° λλ¬Έμ μΊ‘μνλ₯Ό μ¬μ©νμ¬ ν΄λμ€ λ΄λΆμ λ°μ΄ν°λ₯Ό κ²μ¦νκ³ κ΄λ¦¬νλ λ©μλλ₯Ό μΆκ°νμ¬ λ°μ΄ν°μ μΌκ΄μ±μ μ μ§ν μ μλ€. λν μΈλΆμμλ ν΄λμ€κ° μ 곡νλ μΈν°νμ΄μ€λ₯Ό ν΅ν΄μλ§ κ°μ²΄μ μνλ₯Ό λ³κ²½ν μ μμΌλ―λ‘ κ°μ²΄μ μνκ° μμμΉ λͺ»νκ² λ³κ²½λλ μΌμ μ€μΌ μ μλ€.
3. μ μ§λ³΄μμ νμ₯μ± ν₯μ
μΊ‘μνλ μ½λμ μ μ§λ³΄μμ±μ λμ΄κ³ , νμ₯μ±μ μ½κ² λ§λ λ€. ν΄λμ€κ° λ°μ΄ν°λ₯Ό μλνκ³ λ©μλλ§ κ³΅κ°νλ κ²½μ°, ν΄λμ€ λ΄λΆμ ꡬ쑰λ λ°μ΄ν°λ₯Ό λ³κ²½ν΄λ μΈλΆ μ½λμ μν₯μ μ£Όμ§ μλλ€.
μΈλΆμ μν₯μ μ κ² λ°κΈ° λλ¬Έμ μ μ§λ³΄μκ° μ©μ΄ν΄μ§λ€. λν λ΄λΆ ꡬνμ λ³κ²½νλλΌλ μΈλΆ μΈν°νμ΄μ€λ λμΌνκ² μ μ§λκΈ° λλ¬Έμ μλ‘μ΄ κΈ°λ₯μ μΆκ°νκ±°λ κΈ°μ‘΄ κΈ°λ₯μ νμ₯νλ κ²λ μμν΄μ§λ€.
4. μ 보 μλκ³Ό λͺ¨λν
κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°μμ μ 보 μλμ λ§€μ° μ€μνλ€. μ 보 μλμ ν΅ν΄ κ°μ²΄ λ΄λΆμ μΈλΆ μ¬νμ κ°μΆκ³ , κ°μ²΄κ° μ 곡νλ νΌλΈλ¦ μΈν°νμ΄μ€λ§ μΈλΆμ 곡κ°νκΈ° λλ¬Έμ λͺ¨λνλ₯Ό μ€νν μ μκΈ° λλ¬Έμ΄λ€.
λͺ¨λνλ νλ‘κ·Έλ¨μ λ 립μ μΈ κ΅¬μ± μμλ‘ λλ μ μκ² νμ¬ κ° μμλ₯Ό λ 립μ μΌλ‘ κ°λ°, ν μ€νΈ, μμ ν μ μκ² νλ€.
λν ν λͺ¨λμ λ³κ²½μ΄ λ€λ₯Έ λͺ¨λμ λ―ΈμΉλ μν₯μ μ΅μνν μ μκΈ° λλ¬Έμ μ 보 μλμ μ€μν κ°λ μ΄λ€.
κ·Έλ λ€λ©΄, μΊ‘μνμ νμμ±μ λν΄ νμ νμμΌλ λ°μ΄ν°λ₯Ό μΊ‘μννκΈ° μν΄ νμν νλΌμ΄λΉ νλλ₯Ό μ΄λ»κ² μ¬μ©νλμ§ μμ보μ.
νλΌμ΄λΉ νλ νμ© μμ
class Person {
#name;
#age;
constructor(name, age) {
this.#name = name;
this.#age = age;
}
getName() {
return this.#name;
}
getAge() {
return this.#age;
}
}
const person = new Person('John', 30);
console.log(person.getName()); // 'John'
console.log(person.getAge()); // 30
console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class
μμ κ°μ λ°©μμΌλ‘ νλΌμ΄λΉ νλλ #μ μ΄μ©ν΄μ μ μΈνλ©° μμ κ°μ΄ μ μΈν μ΄νμλ μΈλΆμμ μ§μ μ κ·Όν μ μλ νλκ° λλ€. μΈλΆμμ μ κ·ΌνκΈ° μν΄μλ getName()κ³Ό getAge()λ₯Ό μ¬μ©ν΄μΌ νλ€.
λ§μ½ 맨 μλμ console.logμ²λΌ μ§μ νλλ₯Ό νΈμΆνλ©΄ SyntaxError κ° λ°μνκ² ν μ μλ€.
νλΌμ΄λΉ νλμ μ₯μ κ³Ό μ£Όμμ¬ν
νλΌμ΄λΉ νλλ₯Ό μ¬μ©νλ©΄ ν΄λμ€μ μΊ‘μνλ₯Ό κ°ννκ³ κ°μ²΄μ μμ μ±μ λμΌ μ μλ€λ ν° μ₯μ μ΄ μ‘΄μ¬νλ€. μΈλΆμμμ 무λΆλ³ν μ κ·Όμ λ§μμ μκΈ°μΉλͺ»ν μλ¬λ₯Ό λ°©μ§ν μ μλ€.
λν ν΄λμ€μ μΈν°νμ΄μ€μ ꡬνμ λͺ νν λΆλ¦¬ν μ μμΌλ©° ν΄λμ€λ₯Ό μ¬μ©νλ κ°λ°μμκ² νμν μ λ³΄λ§ λ ΈμΆν μ μμ΄μ μ½λμ μΌκ΄μ±λ μ μ§νκ³ μ μ§λ³΄μλ μ©μ΄νλλ‘ ν΄μ€λ€.
νμ§λ§ μ΄λ¬ν μ₯μ μ κ°μ§ νλΌμ΄λΉ νλλ μ£Όμμ¬νμ΄ μ‘΄μ¬νλ€.
νλΌμ΄λΉ νλλ ν΄λμ€μ μμ ꡬ쑰μμ μμ ν΄λμ€κ° λΆλͺ¨ ν΄λμ€μ νλΌμ΄λΉ νλμ μ κ·Όν μ μλ€λ μ μ κ³ λ €ν΄μΌ νλ€.
λ§μ½ extendsλ₯Ό μ¬μ©νμ¬ ν΄λμ€μ μμ ꡬ쑰λ₯Ό μ€κ³ν λλ μμ μ¬νμ μΆ©λΆν κ³ λ €νμ¬ μ€κ³ν΄μΌ νλ€.
κ²°λ‘
μλ°μ€ν¬λ¦½νΈμμ ν΄λμ€μ νλΌμ΄λΉ νλλ₯Ό νμ©νλ©΄ κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°μ μ€μν μμΉμΈ μΊ‘μνλ₯Ό κ°νν μ μλ€.
μ€μ λ‘ νλΌμ΄λΉ νλλ₯Ό μ¬μ©νμ¬ ν΄λμ€λ₯Ό μ€κ³νλ €λ λ무 볡μ‘νμ¬ μκ° λ΄μ κ³Όμ λ₯Ό μ μΆνκΈ° μν΄ μ¬μ©μ μλ΅νμλ€. νμ§λ§ νμνλ€λ μ μ μΈμ§νκ³ μ΄λ₯Ό κ³ λ €νμ¬ ν΄λμ€λ₯Ό μ€κ³νλ©΄ μμ°μ€λ½κ² κ°μ²΄ μ§ν₯ νλ‘κ·Έλλ°μ μμΉμ μ€μν νλ‘κ·Έλλ°μ ν μ μμ κ²μ΄λΌκ³ μκ°λλ€.
μ°Έκ³ κΈ : https://f-lab.kr/insight/utilizing-javascript-class-and-private-fields
μλ°μ€ν¬λ¦½νΈ ν΄λμ€μ νλΌμ΄λΉ νλ νμ©νκΈ°
μλ°μ€ν¬λ¦½νΈμμ ν΄λμ€μ νλΌμ΄λΉ νλλ₯Ό νμ©νλ λ°©λ²κ³Ό μ₯μ μ μ€λͺ ν©λλ€. νλΌμ΄λΉ νλλ₯Ό ν΅ν΄ ν΄λμ€μ μΊ‘μνλ₯Ό κ°ννκ³ , κ°μ²΄μ μμ μ±μ λμΌ μ μλ μ λ΅μ μ μν©λλ€.
f-lab.kr