JavaScript 공부 [6. 오브젝트 다루기]

Object 기본 형태

Object는 key와 value의 집합체.
object = {key: value}

Object생성방법
const obj1 = {}				// object literal syntax
const obj2 = new Object()		// object constructor syntax

Object 기본 예시
const minbro = {name: 'minbro', age: 26}

자바스크립트는 Dynamically typed language(동적으로 타입이 결정되는 언어)이기 때문에 다음과 같은 작업을 할 수 있다.

앞선 기본 예시 object인 minbro에 새로운 property가 추가 및 가능하다.
minbro.hasJob = true
console.log(minbro.hasJob)		// true

delete minbro.age
console.log(minbro.age)			// undefined

---

Computed properties

object의 데이터를 접근하는 방법이 여러가지가 있다.

console.log(minbro.name)
console.log(minbro['name'])		// key를 string타입으로 입력해야함!

minbro['age'] = 26
console.log(minbro.age)			// 26 (위에서 지웠던 데이터가 다시 선언되었다.)

따라서 실시간으로 key 값을 받아올때 유용하다.

function printValue(obj, key) {
	console.log(obj.key)
}
printValue(minbro, 'name')		// undefined

하지만 computed property를 사용하면,
function printValue(obj, key) {
	console.log(obj[key])
}
printValue(minbro, 'name')		// minbro

---

Property value shorthand

이런식으로 object를 빠르게 만들 수도 있다.

const person1 = {name: 'michael', age: 4}
const person2 = {name: 'candice', age: 34}
const person3 = makePerson('minbro', 26)
function makePerson(name, age) {
	return {name, age}
}

---

Constructor function

생성자를 만드는 함수 예시

function Person(name, age) {
    // this = {}
    this.name = name
    this.age = age
    // return this
}

const person4 = new Person('harry', 19)

for..in vs for..of

for in 을 사용하면 해당 object의 key가 무엇이 있는지 알 수 있다. (key 사용)

for (key in minbro) {
	console.log(key)
}
// name
// age
// hasJob

for of 를 사용하면 해당 array의 value값을 순차적으로 알 수 있다.

const array[1, 2, 4]
for (value of array) {
	console.log(value)
}
// 1
// 2
// 4

Cloning

object를 같이 바라보는것과 복사하는것은 다르다.

const user1 = {name: 'steve', age: 42}
const user2 = user1
user2.name = 'test'
console.log(user1) 			// {name: 'test', age: 42}
console.log(user2) 			// {name: 'test', age: 42}

const user3 = {name: 'mike', age: 13}
const user4 = Object.assign({}, user3)	// {}라는 빈 object에 user3를 복사한다!
user4.name = 'hello'
console.log(user3) 			// {name: 'mike', age: 13}
console.log(user4) 			// {name: 'hello', age: 13}