[JS] 1-3) 객체와 객체 메소드, 그리고 객체를 순회하는 방법

 

자바스크립트에서 객체란?

객체(Object)는 자바스크립트에서 키(key)와 값(value)으로 데이터를 저장하는 데이터 구조이다. 객체는 여러 속성(Property)을 가질 수 있으며, 각 속성은 고유한 키를 통해 접근할 수 있다.

 

1. 객체 생성

1-1. 기본적인 객체 생성

let student = {
    name: "John",
    age: 17,
    gender: "남자"
};

위의 예제에서는 객체 student을 생성한다. 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하고, 각 속성과 값은 쉼표(,)로 구분한다.

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

function Student(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let student1 = new Student("홍길동", 30, "남자");
let student2 = new Student("홍길순", 25, "여자");

생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있다.

 

2. 객체 요소 접근

객체의 속성에 접근하는 방법은 두 가지가 있다

let student = {
    name: "John",
    age: 17
};

// 1. 점 표기법(dot notation)
console.log(student.name);  // "John"
console.log(student.age);   // 17

// 2. 대괄호 표기법(bracket notation)
console.log(student["name"]);  // "John"
console.log(student["age"]);   // 17

• 점 표기법은 객체의 속성에 접근할 때 가장 많이 사용하는 방법이다. 객체명.속성명 형태로 접근한다.

• 대괄호 표기법은 속성명이 문자열이거나, 동적으로 속성명을 결정해야 할 때 유용하다. 예를 들어, 속성명이 변수로 주어질 때 사용한다..

3. 객체 메소드

자바스크립트는 객체를 다루기 위한 다양한 메소드를 제공한다. 이 메소드들은 객체의 속성을 다루거나, 객체를 조작할 때 매우 유용하다.

3-1. Object.keys()

객체의 모든 키(속성)를 배열로 반환한다.

let student = {
    name: "John",
    age: 17,
    grade: "11th"
};

let keys = Object.keys(student);
console.log(keys);  // ["name", "age", "grade"]

3-2. Object.values()

객체의 모든 값을 배열로 반환한다.

let student = {
    name: "John",
    age: 17,
    grade: "11th"
};

let values = Object.values(student);
console.log(values);  // ["John", 17, "11th"]

3-3. Object.entries()

객체의 키-값 쌍을 2차원 배열 형태로 반환한다. 각 배열 요소는 [키, 값]의 형태이다.

let student = {
    name: "John",
    age: 17,
    grade: "11th"
};

let entries = Object.entries(student);
console.log(entries);
// [["name", "John"], ["age", 17], ["grade", "11th"]]

3-4. Object.assign()

하나 이상의 소스 객체에서 타겟 객체로 속성을 복사합니다. 타겟 객체가 반환된다.

타겟 객체와 소스 객체의 속성이 동일한 키를 가지는 경우, 타겟 객체의 속성이 덮어쓰여진다

let target = {name: "Jane"};
let source = {age: 18, grade: "12th"};

let student = Object.assign(target, source);
console.log(student);
// {name: "Jane", age: 18, grade: "12th"}

 

3-7. Object.hasOwnProperty()

특정 속성이 객체에 존재하는지 확인하고, 존재하면 true, 그렇지 않으면 false를 반환한다.

javascript코드 복사
let student = {
    name: "John",
    age: 17
};

console.log(student.hasOwnProperty("name"));  // true
console.log(student.hasOwnProperty("grade"));  // false

 

8. 객체 비교

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() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 한다.

9. 객체 병합

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

병합 시 같은 키가 여러 번 등장할 경우, 가장 나중에 병합된 객체의 값이 최종적으로 사용된다.

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

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

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

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

 

---

4. 객체를 순회하는 방법

객체의 속성들을 순회하면서 각 속성에 대해 작업을 수행할 수 있는 방법은 여러 가지가 있다.

1. for...in

for...in은 객체의 키를 순회하는 반복문이다.

객체의 모든 속성을 순회하면서 키와 값을 다룰 때 유용하다.

let student = {
    name: "John",
    age: 17,
    grade: "11th"
};

for (let key in student) {
    console.log(key, student[key]);
}
// "name John"
// "age 17"
// "grade 11th"