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

자바스크립트 객체란?

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

객체 특징 정리

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

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

키-값 쌍 (Key-Value Pairs)

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

const person = {
  name: 'John', // 문자열 속성
  age: 25, // 숫자 속성
  isStudent: true, // 불리언 속성
  skills: ['JavaScript', 'CSS', 'HTML'], // 배열 속성
  address: {city: 'Example City', zipCode: '12345'} // 객체 속성
};

동적인 속성 (Dynamic Properties)

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

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

메서드 (Methods)

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

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

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

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

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

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

JSON 형식과 호환 (JSON-compatible)

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

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

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

객체 생성 방법

리터럴 표기법 (Literal Notation)

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

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

생성자 함수 (Constructor Function)

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

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');

Object 생성자

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

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

Object.create()

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

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

const child = Object.create(parent);

클래스 (Class)

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

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

객체 접근 방법

도트 표기법 (Dot Notation)

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

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

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

대괄호 표기법 (Bracket Notation)

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

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

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

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

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

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

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

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

Object.keys()

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

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

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

Object.values()

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

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

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

결론

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