JavaScript 생성자

Flex·2022년 3월 7일

HTML/CSS/JS

JavaScript 모음

목록 보기

6/8

JavaScript의 생성자 개념과 Collection들에 대해 알아봅니다.
Map, Set, Math, Date, N-Array 들이 내용에 포함됩니다.

🖋 생성자 함수

유사한 객체를 다중으로 만들 때 사용되는 함수입니다.
- 타 객체지향 언어에서의 class 개념과 유사합니다. (Java, C++ 등)
일반적으로 생성자 함수의 첫 글자는 대문자로 시작합니다.
생성자 함수로 객체 생성 시 new 연산자를 통해 객체를 생성합니다.

보통 다음과 같은 붕어빵 예제로 이해하기 쉽게 설명합니다.

// 빵틀
function fishBread(flavor, price) { // 맛과 가격을 입력받아 붕어빵 생성
  this.flavor = flavor;
  this.price = price;
  this.base = "flour"; // 베이스는 밀가루로 동일
}

// 붕어빵
const bread_1 = new fishBread("cream", 1200); // 1200원짜리 크림붕어빵
const bread_2 = new fishBread("redbean", 1000); // 1000원짜리 팥붕어빵
const bread_3 = new fishBread("milk", 1500); // 1500원짜리 우유붕어빵

new.target

new.target 속성(property)을 사용하여 new와 함께 호출했는지 확인할 수 있습니다.

[ new 가 없는 경우 생성자 작성법 ]

function User(name) {
  if (!new.target) {
    // new 와 함께 호출하지 않았으면
    return new User(name); // 객체 생성 후 return
  }
  this.name = name;
}

const user_1 = User("john"); // new 가 없어도 잘 생성된다.
console.log(user_1); // User { name: 'john' }
const user_2 = new User("john");
console.log(user_2); // User { name: 'john' }

🖋 Collection

구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간입니다.
JavaScript에서 제공하는 Collection은 다음과 같습니다.
1. Indexed Collection : Array, Typed Array
2. Keyed Collection : Object, Map, Set, ...

1. Map

다양한 자료형의 key를 허용하고, key-value 형태의 자료형을 저장할 수 있는 Collection 입니다.
Map은 Object와 대비하여 비교하면 다양한 key의 사용을 허용하고, 값의 추가/삭제 시 메서드를 통해 수행이 필요합니다.
대표 속성 및 메서드는 다음과 같습니다.
- 생성자: new Map()
- 개수 확인: Map.size
- 요소 추가: Map.set(key, value)
- 요소 접근: Map.get(key)
- 요소 삭제: Map.delete(key)
- 전체 삭제: Map.clear()
- 요소 존재 여부 확인: Map.has(key)
- 그 외: Map.keys(), Map.values(), Map.entires()

1-1. Map 반복문

Collection 객체인 Map이 가지고 있는 iterator 속성을 이용하여 for...of 구문을 통해 반복문을 수행할 수 있습니다.

1-2. Map <-> Object 변환

Object.entries(Object), Object.fromEntries(Map)를 통해 Map과 Object간 변환이 가능합니다.

💻 Map 예제 보러 가기

2. Set

value만을 저장하며 중복을 허용하지 않는 Collection입니다.
- Map과 달리 key와 value가 동일하게 취급됩니다.
대표 속성 및 메서드는 다음과 같습니다.
- 생성자: new Set()
- 개수 확인: Set.size
- 요소 추가: Set.add(value)
- 요소 삭제: Set.delete(value)
- 전체 삭제: Set.clear()
- 요소 존재 여부 확인: Set.has(key)
- 그 밖의 메서드: Set.keys(), Set.values(), Set.entires()

💻 Set 예제 보러 가기

3. Math

표준 Built-in(내장) 객체로써 수학적인 연산을 위한 속성값과 메서드를 제공하는 객체입니다.
Math는 생성자 함수가 아니고, 모든 속성과 메서드는 정적이기에 Math.function()으로 언제든 호출할 수 있습니다.
대표 속성 및 메서드는 다음과 같습니다.
- 오일러 상수(e): Math.E
- PI(π): Math.PI
- 절대값: Math.abs(x)
- 최대값: Math.max(x)
- 최소값: Math.min(x)
- 랜덤 난수 값: Math.random()
- 제곱과 제곱근: Math.pow(x,y), Math.sqrt(x)
- 소수점 처리: Math.round(x), Math.ceil(x), Math.floor(x)

3-1. 최대/최소값

배열을 인수로 받아 최대/최소를 산출하려면 apply 함수 혹은 스프레드 문법(three dots: ...)을 사용해야 합니다.
참고사이트 - MDN Math.max()

💻 Math 예제 보러 가기

4. Date

표준 Built-in 객체로써 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체입니다.
Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값으로 표현합니다.
생성자 및 대표 메서드는 다음과 같습니다.
- Date 객체 생성자: new Date()
- 현재 시간 기준 문자열: Date()
- 날짜 정보 얻기 (년/월/일): Date.getFullYear()|Month()|Date()
- 날짜 정보 얻기 (시/분/초/ms): Date.getHours()|Minutes()|Seconds()
- 날짜 정보 설정 (년/월/일): Date.setFullYear()|Month()|Date()
- 날짜 정보 설정 (시/분/초/ms): Date.setHours()|Minutes()|Seconds()
- 그 외 날짜 정보 얻기: Date.getDay()|Time()|TimezoneOffset()
- 그 외 날짜 정보 설정: Date.parse(string)

4-1. parse

날짜 정보를 설정합니다.
문자열 기반 날짜 정보 설정: Date.parse(YYYY-MM-DDTHH:mm:ss.sssZ)
- YYYY-MM-DD --> 날짜(년-월-일), "T" --> 구분 기호, HH:mm:ss.sss --> 시:분:초.밀리초
- 'Z'(option) --> 미 설정할 경우 현재 로컬 기준 UTC로, 설정할 경우 UTC+0 기준으로 시간을 설정합니다.

💻 Date 예제 보러 가기

💻 benchmark 코드 보러 가기