자바스크립트 객체 생성자 함수란?

2020. 10. 24. 18:01·개발/JavaScript

객체 생성자 함수란?

객체 생성자 함수란 객체의 인스턴스를 생성하는 함수입니다. new 연산자를 사용해 다음과 같이 빈 객체를 생성할 수 있습니다.

const car = new Object();

이처럼 생성자 함수를 통해 생성한 객체를 인스턴스라 합니다. 다음과 같이 생성한 인스턴스에 프로퍼티나 메소드를 추가할 수도 있습니다.

car.name = 'K5';
car.start = function () {
    console.log('Starting up the engine');
};

console.log(car.start()); // Starting up the engine.

자바스크립트에는 객체 뿐만 아니라 문자열, 숫자, 불리언, 함수 등을 생성자 함수를 통해 생성할 수 있습니다.

생성자 함수를 사용하는 이유

객체를 생성할 때는 생성자 함수보다 객체 리터럴을 사용하는 것이 보다 편리합니다. 그러나 생성자 함수는 다음과 같이 동일한 프로퍼티와 메소드를 갖는 객체를 생성할 때 유용하게 사용될 수 있습니다. 아래의 예시에서처럼 생성자 함수에서 this 는 생성자 함수가 생성할 인스턴스를 가리킵니다.

function Car(number) {
  this.number = number
  this.name = 'K5';
  this.start = function () {
    console.log(`${number}: Starting up the engine`);
  }
}

const car1 = new Car('AE1342');
const car2 = new Car('FE3412');

console.log(car1); // car { number: 'AE1342', name: 'K5', start: [Function] }
console.log(car2); // car { number: 'FE3412', name: 'K5', start: [Function] }

console.log(car1.start()); // AE1342: Starting up the engine
console.log(car2.start()); // FE3412: Starting up the engine

생성자 함수는 보통 함수 이름을 '명사'로 지으며, 첫 글자를 대문자로 표기합니다.

마치며

자바스크립트 객체 생성자 함수는 동일한 프로퍼티와 메소드를 갖는 함수를 생성할 때 유용하게 사용할 수 있습니다. new 연사자를 사용하지 않을 경우, 해당 함수는 일반 함수로 작동합니다.

'개발 > JavaScript' 카테고리의 다른 글

자바스크립트 this 의 개념과 바인딩 설명  (0) 2020.10.25
Ajax란 무엇일까?  (0) 2020.10.20
자바스크립트 세미콜론은 언제 사용할까?  (0) 2020.10.17
'개발/JavaScript' 카테고리의 다른 글
  • 자바스크립트 call, apply, bind 설명
  • 자바스크립트 this 의 개념과 바인딩 설명
  • Ajax란 무엇일까?
  • 자바스크립트 세미콜론은 언제 사용할까?
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발 N
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git N
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
자바스크립트 객체 생성자 함수란?
상단으로

티스토리툴바