Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- jsp
- Thymeleaf
- 배열
- rpa
- JDBC
- Oracle
- Eclipse
- mysql
- Array
- SpringBoot
- 조건문
- Controller
- jquery
- 상속
- Board
- API
- View
- Uipath
- 이클립스
- React
- Database
- spring
- string
- db
- html
- 자료구조
- 문자열
- Java
- Scanner
- MVC
Archives
- Today
- Total
유정잉
자바스크립트 new Object() vs 객체 리터럴({}) 본문
new Object()와 {}는 자바스크립트에서 객체를 생성하는 두 가지 방법 !
기능은 거의 똑같지만, 표현 방식과 실제 사용 시점에서 차이가 존재
✅ 1. 기본 형태 비교
방식 | 문법 | 설명 |
생성자 방식 | new Object() | Object 생성자를 이용해 객체 생성 |
리터럴 방식 | {} | 객체를 직접 표현하는 가장 간단한 방법 |
✅ 2. 실제 예제 비교
🔸 new Object() 사용
let person = new Object();
person.name = "유정";
person.age = 25;
🔸 객체 리터럴 {} 사용
let person = {
name: "유정",
age: 25
};
-> 결과적으로 둘 다 똑같은 객체를 만듦
console.log(person.name); // "유정"
console.log(person.age); // 25
✅ 3. 동적으로 속성 추가하기 (두 방식 모두 동일하게 가능)
let obj1 = new Object();
let obj2 = {};
obj1["city"] = "서울";
obj2["city"] = "부산";
console.log(obj1.city); // "서울"
console.log(obj2.city); // "부산"
✅ 4. 내부적으로 어떻게 작동할까?
let a = {}; // 리터럴 방식
let b = new Object(); // 생성자 방식
console.log(typeof a); // object
console.log(typeof b); // object
console.log(a.constructor === Object); // true
console.log(b.constructor === Object); // true
둘 다 결국 Object 생성자를 기반으로 만들어짐
✅ 5. 실무에서는 ?
{} | ✅ 대부분의 상황에서 사용 |
new Object() | ❌ 특별한 이유 없으면 안 씀 |
📌 이유:
- 코드가 짧고 가독성 좋음 ({}가 더 직관적임)
- JS 엔진이 최적화하기 쉬움
- 다른 기본형 생성자들과 헷갈릴 수 있음 (new String(), new Number() 등은 예외 많음)
🔚 결론 요약
비교 항목 | {} 객체 리터럴 | new Object() 생성 |
코드 간결함 | ✅ 간단함 | ❌ 길고 복잡 |
사용 빈도 | ✅ 거의 항상 | ❌ 특별한 경우에만 |
기능 차이 | ❌ 없음 | ❌ 없음 (기본 동작 동일) |
추천 여부 | ✅ | ❌ |
728x90
'개발자 공부 > ✏️ 자바스크립트 공부' 카테고리의 다른 글
자바스크립트 filter(), some(), find() 특징 및 차이점 (0) | 2025.05.08 |
---|---|
자바스크립트 .some() 과 .every() (0) | 2025.05.08 |
자바스크립트 == 와 === 차이 (0) | 2025.05.08 |
자바스크립트 객체 (1) | 2025.05.07 |
var let const 정의 및 차의점 (1) | 2025.05.02 |