오브젝트란?
-
오브젝트란 자바스크립트의 데이터 타입중의 하나로 관련된 데이터와 기능들의 집합이라고 볼 수 있다.
-
오브젝트는 키(property) 와 값(value)로 구성된다.
-
거의 모든 자바스크립트의 오브젝트는
Object클래스의 인스턴스 이다. -
대괄호 또는 new 키워드로 만들 수 있다
1. Literals and properties
const obj1 = {} // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax
New 키워드를 사용하면 오브젝트의 생성자가 호출이 된다.
자바스크립트는 동적타입언어이므로 오브젝트가 선언된 이후에 새로이 특성을 추가할 수 있다.
특성의 삭제 또한 가능하다!
const person = { name: 'kim', age: 20 }
person.gender = 'Male'
console.log(person.gender) // 'Male'
delete person.gender
console.log(person.gender) // undefined
2. Computed properties
변수에 접근하기 위해서는 . 또는 []로 접근이 가능하다.
const person = { name: 'kim', age: 20 }
console.log(person.name)
console.log(person['name']) // key는 항상 String타입으로 되어야 한다
person['gender'] = 'Male'
console.log(person.gender) // 'Male'
.키워드는 작성하는 순간 해당 키워드에 대한 값을 바로 가져온다[]키워드(computed property)는 정확하게 어떤 속성을 가져와야 할 지 모를 때 사용한다.
function printValue(obj, key) {
console.log(obj.key) // obj에 key라는 속성이 있는지 찾아봄. 없음.
}
printValue(person, 'name') // undefined
function printValue(obj, key) {
console.log(obj[key]) // key에 name이 들어가므로 찾아줌
}
printValue(person, 'name') // 'kim'
3. Property value shorthand
const person1 = { name: 'Alice', age: 1}
const person2 = { name: 'Bob', age: 2}
const person3 = { name: 'Charlie', age: 3}
const person4 = makePerson('Dean', 4)
console.log(person4) // {name: 'Dean', age: 4}
function makePerson(name, age) {
return {
name,
age
}
}
4. Constructor function
function Person(name, age) {
// this = {}
this.name = name
this.age = age
// return this
}
const person4 = Person('Evan', 5)
console.log(person4) // {name: 'Evan', age: 5}
5. In operator: property existence check
// 해당 property가 object 안에 있는지 검사
console.log('name' in person1) // true
console.log('school' in person2) // false
6. for…in vs for…of
const kim = {name:'jin', age: 1, hasJob: false}
// for...in
for (key in kim) {
console.log(key)
} // name, age, hasJob
// for...of
for (value of iterable) {}
const array = [1, 2, 3, 4, 5]
for (value of array) {
console.log(value)
} // 1, 2, 3, 4, 5
7. Fun cloning
// Object.assign(dest, obj1, obj2, obj3...)
const user = { name: 'kim', age: 1}
const user2 = user
user2.name = 'bob'
console.log(user.name) // 'bob'
// user와 user2가 같은 데이터를 바라보고 있기에 한쪽에서 수정하면 연결된 변수 전부 영향을 받는다
// old way
const user3 = {}
for (key in user) {
user3[key] = user[key]
}
const user4 = {}
Object.assign(user4, user)
const user5 = Object.assign({}, user)
// .assign은 동일한 속성이라면 뒤에 있는 속성의값으로 업데이트 한다
const fruit1 = { color: 'red' }
const fruit2 = { color: 'blue', size: 'big' }