JavaScript 객체의 확장, 직렬화, 메서드

📌 객체 확장

객체를 확장하는 방법은 새로운 프로퍼티를 추가하거나 기존 프로퍼티를 수정한다. 이를 위해 Object.assign 메서드를 사용할 수 있습니다.

const person = {
  name: 'Kim',
  age: 30
};

const additionalInfo = {
  job: 'Developer',
  city: 'Seoul'
};

const updatedPerson = Object.assign(person, additionalInfo);
console.log(updatedPerson);
// Output: { name: 'Kim', age: 30, job: 'Developer', city: 'Seoul' }

 

ES6부터는 스프레드 연산자('...')를 사용하여 객체를 확장할 수 있다.

const updatedPerson = { ...person, ...additionalInfo };
console.log(updatedPerson);
// Output: { name: 'Kim', age: 30, job: 'Developer', city: 'Seoul' }

 

 

📌 객체 직렬화

객체를 JSON 문자열로 변환하는 작업을 직렬화(Serialization)라고 한다. 이를 위해 JSON.stringify 메서드를 사용한다.

const person = {
  name: 'Kim',
  age: 30,
  job: 'Developer'
};

const jsonString = JSON.stringify(person);
console.log(jsonString);
// Output: '{"name":"Kim","age":30,"job":"Developer"}'

 

 

역직렬화(Deserialization)는 JSON 문자열을 다시 객체로 변환하는 작업으로, JSON.parse 메서드를 사용한다.

const jsonString = '{"name":"Kim","age":30,"job":"Developer"}';
const personObject = JSON.parse(jsonString);
console.log(personObject);
// Output: { name: 'Kim', age: 30, job: 'Developer' }

 

 

📌 객체 메서드

객체 메서드는 객체 내에서 정의된 함수이며 프로퍼티에 함수를 할당하여 정의할 수 있다.

const person = {
  name: 'Kim',
  age: 30,
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet(); // Output: Hello, my name is Kim

 

 

ES6부터는 메서드를 더 간결하게 정의할 수 있다.

const person = {
  name: 'Kim',
  age: 30,
  greet() { //ES6문법
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet(); // Output: Hello, my name is Kim

 

 

this 키워드

메서드 내부에서는 this 키워드를 사용하여 객체의 다른 프로퍼티에 접근할 수 있다.

const person = {
  name: 'Kim',
  age: 30,
  introduce() {
    console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old.`);
  }
};

person.introduce(); // Output: Hello, I'm Kim and I'm 30 years old.

 

 

화살표 함수 주의

객체 메서드를 정의할 때 화살표 함수는 this를 상위 스코프에서 상속받기 때문에 일반적으로 사용하지 않는 것이 좋다.

const person = {
  name: 'Kim',
  age: 30,
  greet: () => {
    console.log('Hello, my name is ' + this.name); // `this`는 상위 스코프를 참조합니다.
  }
};

person.greet(); // Output: Hello, my name is undefined