자바 스크립트(js) 입문 공부 10. 생성자, 기본생성자(Date), 시간의 표시

 

생성자

생성자란 객체를 만들기 위한 함수를 의미합니다. 

자바 스크립트에는 두 가지 유형의 생성자가 있습니다. 

1. 일반 함수를 생성자로 사용하기  (직접 객체를 반환) 

2. 클래스 내부에 생성자를 포함시켜 사용하기  (return 문이 없어도 새로운 객체를 반환) 

function sayHello(){ 		// 일반 함수를 생성자로 사용하기 
    console.log("Hello!")
}

function Dog(){			//클래스 내부에 생성자를 포함시켜 사용하기 
    console.log("멍멍!")
}

 

두 가지의 함수에서는 차이가 있습니다. 

하나는 콘솔에 출력을 하기 위한 것이고, 하나는 Dog 라고 하는 새로운 객체를 만들기 위해서 만든 함수예요. 

function Dog(){
    console.log("멍멍!")
}
let d = new Dog() // 생성자에 정의된 내용을 토대로 객체 생성.

이렇게 생성자에 정의된 내용을 토대로 객체를 생성합니다. 

일반 함수를 new 를 사용하는지 여부에 따라 생성자를 구분합니다. 

생성자 함수는 new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작해서 새로운 객체를 반환하지 않습니다. 

객체에 타입이 적용되면 해당 객체는 그 타입의 인스턴스라고 부르며, new 키워드로 만들어진 객체는 해당 타입의 인스턴스라고 칭합니다. 

 

키워드 this

독립적인 개체는 자기 자신을 멤버로 사용할 수 있습니다.  

생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미합니다.  (자기 자신으로 생성자 함수를 호출) 

다음은 강아지를 표현하는 Dog 객체를 만들 때 사용하는 코드입니다. 

function Dog(){
this.name = "콩이"
this.breed "시츄"
}

 

일반적으로 생성자 함수명의 첫 글자는 대문자로 합니다. (필수가 아닌 관례입니다.) 

this 를 이용해서 해당 객체의 속성이나 메소드를 추가할 수 있습니다.

 

function Dog(n, b){
    this.dname
    this.breed
}

let d = new Dog("콩이", "두부") // 생성자에 정의된 내용을 토대로 객체 생성. 
console.log(d.dname)
console.log(d.breed)

 

---

기본 생성자

 

자바 스크립트에는 new 키워드를 붙여서 호출하면 객체가 만들어지는 함수들이 미리 정의되어 있습니다.

(표준 라이브러리)

그것들을 적절히 활용하면 유용한 기능을 손쉽게 구현할 수 있습니다. 

내장 생성자, 빌트인 객체(built-in object)라고도 한다. 자바스크립트는 처음부터 사용할 수 있는 기본 객체 및 생성자를 제공하는데, 그중 대표적인 내장 생성자가 바로 날짜와 시간에 대한 표현하는 Date 입니다.

우리는 이미 브라우저 자바스크립트에서 제공하는 window 객체를 사용해오고 있었는데, 이 또한 내장 객체라 할 수 있습니다.

 

Date

Date는 날짜와 시간을 처리하는 다양한 메소드가 정의된 내장 생성자입니다.

Date를 통한 객체 생성은 다음과 같은 형태로 이루어집니다. 

 

 

Date는 객체 생성 시에 new 연산을 해야하며, 생성자 함수에 인자를 전달하여 원하는 시간으로  객체를 초기화할 수 있습니다. 

Date 객체의 주요 메소드 

 

 

즉, Date 객체는 초기화 시에 정의된 날짜와 시간을 다루는 메소드들을 포함하고 있습니다. 

아래에서 예시와 함께 확인해보도록 할게요. 

 

/* 
생성자 함수 호출 시에는 앞에다 new 를 해야 객체가 생긴다. 
*/

const now = new Date()  
console.log(now)

이번에는 Date ()함수에 들어있는 각 메소드들을 사용해보도록 할게요.

 

/* 
생성자 함수 호출 시에는 앞에다 new 를 해야 객체가 생긴다. 
객체이므로 내부에 . 으로 접속할 수 있는 변수와 메소드가 들어있습니다. 
*/

const now = new Date()  

const year = now.getFullYear    
const month = now.getMonth + 1  // getMonth 는 0월 부터 시작하도록 설계가 되어 있어서 +1을 기재해주어야 정확한 월이 나온다. 
const date = now.getDate
const hour = now.getHours
const minute = now.getMinutes
const second = now.getSeconds

 

이렇게 작성했을 때 숫자들을 가져오면 1 2 3 4 5 6 7 8 9 10 11 12  의 숫자 기재 형식으로 가져오게 됩니다.  

자릿수를 맞추면 심미적으로 균일한 배치를 할 수 있기 때문에 가급적 맞춰주는 것이 좋겠죠. 

 

이것을 01 02 03 04 05 06 07 08 09 10 11 12 의 두 자리 숫자로 맞춰볼게요. 

삼항연산자를 이용해서 10보다 작으면 0을 앞에 추가하도록 만들어볼게요. 

삼항연산자의 사용법은 더보기를 참고해주세요. 

 

삼항 연산은 세 개의 항을 이용해 결과를 반환하는 연산입니다. 

보통 if문의 단축 형태로 이루어지기 때문에 삼항 조건 연산식이라고도 부릅니다. 

구문의 형태는 다음과 같습니다.

 

조건식? 참의결과 : 거짓의결과 

 

조건식 : 조건의 역할을 하는 표현식 (불리언)

참의결과 : 조건식의 결과가 참일경우 반환되는 결과 

거짓의결과 : 조건식의 결과가 거짓일 경우 반환되는 결과 

 

예를 들어 　　3>2 ? "참" : "거짓" 　　이라는 구문을 작성했을 경우 결과값은 "참" 이 출력됩니다.  

 

 

코드는 다음과 같습니다. 

 

const year = now.getFullYear()    
let month = now.getMonth() + 1  
let date = now.getDate()
let hour = now.getHours()
let minute = now.getMinutes()
let second = now.getSeconds()


month = month < 10 ? `0${month}` : `${month}`
date = date < 10 ? `0${date}` : `${date}`
hour = hour < 10 ? `0${hour}` : `${hour}`
minute = minute < 10 ? `0${minute}` : `${minute}`
second = second < 10 ? `0${second}` : `${second}`

 

 위 시간 표시를 스크립트에 표시해보도록 하겠습니다. 

creatElement 와 appendChild 로 html 에 출력까지 해봅니다. 

 

const now = new Date()  

const year = now.getFullYear()
let month = now.getMonth() + 1  
let date = now.getDate()
let hour = now.getHours()
let minute = now.getMinutes()
let second = now.getSeconds()


month = month < 10 ? `0${month}` : `${month}`
date = date < 10 ? `0${date}` : `${date}`
hour = hour < 10 ? `0${hour}` : `${hour}`
minute = minute < 10 ? `0${minute}` : `${minute}`
second = second < 10 ? `0${second}` : `${second}`

let h1 = document.createElement("h1")
h1.textContent = `${year}/${month}/${date} ${hour}:${minute}:${second}`

document.body.appendChild(h1)

생성자와 기본 생성자인 Date()에 대해서 알아보았습니다. 

 

이 다음으로는 정지된 시간을 흐를 수 있게 타이머 기능을 사용해서 디지털 시계를 만드는 것을 해보겠습니다.