본문 바로가기
Frontend/Javascript Typescript

[Javascript] 객체 생성자, 객체 리터럴, JSON

by 디스코비스킷 2025. 3. 20.
반응형

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() 활용)

각 방법의 특징을 이해하고 적절한 상황에 맞게 활용하면, 코드를 효율적으로 작성할 수 있다.

반응형

최근댓글

최근글

© Copyright 2024 ttutta