객체 기초

객체와 객체 메소드

자바스크립트에서는 객체(object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.이번에는 자바스크립트의 객체와 객체 메소드에 대해서 알아보자.

객체 생성

1-1 기본적인 객체 생성

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

1-2 생성자 합수를 사용한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자")
let person2 = new Person("홍길순", 28, "여자")

Person()을 이용해 person1과 person2를 생성, 생성자 함수를 이용하여 객체를 일괄적으로 생성 가능

2 객체 속성 접근

let person = {
 name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

객체 메소드

3-1 Object.keys() 메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

3-2 Object.values() 메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

3-3 Object.entries()메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);

console.log(entries); // [['name', '홍길동'], ['age', 30], [gender', '남자']]

객체의 속성 이름과 속성 값들을 2차원 배열로 반환한다.

3-4 Object.assign()메소드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

새로운 객체 newPerson을 만든다. -> 기존 객체를 복사하여 새로운 객체를 만든다.

3-5 객체 비교

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

JSON.stringify()함수를 사용하여 객체를 문자열로 반환한 후 문자열을 비교한다.

3-6 객체 병합

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

객체 병합을 할 때는 전개 연산자(...)를 사용한다.