6.1 객체 생성하기
객체는 JavaScript에서 가장 중요한 데이터 타입 중 하나로, 데이터를 저장하고 관리하는 데 자주 사용돼. 객체란 속성들의 모음이고, 각 속성은 키(이름)와 값으로 구성돼. 이번 강의에서는 객체를 생성하고, 그 속성과 메서드에 접근하는 방법을 다뤄볼 거야.
1. 객체 리터럴
JavaScript에서 객체를 생성하는 가장 일반적인 방법은 객체 리터럴을 사용하는 거야.
다음 예제에서는 person 객체를 만들었고, 네 가지 속성(name, age, isStudent, greet)이 포함되어 있어.
let person = {
name: 'John',
age: 30,
isStudent: false,
greet: function() {
return 'Hello!';
}
};
2. Object 생성자
객체는 Object() 생성자를 사용해서도 만들 수 있어.
이 방법은 객체 리터럴을 사용하는 것과 동일한 결과를 내지만, 문장이 더 길어:
let person = new Object();
person.name = 'John';
person.age = 30;
person.isStudent = false;
person.greet = function() {
return 'Hello!';
};
3. 생성자 함수
생성자 함수는 동일한 속성과 메서드를 가진 여러 객체 인스턴스를 생성할 수 있어.
이 예제에서 Person() 생성자 함수는 john과 jane 객체를 생성하는 데 사용돼:
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function() {
return 'Hello!';
};
}
let john = new Person('John', 30, false);
let jane = new Person('Jane', 25, true);
4. Object.create() 메서드
Object.create() 메서드는 지정된 프로토타입과 속성을 가진 새 객체를 만들어.
이 예제에서 john 객체는 personPrototype 프로토타입을 기반으로 생성돼:
let personPrototype = {
greet: function() {
return 'Hello!';
}
};
let john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
john.isStudent = false;
6.2 속성과 메서드에 접근하기
1. 점(.)을 이용한 접근
객체의 속성과 메서드에 접근하는 가장 일반적인 방법은 점(.) 연산자를 사용하는 거야:
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person.name); // 출력: John
console.log(person.age); // 출력: 30
console.log(person.greet()); // 출력: Hello!
2. 대괄호([])를 이용한 접근
객체의 속성은 대괄호를 사용하여도 접근할 수 있어. 이 방법은 속성 이름이 변수에 저장되어 있거나, 공백 또는 특수 문자가 포함된 경우에 유용해:
let person = {
'first name': 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person['first name']); // 출력: John
console.log(person['age']); // 출력: 30
let propertyName = 'greet';
console.log(person[propertyName]()); // 출력: Hello!
3. 속성 수정 및 추가
객체의 속성은 언제든지 수정되거나 추가될 수 있어:
let person = {
name: 'John',
age: 30
};
// 기존 속성 수정
person.age = 31;
console.log(person.age); // 출력: 31
// 새로운 속성 추가
person.isStudent = false;
console.log(person.isStudent); // 출력: false
4. 속성 삭제
객체의 속성은 delete 연산자를 사용해 삭제할 수 있어:
let person = {
name: 'John',
age: 30,
isStudent: false
};
delete person.isStudent;
console.log(person.isStudent); // 출력: undefined
6.3 객체 속성 반복
1. for...in 반복문
for...in 반복문을 사용하면 객체의 모든 열거 가능한 속성을 반복할 수 있어:
let person = {
name: 'John',
age: 30,
isStudent: false
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// 출력:
// name: John
// age: 30
// isStudent: false
2. Object.keys() 메서드
Object.keys() 메서드는 객체의 모든 열거 가능한 속성을 배열로 반환해:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let keys = Object.keys(person);
console.log(keys); // 출력: ['name', 'age', 'isStudent']
3. Object.values() 메서드
Object.values() 메서드는 객체의 모든 열거 가능한 속성 값을 배열로 반환해:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let values = Object.values(person);
console.log(values); // 출력: ['John', 30, false]
4. Object.entries() 메서드
Object.entries() 메서드는 모든 열거 가능한 속성의 [키, 값] 쌍 배열을 반환해:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let entries = Object.entries(person);
console.log(entries); // 출력: [['name', 'John'], ['age', 30], ['isStudent', false]]
6.4 속성 존재 여부 확인
1. in 연산자
in 연산자는 객체에 속성이 있는지 확인해:
let person = {
name: 'John',
age: 30
};
console.log('name' in person); // 출력: true
console.log('isStudent' in person); // 출력: false
2. hasOwnProperty() 메서드
hasOwnProperty() 메서드는 객체가 특정 속성을 자체적으로 소유하고 있는지(상속된 것이 아닌지) 확인해:
let person = {
name: 'John',
age: 30
};
console.log(person.hasOwnProperty('name')); // 출력: true
console.log(person.hasOwnProperty('isStudent')); // 출력: false
GO TO FULL VERSION