Categories: JavaScript

JavaScript 자바스크립트 객체(Object) 생성 및 접근 방법

자바스크립트 객체란?

자바스크립트 객체는 속성과 메서드를 포함하는 데이터 구조로, 프로그래밍에서 중요한 개념 중 하나입니다. 객체는 중괄호 {}를 사용하여 정의되며, 키(key)와 값(value)의 쌍으로 이루어진 속성들의 집합입니다.

객체 특징 정리

자바스크립트 객체는 동적이며 유연하게 속성을 추가하거나 삭제할 수 있습니다. 객체 간에는 상속을 통한 속성 및 메서드의 공유가 가능하며, 프로토타입 체인을 이용하여 객체 간의 관계를 형성할 수 있습니다.

또한 자바스크립트 객체의 속성은 일반적으로 정의된 순서대로 나열되지 않습니다. 객체는 키-값 쌍의 집합이기 때문에 내부적으로는 키에 의해 관리되지만, 객체의 속성이 정의된 순서는 보장되지 않습니다.

키-값 쌍 (Key-Value Pairs)

자바스크립트 객체는 키-값 쌍으로 구성되어 있습니다. 키는 속성을 식별하는 데 사용되는 문자열 또는 심볼이며, 값은 해당 속성에 대응하는 데이터입니다. 이러한 키-값 쌍은 객체의 기본 구조를 형성하며, 문자열, 숫자, 불리언, 배열, 객체, 함수 등 다양한 속성을 담을 수 있습니다.

동적인 속성 (Dynamic Properties)

객체는 실행 중에 동적으로 속성을 추가, 수정, 삭제할 수 있습니다. 이는 객체의 유연성을 높여주며, 프로그램의 실행 중에 객체의 구조를 조작할 수 있게 합니다.

JavaScript
const person = {};
person.name = 'John';     // 동적으로 속성 추가
person.age = 25;          // 동적으로 속성 추가
delete person.age;        // 동적으로 속성 삭제
JavaScript

메서드 (Methods)

객체 내에는 함수도 포함될 수 있습니다. 이러한 함수를 메서드라고 부르며, 객체와 관련된 동작을 수행합니다. 메서드 내에서 this 키워드를 사용하여 해당 메서드가 속한 객체를 참조할 수 있습니다.

JavaScript
const person = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name + '!');
  }
};
person.sayHello(); // 메서드 호출
JavaScript

프로토타입 기반 상속 (Prototype-based Inheritance)

자바스크립트는 프로토타입 기반 언어로, 객체 간에 상속 관계를 형성할 수 있습니다. 모든 객체는 다른 객체로부터 속성과 메서드를 상속받을 수 있습니다.

JavaScript
const parent = {
  greet: function() {
    console.log('Hello!');
  }
};

const child = Object.create(parent);
child.greet(); // 상속된 메서드 호출
JavaScript

JSON 형식과 호환 (JSON-compatible)

자바스크립트 객체는 JSON(JavaScript Object Notation) 형식과 호환됩니다. 이는 데이터 교환 형식으로 매우 흔하게 사용되며, 객체를 문자열로 변환하거나 문자열을 객체로 파싱할 수 있습니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer'
};

const jsonString = JSON.stringify(person); // 객체를 JSON 문자열로 변환
const parsedObject = JSON.parse(jsonString); // JSON 문자열을 객체로 파싱
JavaScript

객체 생성 방법

리터럴 표기법 (Literal Notation)

가장 일반적이고 간단한 방법 중 하나는 객체 리터럴 표기법을 사용하는 것입니다. {} 중괄호를 사용하여 객체를 정의합니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer',
  sayHello: function() {
    console.log('Hello!');
  }
};
JavaScript

생성자 함수 (Constructor Function)

생성자 함수를 사용하여 객체를 생성할 수 있습니다. 함수 내에서 this 키워드를 사용하여 객체의 속성을 정의합니다.

JavaScript
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHello = function() {
    console.log('Hello!');
  };
}

const person = new Person('John', 25, 'Developer');
JavaScript

Object 생성자

Object 생성자를 사용하여 빈 객체를 생성하고, 나중에 속성을 추가할 수도 있습니다.

JavaScript
const person = new Object();
person.name = 'John';
person.age = 25;
person.job = 'Developer';
person.sayHello = function() {
  console.log('Hello!');
};
JavaScript

Object.create()

다른 객체를 기반으로 새로운 객체를 생성하는 방법으로, 상속과 관련이 있습니다.

JavaScript
const parent = {
  greet: function() {
    console.log('Hello!');
  }
};

const child = Object.create(parent);
JavaScript

클래스 (Class)

ES6부터 도입된 클래스를 사용하여 객체를 생성할 수 있습니다. 클래스 내에서 constructor 메서드를 사용하여 속성을 초기화합니다.

JavaScript
class Person {
  constructor(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
}

const person = new Person('John', 25, 'Developer');
JavaScript

객체 접근 방법

도트 표기법 (Dot Notation)

가장 간단하고 일반적인 방법 중 하나로, 객체의 속성에 직접 도트(.)를 사용하여 접근합니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer'
};

console.log(person.name); // John
JavaScript

대괄호 표기법 (Bracket Notation)

대괄호([])를 사용하여 객체의 속성에 접근할 수 있습니다. 변수를 사용하여 동적으로 속성에 접근할 수도 있습니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer'
};

console.log(person['name']); // John

// 변수 사용
const propertyName = 'age';
console.log(person[propertyName]); // 25
JavaScript

객체 비구조화 할당 (Object Destructuring)

객체 비구조화 할당을 사용하여 객체의 속성을 추출해 변수에 할당할 수 있습니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer'
};

const { name, age } = person;
console.log(name); // John
console.log(age);  // 25
JavaScript

Object.keys()

Object.keys() 메서드를 사용하여 객체의 속성 이름들을 배열로 얻을 수 있습니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer'
};

const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'job']
JavaScript

Object.values()

Object.values() 메서드를 사용하여 객체의 속성 값들을 배열로 얻을 수 있습니다.

JavaScript
const person = {
  name: 'John',
  age: 25,
  job: 'Developer'
};

const values = Object.values(person);
console.log(values); // ['John', 25, 'Developer']
JavaScript

결론

자바스크립트 객체는 데이터와 기능을 하나로 묶어 다양한 형태의 정보를 표현하는 도구입니다. 키-값 쌍으로 이루어진 속성들이 객체의 핵심이며, 다양한 데이터 타입과 메서드를 포함하여 유연한 프로그래밍을 가능하게 합니다. 객체를 잘 활용하면 코드의 가독성을 높이고 유지보수성을 향상 시킬 수 있습니다.

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

2일 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

3일 ago

웹 서버(Web Server)와 WAS(Web Application Server) 알아보기

서론 현대 웹 애플리케이션 아키텍처에서 웹 서버(Web Server) 와 웹 애플리케이션 서버(WAS, Web Application Server)…

1개월 ago

HTTP 헤더(Header)란 무엇인가?

HTTP 헤더(Header)란? HTTP(Header)는 클라이언트와 서버 간에 교환되는 메타데이터로, 요청(Request)과 응답(Response)에 부가적인 정보를 실어 나르는 역할을…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 후기

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 4주차 회고

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago