λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
Language/Javascript

[Javascript]μžλ°”μŠ€ν¬λ¦½νŠΈ μƒμ„±μž ν•¨μˆ˜μ™€ new ν‚€μ›Œλ“œ: μ‹€μˆ˜ 방지 팁과 μ‚¬μš© 예제

by YJ Dev 2024. 7. 2.
728x90
λ°˜μ‘ν˜•
SMALL

JavaScriptμ—μ„œ 객체λ₯Ό 생성할 λ•Œ ν”νžˆ μ‚¬μš©ν•˜λŠ” 방법 쀑 ν•˜λ‚˜λŠ” μƒμ„±μž ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μ‹€μˆ˜λ‘œ new ν‚€μ›Œλ“œλ₯Ό 빠뜨리면 λ¬Έμ œκ°€ λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이번 ν¬μŠ€νŒ…μ—μ„œλŠ” μ΄λŸ¬ν•œ 문제λ₯Ό λ°©μ§€ν•˜λŠ” 팁과 ν•¨κ»˜ μƒμ„±μž ν•¨μˆ˜μ™€ ν™”μ‚΄ν‘œ ν•¨μˆ˜μ˜ 차이점을 μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈ μƒμ„±μž ν•¨μˆ˜μ™€ new ν‚€μ›Œλ“œ


01. μƒμ„±μž ν•¨μˆ˜λž€?πŸ§‘‍

μžλ°”μŠ€ν¬λ¦½νŠΈ μƒμ„±μž ν•¨μˆ˜λŠ” 객체λ₯Ό μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” νŠΉλ³„ν•œ ν•¨μˆ˜μž…λ‹ˆλ‹€. ν•¨μˆ˜ 이름은 일반적으둜 λŒ€λ¬Έμžλ‘œ μ‹œμž‘ν•˜λ©°, this ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ 객체의 ν”„λ‘œνΌν‹°λ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.
μƒμ„±μž ν•¨μˆ˜μ— κ΄€ν•œ μžμ„Έν•œ λ‚΄μš©μ€ μ•„λž˜ ν¬μŠ€νŒ…μ„ μ°Έκ³ ν•΄ μ£Όμ„Έμš”πŸ˜

""

[Javascript]μžλ°”μŠ€ν¬λ¦½νŠΈ 객체 μ™„λ²½ κ°€μ΄λ“œ: μ„ μ–Έ, μ‚¬μš©λ²•, 볡사

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 객체(Object)λŠ” 맀우 μ€‘μš”ν•œ κ°œλ…μž…λ‹ˆλ‹€. κ°μ²΄λŠ” λ‹€μ–‘ν•œ 데이터λ₯Ό ν•˜λ‚˜μ˜ ꡬ쑰둜 λ¬Άμ–΄ 관리할 수 있게 ν•΄ μ€λ‹ˆλ‹€. 이 κΈ€μ—μ„œλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 객체에 λŒ€ν•œ κΈ°λ³Έ κ°œλ…λΆ€ν„° κ³ κΈ‰ ν™œ

creativevista.tistory.com


02. new ν‚€μ›Œλ“œμ˜ μ—­ν• πŸ†•

JavaScriptμ—μ„œ new ν‚€μ›Œλ“œλŠ” 주둜 μƒμ„±μž ν•¨μˆ˜(constructor function)와 ν•¨κ»˜ μ‚¬μš©λ˜μ–΄ μƒˆλ‘œμš΄ 객체λ₯Ό μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λ‹€μŒκ³Ό 같은 일듀이 μΌμ–΄λ‚©λ‹ˆλ‹€:

  1. μƒˆλ‘œμš΄ 빈 객체 생성: new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λ¨Όμ € μƒˆλ‘œμš΄ 빈 객체가 μƒμ„±λ©λ‹ˆλ‹€.
  2. ν”„λ‘œν† νƒ€μž… μ—°κ²°: μƒμ„±λœ μƒˆλ‘œμš΄ κ°μ²΄λŠ” μƒμ„±μž ν•¨μˆ˜μ˜ prototype 속성을 μ°Έμ‘°ν•˜λŠ” ν”„λ‘œν† νƒ€μž… 객체에 μ—°κ²°λ©λ‹ˆλ‹€.
  3. this 바인딩: μƒμ„±μž ν•¨μˆ˜ λ‚΄μ—μ„œ this ν‚€μ›Œλ“œλŠ” μƒˆλ‘œ μƒμ„±λœ 객체λ₯Ό κ°€λ¦¬ν‚€κ²Œ λ©λ‹ˆλ‹€.
  4. μƒμ„±μž ν•¨μˆ˜ μ‹€ν–‰: μƒμ„±μž ν•¨μˆ˜μ˜ μ½”λ“œκ°€ μ‹€ν–‰λ˜λ©°, μ΄λ•Œ this ν‚€μ›Œλ“œλ₯Ό 톡해 μƒˆ 객체의 속성과 λ©”μ„œλ“œκ°€ μ •μ˜λ©λ‹ˆλ‹€.
  5. μƒˆ 객체 λ°˜ν™˜: μƒμ„±μž ν•¨μˆ˜κ°€ λͺ…μ‹œμ μœΌλ‘œ λ‹€λ₯Έ 객체λ₯Ό λ°˜ν™˜ν•˜μ§€ μ•ŠλŠ” ν•œ, new ν‚€μ›Œλ“œλŠ” μƒˆλ‘œ μƒμ„±λœ 객체λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.
// μƒμ„±μž ν•¨μˆ˜ μ •μ˜
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    };
}

// new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ 객체 생성
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

person1.sayHello(); // Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // Hello, my name is Bob and I am 25 years old.

λ™μž‘ κ³Όμ •

  1. new Person('Alice', 30)λ₯Ό ν˜ΈμΆœν•˜λ©΄ μƒˆλ‘œμš΄ 빈 객체가 μƒμ„±λ©λ‹ˆλ‹€.
  2. 이 κ°μ²΄λŠ” Person ν•¨μˆ˜μ˜ ν”„λ‘œν† νƒ€μž… 객체에 μ—°κ²°λ©λ‹ˆλ‹€.
  3. Person ν•¨μˆ˜κ°€ 호좜되고, this ν‚€μ›Œλ“œλŠ” μƒˆλ‘œ μƒμ„±λœ 객체λ₯Ό κ°€λ¦¬ν‚€κ²Œ λ©λ‹ˆλ‹€.
  4. this.name = nameκ³Ό 같은 μ½”λ“œλ₯Ό 톡해 μƒˆλ‘œμš΄ 객체에 nameκ³Ό age 속성이 μΆ”κ°€λ©λ‹ˆλ‹€.
  5. μƒμ„±λœ 객체가 λ°˜ν™˜λ˜μ–΄ person1 λ³€μˆ˜μ— ν• λ‹Ήλ©λ‹ˆλ‹€.

이와 같은 λ°©μ‹μœΌλ‘œ new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λ™μΌν•œ ꡬ쑰λ₯Ό κ°€μ§€λŠ” μ—¬λŸ¬ 객체λ₯Ό κ°„νŽΈν•˜κ²Œ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.


03. new.target을 μ‚¬μš©ν•˜μ—¬ μ‹€μˆ˜ λ°©μ§€πŸ›‘οΈ

new.target은 ν•¨μˆ˜κ°€ new ν‚€μ›Œλ“œλ‘œ ν˜ΈμΆœλ˜μ—ˆλŠ”μ§€ ν™•μΈν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. new ν‚€μ›Œλ“œ 없이 호좜되면 undefinedκ°€ λ°˜ν™˜λ˜λ©°, 이λ₯Ό 톡해 쑰건식을 μ μš©ν•˜μ—¬ μ‹€μˆ˜λ₯Ό 방지할 수 μžˆμŠ΅λ‹ˆλ‹€.

function Teacher(name, subject) {
  if (!new.target) {
    return new Teacher(name, subject);
  }

  this.name = name;
  this.subject = subject;

  this.teach = function () {
    return `${this.name}κ°€ ${this.subject}λ₯Ό κ°€λ₯΄μΉ©λ‹ˆλ‹€.`;
  };
}

04. 예제 μ½”λ“œμ™€ μ„€λͺ…πŸ“

μ•„λž˜ μ½”λ“œλŠ” new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•œ κ²½μš°μ™€ μ‚¬μš©ν•˜μ§€ μ•Šμ€ κ²½μš°μ— λŒ€ν•œ μ˜ˆμ œμž…λ‹ˆλ‹€.

const bob = new Teacher("λ°₯", "μˆ˜ν•™");
console.log(bob); // Teacher { name: 'λ°₯', subject: 'μˆ˜ν•™', teach: [Function (anonymous)] }
console.log(bob.teach()); // "λ°₯이 μˆ˜ν•™μ„ κ°€λ₯΄μΉ©λ‹ˆλ‹€."

const bob2 = Teacher("λ°₯", "μˆ˜ν•™"); // μ‹€μˆ˜λ‘œ new ν‚€μ›Œλ“œ 빠뜨림
console.log(bob2); // Teacher { name: 'λ°₯', subject: 'μˆ˜ν•™', teach: [Function (anonymous)] }
console.log(bob2.teach()); // "λ°₯이 μˆ˜ν•™μ„ κ°€λ₯΄μΉ©λ‹ˆλ‹€."

μœ„ μ˜ˆμ œμ—μ„œ new ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šμ€ κ²½μš°μ—λ„ 쑰건식 덕뢄에 객체가 μ •μƒμ μœΌλ‘œ μƒμ„±λ©λ‹ˆλ‹€.


05. ν™”μ‚΄ν‘œ ν•¨μˆ˜μ™€ new ν‚€μ›Œλ“œπŸš«

ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” new ν‚€μ›Œλ“œμ™€ ν•¨κ»˜ μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€. μ΄λŠ” ν™”μ‚΄ν‘œ ν•¨μˆ˜κ°€ 일반 ν•¨μˆ˜μ™€λŠ” λ‹€λ₯΄κ²Œ λ™μž‘ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

const TeacherArrow = (name, subject) => {
  this.name = name;
  this.subject = subject;
};
const bob3 = new TeacherArrow("λ°₯", "μˆ˜ν•™"); // 였λ₯˜ λ°œμƒ

ν™”μ‚΄ν‘œ ν•¨μˆ˜λŠ” thisλ₯Ό 자체적으둜 λ°”μΈλ”©ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μƒμ„±μž ν•¨μˆ˜λ‘œ μ‚¬μš©ν•  수 μ—†μŠ΅λ‹ˆλ‹€.

μƒμ„±μž ν•¨μˆ˜μ™€ new ν‚€μ›Œλ“œλ₯Ό 적절히 μ‚¬μš©ν•˜λ©΄ JavaScriptμ—μ„œ 객체 생성 μ‹œ λ°œμƒν•  수 μžˆλŠ” μ‹€μˆ˜λ₯Ό 방지할 수 μžˆμŠ΅λ‹ˆλ‹€. new.target을 ν™œμš©ν•˜μ—¬ μ‹€μˆ˜λ₯Ό 쀄이고, ν™”μ‚΄ν‘œ ν•¨μˆ˜μ™€μ˜ 차이점을 λͺ…ν™•νžˆ μ΄ν•΄ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€.

728x90
λ°˜μ‘ν˜•