반응형
JavaScript에서 객체를 다루는 방법에는 객체 리터럴(Object Literal), 객체 생성자(Constructor Function), JSON(JavaScript Object Notation)이 있다.
각 방법은 객체를 생성하고 데이터를 구조화하는 방식이 다르며, 목적에 따라 적절한 방법을 선택해야 한다.
객체
1. 객체 생성자 (Constructor Function)
특징
new
키워드를 사용하여 여러 개의 객체를 생성할 때 사용this
를 사용하여 동적으로 속성을 할당- 프로토타입을 활용하여 메모리를 절약 가능
사용 예시
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.greet = function() { console.log(`Hello, my name is ${this.name}`); }; } const alice = new Person("Alice", 25, "Developer"); const bob = new Person("Bob", 30, "Designer"); console.log(alice.name); // "Alice" console.log(bob.age); // 30 alice.greet(); // "Hello, my name is Alice"
여러 개의 객체를 쉽게 생성할 때 유용
동일한 구조의 객체를 반복적으로 만들 때 사용
메모리 최적화를 위해 프로토타입(Person.prototype
) 활용 가능
생성자의 프로토타입 활용 (메모리 절약)
Person.prototype.sayJob = function() { console.log(`I am a ${this.job}`); }; alice.sayJob(); // "I am a Developer" bob.sayJob(); // "I am a Designer"
프로토타입을 활용하면 메모리 절약 가능 (객체마다 동일한 메서드를 만들 필요 없음)
1. 객체 리터럴 (Object Literal)
특징
- 가장 간단한 객체 생성 방법
- 중괄호
{}
를 사용하여 직접 객체를 정의 key: value
형식으로 속성을 지정
사용 예시
const person = { name: "Alice", age: 25, job: "Developer", greet: function() { console.log(`Hello, my name is ${this.name}`); } }; console.log(person.name); // "Alice" console.log(person.age); // 25 person.greet(); // "Hello, my name is Alice"
객체를 간단히 정의하고 사용할 때 적합
코드가 간결하며 유지보수가 쉬움
메서드 정의도 가능 (greet()
)
3. JSON (JavaScript Object Notation)
특징
- 데이터를 저장하고 전송하기 위한 텍스트 기반의 객체 형식
- 키와 값이
"key": value
형태로 저장됨 JSON.stringify()
와JSON.parse()
를 사용하여 객체 <-> JSON 변환 가능
사용 예시
const jsonString = '{"name": "Alice", "age": 25, "job": "Developer"}'; const person = JSON.parse(jsonString); // JSON -> 객체 변환 console.log(person.name); // "Alice" console.log(person.age); // 25 const newJsonString = JSON.stringify(person); // 객체 -> JSON 변환 console.log(newJsonString); // '{"name":"Alice","age":25,"job":"Developer"}'
서버와 데이터를 주고받을 때 사용
객체를 직렬화하여 문자열로 변환 가능 (JSON.stringify()
)
문자열을 다시 객체로 변환 가능 (JSON.parse()
)
객체와 다르게 함수(function
), undefined
는 저장 불가
객체 리터럴, 객체 생성자, JSON 비교
구분 | 객체 리터럴 | 객체 생성자 | JSON |
---|---|---|---|
형태 | { key: value } |
function Constructor() { this.key = value; } |
'{"key": "value"}' (문자열) |
사용 목적 | 간단한 객체 생성 | 동일한 구조의 객체 여러 개 생성 | 데이터 저장 및 전송 |
메서드 포함 가능 | 가능 (this.method = function() ) |
가능 (this.method = function() ) |
불가능 (순수 데이터만 저장) |
객체 변환 가능 여부 | 직접 사용 | new 키워드 사용 |
JSON.parse() 로 객체 변환 |
사용 예 | 일반적인 객체 저장 | 여러 개의 객체 생성 | 서버와 데이터 교환 |
언제 어떤 방법을 사용해야 할까?
- 간단한 객체를 생성하고 사용할 때 → 객체 리터럴
{}
사용 - 동일한 패턴의 여러 개의 객체를 만들 때 → 객체 생성자
new Constructor()
- 서버와 데이터를 주고받을 때 → JSON (
JSON.stringify()
,JSON.parse()
활용)
각 방법의 특징을 이해하고 적절한 상황에 맞게 활용하면, 코드를 효율적으로 작성할 수 있다.
반응형
'Frontend > Javascript Typescript' 카테고리의 다른 글
[JavaScript] Math 객체와 주요 메서드 정리 (0) | 2025.03.20 |
---|---|
[Javascript] 페이지 로딩 후 스크립트 실행(defer, DOMContentloade, onload) (0) | 2025.03.20 |
[Javascript] 자주 쓰이는 배열 메서드(map(), filter() 등) (0) | 2025.03.19 |
[Javascript] Set, Map, 배열의 차이점과 활용법 (0) | 2025.03.19 |
[Javascript] Array.from() 활용하여 배열 생성하기 (0) | 2025.03.19 |