Date()와 new Date()의 차이 (Feat. getDay() 메소드)

자바스크립트 공부 도중 new가 대체 무엇인지에 대한 궁금증이 생겨 공부해보았다.

어려운 단어들이 많이 나와 완벽하게 이해를 하진 못했지만, 내 나름대로 이해한 것을 정리해보려 한다.

 

개발을 하다보면 동일한 객체를 여러 번 반복해서 만들어야 하는 경우가 생긴다.

이때 객체를 일일이 반복해서 만들려면 코드의 가독성이 떨어지고 유지보수가 힘들어진다.

 

그래서 우리는 생성자 함수라는 것을 사용한다.

생성자 함수는 객체를 생성하는 함수를 뜻한다.

 

그리고 이 생성자 함수를 사용할 때 반드시 필요한 것이 바로 new 연산자이다.

 

예시를 들어보겠다.

 

Date()는 일반 함수로 인자를 필요로 하지 않는다. 그저 현재 날짜와 시각을 나타낼 뿐이다.

 

var birthday = Date('2000-01-01');

document.write(Date() + '<br>');    //	Thu Apr 11 2024 21:42:24 GMT+0900 (한국 표준시)
document.write(Date(2000-01-01) + '<br>');	//	Thu Apr 11 2024 21:42:24 GMT+0900 (한국 표준시)
document.write(birthday + '<br>');	//	Thu Apr 11 2024 21:42:24 GMT+0900 (한국 표준시)

 

 

그러나 new Date()는 다르다.

일반 함수인 Date() 앞에 new 연산자가 붙게 되면 Date() 함수는 객체를 반복적으로 생성하는 '생성자 함수'가 된다.

 

더 이상 일반 함수가 아닌, '객체를 생성하는 생산자 함수'가 된다.

이것이 new 연산자의 역할이다.

 

예시는 아래와 같다.

 

var birthday = new Date('2000-01-01');

document.write(birthday + '<br>');	//	Sat Jan 01 2000 09:00:00 GMT+0900 (한국 표준시)

 

birthday라는 변수 안에 '생성자 함수가 생성한 객체'가 들어간 것이다.

이제 Date 함수의 인자에 각기 다른 날짜를 삽입할 수 있게 되었으므로, 각기 다른 날짜의 객체를 계속 생성할 수 있게 되었다.

 

상기는 Date()와 new Date()의 차이점을 설명하는 내용이었다.

 

다음은 new 연산자의 예시를 살펴보자.

 

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

var user1 = new Person('태성', '22', '남성');
var user2 = new Person('지연', '25', '여성');
var user3 = new Person('관우', '31', '남성');
      
document.write(user1.name + '<br>');	//	태성
document.write(user2.age + '<br>');	//	25
document.write(user3.sex + '<br>');	//	남성

 

 

name, age, sex를 인자로 가지는 Person이라는 일반 함수가 있다.

동시에 Person 함수는 name, age, sex라는 3개의 프로퍼티를 가지고 있다.

 

이 Person의 인자에 대입될 내용이 곧 Person 함수 내 프로퍼티에 대입될 것이다.

 

예를 들어 name 인자에 '태성'을 넣었다면, Person 함수의 'this.name' 프로퍼티 우측에 있는 'name'에 '태성'이 대입될 것이다.

 

this.로 시작하는 내용은 프로퍼티를 나타내는데, 이 프로퍼티는 꼭 인자와 동일한 이름을 가질 필요는 없으며,

프로퍼티를 전혀 엉뚱한 것으로 기재하여도 함수가 동작하는데 아무런 문제가 없다.

 

예를 들어, 'this.name = name'에서 프로퍼티는 'this.name'이고, 'name'은 인자인데,

'this.computer = name'이라고 기술하여도 함수가 동작하는데 아무런 문제가 없다.

 

다만 출력 시 'document.write(user1.name)'이 아닌 'document.write(user1.computer)'로 프로퍼티명을 바꿔주면 된다.

그리고 인자를 '태성'으로 대입하면 결과 역시 '태성'으로 정상 출력될 것이다.

 

하지만 이렇게 할 이유가 전혀 없으며, 매우 가독성을 해치는 코딩 방법이다. 그저 이론상 그렇다는 것을 설명하기 위함이었다.

 

---

 

궁금증

// 첫 번째 예시
var day = Date();
document.write(day + '<br>'); // Thu Apr 11 2024 23:16:14 GMT+0900 (한국 표준시)
      
// 두 번째 예시
var day = new Date();
document.write(day + '<br>'); // Thu Apr 11 2024 23:16:14 GMT+0900 (한국 표준시)
      
// 세 번째 예시
var day = new Date().getDay();
document.write(day + '<br>');	//	4
      
// 네 번째 예시
var day = Date().getDay();
document.write(day + '<br>');	//	값이 출력되지 않는다.
      
// 다시 첫 번째 예시
var day = Date();
document.write(day + '<br>'); // 첫 번째 예시에서는 잘 출력되던 값이 네 번째 예시 이후로 갑자기 출력되지 않는다.

 

궁금증은 두 가지다.

 

1. Date() 함수는 new를 붙이지 않아도 day 변수에 대입 가능했는데, 왜 Date().getDay()는 new를 붙여야만 day 변수에 대입할 수 있는가?

2. new를 붙이지 않고 day 변수의 값을 Date().getDay()로 초기화한 이후에는 왜 잘 출력되었던 코드도 출력되지 않는가?

 

---

 

코딩을 공부한 지 얼마 되지 않아 내용의 깊이와 이해도가 많이 떨어질 수 있습니다.

본문에 대한 피드백 환영합니다.