new 연산자는 생성자 함수를 가진 내장 객체 타입이나 사용자가 직접 정의한 객체 타입의 인스턴스(instance)를 생성할 때 사용하는 JavaScript의 핵심 문법입니다.
new 연산자를 사용하면 생성자 함수가 실행되면서 새로운 빈 객체가 만들어지고, 함수 내부의 this 키워드가 해당 객체를 가리키게 됩니다. 그 결과, 속성과 메서드를 가진 독립적인 객체 인스턴스가 반환됩니다.
new 연산자의 동작 원리
new 연산자가 실행되면 내부적으로 다음 과정이 순차적으로 일어납니다.
1. 빈 객체가 새롭게 생성됩니다.
2. 생성된 객체의 프로토타입(__proto__)이 생성자 함수의 prototype으로 설정됩니다.
3. 생성자 함수가 호출되며, this가 새로 생성된 객체에 바인딩됩니다.
4. 생성자 함수가 명시적으로 객체를 반환하지 않으면, 새로 만들어진 객체가 자동으로 반환됩니다.
예제 코드
다음은 new 연산자를 활용해 Person 생성자 함수로부터 객체를 생성하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript의 New 연산자</h1>
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 Person 생성자 함수로 person1 객체가 생성됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function Person(name, age, designation) {
this.name = name;
this.age = age;
this.designation = designation;
}
let person1 = new Person("Rohan Sharma", 19, "student");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "person1.name = " + person1.name + "<br>";
resEle.innerHTML += "person1.age = " + person1.age + "<br>";
resEle.innerHTML +=
"person1.designation = " + person1.designation + "<br>";
});
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 버튼과 안내 문구가 화면에 표시됩니다.
'클릭하세요' 버튼을 누르면 아래와 같이 person1 객체의 각 속성 값이 출력됩니다.
정리
new 연산자는 JavaScript에서 객체 지향 프로그래밍을 구현하는 기본 도구입니다. 생성자 함수와 함께 사용하면 동일한 구조를 가진 여러 객체를 손쉽게 만들 수 있으며, ES6에서 도입된 class 문법 역시 내부적으로는 동일한 방식으로 동작합니다. 따라서 new 연산자의 원리를 정확히 이해해 두면 클래스 기반 코드나 프로토타입 체인을 학습할 때 큰 도움이 됩니다.