Object

객체란

• 사물을 인식한다는 것은 사물의 특징을 인식하는 것인데, 이러한 특징을 개발에선 `속성 = proprerty' 이라 한다.
• 사물과의 상호작용을 통해 사물의 속성을 변경할 수 있는데 이러한 상호작용을 동작 = method이라 부른다.
  

객체 생성 방법

• 일반적으로 객체 생성은 객체 리터럴 방식을 많이 사용하지만 각각의 상황에 따라 클래스를 이용한 객체 생성이 유리할 때가 있다.

1. Literals and Properties

• object는 접근할 수 있는 property와 그 property가 가지고 있는 값, 즉 key와 value의 집합체이다.
• const obj1 = {} // object literal => {}사용
  - 클래스가 없어도 괄호로 오브젝트 생성가능
• const obj2 = new Object() //object constructor => new 키워드 사용

const obj1 = {} // object literal
const obj2 = new Object() //object constructor

function print(person){
	console.log(person.name)
    console.log(person.age)
}

const ellie = {name: 'ellie', age: 4}
console.log(print(ellie));

ellie.hasJob = true; //추가
console.log(ellie.hasJob) //가능하면 피하는 방법

delete ellie.hasJob //삭제
console.log(ellie.hasJob) 

• js는 동적으로 타입을 런타임때 결정할 수 있다.
• properties가 추가가 가능하고 삭제도 가능하다.
• 값으로 함수를 사용할 수 있는 이유는 함수는 객체이기 때문이다.

{
    name: 'lee',
    age: 30,
    sayMyname(): function(){
        console.log('my name is' + this.name)
    }
}

• 메서드 안에 this키워드는 객체 자신을 나타내는 자기참조변수로 this를 감싸고 있는 객체를 의미한다.

---

2. Object['key']

• Computed properties 계산된 프로퍼티
• string타입으로 받아온다.
• object안의 데이터에 접근할때는 .과 []를 사용한다.
• [] 대괄호를 이용해서 배열에서 데이터를 받아오는 것처럼 사용가능하다.

console.log(ellie.name)
console.log(ellie['name']) //string형태로 접근
프로퍼티는 key string타입으로 해야한다는 점을 주의!

[언제 대괄호를 사용하는지?]

• .은 오브젝트의 기에 해당하는 값을 받아오고 싶을 때 사용
• []는 정확하게 어떤 키가 필요한지 모를때 사용 (런타임 환경에서 결정)
• ex) 사용자에게 input을 받아서 출력할 경우

function printValue(obj, key){
    console.log(obj[key])
}

printValue(elle, 'name') //undifined
printValue(elle, 'age')

---

3. Property value shorthand & Constructor Function

• key와 value가 동일하다면 반복되는 구문을 템플릿을 만들어 사용한다.
• 호출시 class처럼 new 키워드를 사용한다.

function Person(name, age){
    //this = {};
    this.name = name;
    this.age = age;
    // return this
}
const person4 = new Person('ellie', 4)

---

생성자 함수

• 생성자 함수를 이용하면 객체의 틀을 만들 수 있다.
• 생생성자 함수는 new 키워드와 함께 사용
  [인스턴스 생성과 this 바인딩]
• 암묵적으로 this = {} 빈 객체 생성 -> 인스턴스는 this에 바인딩 됨
• 생성자 함수가 생성할 인스턴스를 가리키는 이유는 바로 이것!

function Person(name, age){
    //this = {};
    this.name = name;
    this.age = age;
    // return this
}
const person4 = new Person('ellie', 4)

---

4. Object.create 메서드

• 지정된 프로토타입 기존의 객체 및 속성에 갖는 새 객체를 만든다.

  Object.create(proto)
  Object.create(proto, propertiesObject)

function Person(name) {
  this.name = name
}

Person.prototype.sayMyName = function () {
  console.log("my name is " + this.name)
}

function Student() {
  Person.apply(this, arguments)
}

Student.prototype = Object.create(Person.prototype)

---

key in obj

• 해당하는 오브젝트에 키가 있는지 없는지 확인할 수 있는 키워드

console.log('name' in ellie) //true
console.log('age' in ellie) //true
console.log('random' in ellie) //false

---

for..in vs for..of

[for (key in obj)]

• ellie가 가지고 있는 key들이 블럭을 돌때마다 key라는 지역변수에 할당된다.

for(key in ellie){
    console.log(key)
}

[for (key of obj)]

• 순차적인(이터러블한) 데이터들을 돌 수 있다.

const array = [1, 2, 3, 4, 5]
for(value of array){
    console.log(value)
    //array에 있는 모든 값들이 value에 할당되서 돌아가면서 출력한다.
}

---

fun cloning

[Object.assing]

• 1. 동일한 레퍼런스가 할당됨

object.assign(dest, [obj1, obj2, obj3 ... ])
const user = {name: 'ellie', age: '20'}
const user2 = user //user와 동일한 reference가 들어있다. 

user2.name = 'coder'
console.log('user: ', user); //name : coder

• 2. assign은 복사하고자하는 target과 복사를 하려고하는 source를 같이 전달해야한다.
• return값은 target과 복사하고자 하는 것이 통합된것이다.

object.assign(dest, [obj1, obj2, obj3 ... ])
const user = {name: 'ellie', age: '20'}

const user4 = Object.assign({}, user)

• 뒤에 나오는 property가 계속 덮어쓴다.

const fruit1 = {color: 'red'}
const fruit2 = {color: 'blue', size: 'big'}

const mixed = Object.assign({}, fruit1, fruit2)
console.log(mixed.color) // blue