Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

Joon's Space

[JavaScript] 생성자 함수 본문

Web/JS

[JavaScript] 생성자 함수

Happy Joon 2022. 7. 15. 18:07

생성자 함수

객체를 여러개 만들어야할 때 사용하는 함수

 

생성자 함수는 일반 함수와 크게 차이는 없지만 두 가지 관례를 따른다.

1. 함수의 첫 이름은 대문자로 시작한다.

2. 반드시 'new' 연산자를 붙여 실행한다. 

// 생성자 함수 이름 첫 글자는 대문자로
function User(name, age) {
  // this = {}
  this.name = name;
  this.age = age;
  // return this;
}

// new 연산자를 사용해서 호출
let user1 = new User("Mike", 30);
let user2 = new User("Jane", 22);
let user3 = new User("Tom", 17);

생성자 함수 작동 순서

new 함수명(); 으로 생성을 하면, 함수 내에 빈 객체를 만들고 this에 할당 한다. -> 함수를 실행하면서 this의 property(ex: name, age)를 추가한다. -> this를 반환한다. 

 

작동할때만 임시적으로 만들어지지만, 실제로 this = {}, return this는 코드에서 사용되지 않는다. 

 

생성자 함수 내 메소드 추가

function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
}

let user5 = new User("Han", 40);
user5.sayName(); // 'Han'

Java의 class 문법을 사용하는 것과 같이 메소드 sayName를 가진 객체를 만들어준다. 

 

생성자 함수는 유사한 객체를 여러 개 만들 때 유용하다.

자바스크립트는 언어 차원에서 다양한 생성자 함수를 제공하는데,  날짜를 나타내는 데 쓰이는 Date, 집합(set)을 나타내는 데 쓰이는 Set 등의 내장 객체는 이런 생성자 함수를 이용해 만들 수 있다. 

반응형

'Web > JS' 카테고리의 다른 글

[JavaScript] 변수, 호이스팅, TDZ  (0) 2022.07.15
[GraphQL] GraphQL 개념 (Query, Resolver, Schema, Mutation)  (0) 2021.08.29