왕진 블로그
JavaScript 객체 생성 —
new Date · String 완전 정리
이번 코드는 자바스크립트에서 new 키워드로 객체를 직접 만들어보는 가장 기본적인 예제다. 이미 만들어져 있는 Date, String이라는 두 가지 내장 클래스를 이용해서 "현재 시각 객체"와 "문자열 객체"를 각각 만들고, 그 객체들이 가진 메소드와 속성을 꺼내 쓰는 흐름을 담고 있다.
객체 생성 및 활용
현재 시간 : 2026. 7. 4. 오후 3:32:10
mystr의 내용 : 자바스크립트 공부하기
mystr의 길이 : 11
toLocaleString()이 만들어내는 문자열은 브라우저를 실행하는 시점의 실제 시각이라서 매번 값이 다르다. 위 화면은 2026년 7월 4일 오후 3시 32분에 실행했다고 가정한 예시 출력이다.
자바스크립트에는 Date, String처럼 "이걸로 객체를 찍어내라"는 용도로 미리 만들어진 함수들이 있다. 이런 함수를 생성자(Constructor)라고 부르고, 그 앞에 new를 붙이면 자바스크립트 엔진이 빈 객체를 하나 만든 다음 생성자 함수 안의 초기화 코드를 실행해서 그 객체를 채워준다. new 없이 Date()만 호출하면 객체가 아니라 그냥 현재 시각을 나타내는 문자열 한 줄이 돌아온다 — 완전히 다른 결과다.
new 생성자이름() = "이 설계도(생성자)대로 객체 하나를 새로 찍어내라"는 뜻. 괄호는 생성자에게 필요한 재료(인자)를 넘겨주는 자리다.겉으로는 한 줄이지만 new Date()가 실행되는 순간 내부적으로는 세 단계가 순서대로 일어난다. 이 흐름을 알면 왜 new 없이 호출했을 때 결과가 완전히 달라지는지 이해할 수 있다.
"현재 시각"은 연도·월·일·시·분·초가 한 덩어리로 묶여야 의미가 있는 값이다. 그래서 자바스크립트는 시간을 숫자 하나가 아니라 Date라는 객체로 표현한다. new Date()를 실행하는 순간 컴퓨터의 현재 시각이 통째로 담긴 객체가 만들어지고, 그 안에는 연·월·일을 꺼내는 메소드들이 잔뜩 들어있다. toLocaleString()은 그중에서도 그 값을 사람이 읽기 좋은 문자열(예: "2026. 7. 4. 오후 3:32:10")로 한 번에 바꿔주는 메소드다.
원본 코드의 주석처럼 let today = new Date();가 실행되면 "today"라는 이름표가 새로 만들어진 객체에 붙는다고 이해하면 쉽다. 정확히는 today라는 변수 안에 객체 그 자체가 아니라 그 객체가 있는 위치(참조)가 저장되지만, 초보 단계에서는 "이제부터 today는 그 객체를 가리키는 이름이다" 정도로 이해해도 충분하다. 그래서 이후 코드에서 today.toLocaleString()처럼 변수 이름 뒤에 점(.)을 찍어서 그 객체의 메소드나 속성에 바로 접근할 수 있는 것이다.
today.toLocaleString() = "today 객체 안의 toLocaleString을 실행해라."
자바스크립트는 <script> 태그 안의 코드를 원칙적으로 위에서 아래로 한 줄씩 순서대로 실행한다. 이번 코드가 브라우저 안에서 어떤 순서로 처리되는지 단계별로 정리하면 다음과 같다.
let 선언은 완전히 독립적이다. today를 만드는 코드가 mystr에 아무 영향을 주지 않는다 — 각 객체는 자신만의 데이터를 가진 별개의 덩어리이기 때문이다.맞다. 하지만 자바스크립트의 문자열은 평소에는 원시값(primitive)이라는 가벼운 형태로 존재한다. 그런데 new String("자바스크립트 공부하기")처럼 new를 붙여서 만들면, 같은 글자 내용을 담고 있지만 훨씬 더 무거운 객체 형태의 문자열이 만들어진다. 겉보기 출력은 똑같아 보여도 내부적으로는 "그냥 텍스트 값"과 "메소드·속성을 가진 객체"라는 차이가 있다. 이 코드에서는 일부러 객체로 만들어서 그 객체가 가진 length 속성을 꺼내 쓰는 방법을 연습하고 있다.
→ 가볍고 빠른 텍스트 값 그 자체
→ 메소드·속성을 가진 객체 껍데기 안에 텍스트가 들어있음
mystr.length는 mystr 안에 들어있는 문자열의 글자 수를 알려준다. "자바스크립트 공부하기"는 자·바·스·크·립·트·(공백)·공·부·하·기, 이렇게 11글자이므로 mystr.length는 11이 출력된다. 중요한 건 이 숫자를 개발자가 직접 세서 입력한 게 아니라는 점이다. 문자열 객체가 만들어지는 순간 자바스크립트 엔진이 내부적으로 글자 수를 세어서 length라는 이름의 값으로 자동으로 채워 넣는다.
원본 코드의 마지막 줄 mystr.length = 10;이 주석 처리되어 있는 이유가 바로 여기 있다. 우리가 평소에 쓰는 대부분의 속성은 mystr.color = "red"처럼 원하는 값을 자유롭게 넣고 바꿀 수 있는 일반 속성이다. 하지만 length는 사람이 값을 넣는 속성이 아니라, "지금 문자열이 몇 글자인가"를 실시간으로 계산해서 보여주기만 하는 읽기 전용(read-only) 속성이다. 그래서 mystr.length = 10;처럼 억지로 값을 넣으려고 하면 그 대입은 무시되거나(비엄격 모드), strict 모드에서는 TypeError로 막힌다 — 어느 쪽이든 실제 글자 수가 10으로 바뀌는 일은 없다.
이번 코드에는 메소드(toLocaleString(), write())와 속성(length)이 함께 나온다. 겉모습으로 구분하는 가장 쉬운 방법은 괄호 () 의 유무다. 메소드는 "어떤 동작을 실행해달라"는 요청이라서 반드시 괄호를 붙여 호출하고, 속성은 이미 객체 안에 저장돼 있는 값이라서 이름만 쓰면 바로 그 값이 나온다.
| 구분 | 예시 | 의미 |
|---|---|---|
| 메소드 | today.toLocaleString() |
동작을 실행하라는 요청 (괄호 필수) |
| 메소드 | document.write() |
화면에 출력하라는 요청 (괄호 필수) |
| 속성 | mystr.length |
이미 저장된 값을 꺼내옴 (괄호 없음) |
- 괄호 () 가 붙어있다 → 메소드, "실행"하는 것
- 괄호 없이 이름만 있다 → 속성, "값"을 읽는 것
- 둘 다
객체이름.이름형태로 접근하는 건 동일하다
| 실수 | 증상 | 해결 |
|---|---|---|
new 없이 String() 호출 |
객체가 아니라 원시 문자열이 만들어져 의도와 다르게 동작 | 객체가 필요할 때만 명확히 new String(...) 사용 |
mystr.length = 10;처럼 속성에 강제 대입 |
값이 반영되지 않거나 strict 모드에서 오류 발생 | length는 읽기 전용 — 문자열 자체를 새로 만들어서 바꾸기 |
메소드를 속성처럼 괄호 없이 사용 (today.toLocaleString) |
값이 아니라 함수 코드 자체가 출력됨 | 실행이 필요한 메소드는 반드시 () 붙이기 |
| document.write()를 페이지 로드 후에 호출 | 기존 페이지 내용이 통째로 지워짐 | 학습용 예제 외에는 innerText/innerHTML 등으로 대체 |
| toLocaleString() 결과가 매번 같을 거라고 착각 | 실행할 때마다 다른 시각이 출력돼 헷갈림 | 실행 시점의 실제 현재 시각이 반영된다는 점을 이해하기 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript Array 메서드 — concat·join·reverse·sort 완전 정리 (0) | 2026.07.04 |
|---|---|
| JavaScript 배열 — [] 리터럴과 인덱스 완전 정리 (0) | 2026.07.03 |
| JavaScript 전역 함수 — eval · parseInt · isNaN 완전 정리 (0) | 2026.07.03 |
| JavaScript 함수 — 선언·파라미터·return 완전 정리 (0) | 2026.07.03 |
| JavaScript break · continue — 반복 제어 완전 정리 (0) | 2026.07.03 |
댓글