자바스크립트에서 객체란?
객체(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"
'JavaScript' 카테고리의 다른 글
| [JS] 반복문 (2) | 2024.09.08 |
|---|---|
| [JS] Map 사용 방법 (1) | 2024.09.08 |
| [JS] 1-1) JS 언어의 특징과 역사 (1) | 2024.09.02 |
| [JS] 헷갈리는 this 정리 (this 사용 방법) (0) | 2024.08.01 |
| [JS] 화살표 함수 쓰는 방법과 사용 이유 (0) | 2024.07.31 |
