7. object (computed properties[]: 런타임에 결정되는 값 받아올 때, property value shorthand: key: value,를 key,로만 쓰는 것!)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

primitive type object는 변수 하나당 하나의 값만 담을 수 있다.

const name = 'yuna';
const age = 4;

1. object를 만드는 법
   const obj1 = {}; // 'object literal' syntax
   const obj2 = new Object(); // 'object constructor' syntax

2. Literals and properties

오브젝트는 키와 밸류의 집합체이다.
object = { key : value }

자바스크립트에서는 class가 없어도

중괄호 {}를 이용해 object를 바로 만들 수 있다.

const yuna = { name: 'yuna', age: 4 };

자바스크립트는 Dynamic Typed language이므로
동적으로 runtime에 타입이 결정되는 언어이다.
따라서 object 안에 뒤늦게 하나의 프로퍼티를 추가할 수 있다. (미친짓을 할 수 있다!)

yuna.hasJob = true;

console.log(yuna.jasJob); //true

또한 object 안의 프로퍼티를 삭제할 수도 있다.

delete yuna.hasJob;

console.log(yuna.hasJob); //false

3. Computed properties

object에서 데이터를 가져오는 방법
console.log(yuna.name);
console.log(yuna['name']); // 배열에서 데이터를 가져오는 방식처럼 가져올 수도 있는데, 이를 computed properties라고 한다.
(key should be always string)

computed properties를 이용해 object에 새로운 데이터를 추가할 수도 있다.
yuna['hasJob'] = true;

실시간으로 원하는 키의 값을 받아내고 싶을 때 이 computed properties 방법을 쓴다. 아래는 computed properties 방법이 필요한 예시이다.

function printValue(obj, key) {
console.log(obj.key); // object에 key라는 이름의 key가 있는지 확인하면??? 없다. yuna object에는 현재 'name'과 'hasJob'이라는 key만 들어있기 때문이다. 우리는 함수를 부르는 사용자가 어떤 이름의 key값의 value를 알고 싶어할지 미리 알 수 없다. 오직 런타임에만 알 수 있다. 따라서 런타임에 들어오는 값을 알기 위해서 computed properties를 사용해 아래와 같이 하는 것이다.
};

printValue(yuna, 'name'); // key값은 항상 string으로 전달한다. undefined 출력

function printValue(obj, key) {

console.log(obj[key]); // 런타임에 결정되는 key값을 사용하기 위해 computed properties를 사용했다. 동적으로 결정되는 값을 받아와야 할 때 유용하게 쓸 수 있다. 이제 이 함수는 제대로 동작한다.

}

printValue(yuna, 'name'); // yuna object 안의 'name' key 값이 가진 value인 'yuna' 출력

4. property value shorthand

키(property)와 value 값을 간략하게 쓸 수 있는 방법.
key: value,일 때 (key와 value값이 동일할 때)
key,라고만 써도 된다!!!

5. constructor function
   ES6 이전에 자바스크립트에 class가 없을 때에는
   아래와 같이 function을 이용해 템플릿을 만들어서
   함수를 이용해 object를 간편하게 만들곤 했다.
   

이렇게 다른 계산을 하지 않고 순수하게 object 생성에 쓰이는 함수들은
대문자로 시작하도록 함수들을 만들었다. 또한 class의 constructor 안에 쓰이는 방법처럼, (return 없이) this.name = name;과 같이 작성한다.
함수를 호출할 때도 새로운 object를 만드는 것처럼 함수 이름 앞에 new라는 키워드를 붙여서 const person4 = new Person('elie', 30);과 같이 썼었다.
이 함수 안에는 새로운 object를 만드는 this = {};와
this를 return 하는 return this;이다. 이를 constructor function이라고 불렀다.

6. in operator: property existence check (key in obj)
   in operator는 해당 오브젝트 안에 키가 있는지 없는지 확인하는 것이다.

7. for..in, for..of

for..in: for (key in obj) => object 안의 모든 키들을 받아와서 일을 처리하고 싶을 때 in을 쓰면 좋다.

console.clear(); // 로그를 clear해주는 API

for (key in obj1) {
console.log(key, obj1[key]);
}

obj1라는 object 안에 있는 key값을 하나씩 출력하고, 그 뒤에는
런타임에 변하는 각 키(computed properties[] 방법 사용)의 value 값이 출력된다.

for..of: for (value of iterable) => array의 모든 값을 가지고 일을 하고 싶을 때 of를 쓴다.

const array = [1, 2, 3, 4];
for (let i = 0...) 대신
for (value of array) {}를 쓰는 것!

8. cloning
   object를 복사하면, 복사된 객체는 오리지널 객체와 같은 reference를 가지고, 이 reference는 오리지널 객체를 가르키게 된다.
   따라서 복사된 객체의 내용을 바꾸면, 오리지널 객체의 내용도 바뀐다.

user2.name = 'yuna';
console.log(user); // { name: 'yuna', age: '20' }; 오리지널 객체의 내용이 바뀐 걸 볼 수 있다.

9. old way

cloning하지 않고, 진짜로 복사본을 만드는 방법은 없나요?

예전 방법은, 아래처럼 빈 object를 만든 다음에 for..in을 써서 각 키마다 돌면서 오리지널 객체의 value값을 새로운 객체의 value값에 저장하는 방법을 썼다.

cloning하지 않고, 진짜로 복사본을 만드는 다른 방법

Object.assign
자바스크립트에 있는 모든 object는 이 Object를 상속한다. Object 안에 있는 assign 메소드를 이용해 아래처럼 객체를 복사할 수 있다.
user4라는 이름의 빈 객체를 만든 후, Object.assign()을 이용해 user4에 user를 복사한 모습이다.

const user4 = Object.assign({}, user);
이처럼 텅 빈 오브젝트에 user를 복사한 후, 이를 user4라는 이름의 변수에 할당해도 된다.

10. 여러개의 객체가 동일한 key값을 갖고 있을 경우,
    Object.assign()을 이용해 빈 객체에 이 객체들을 mix해서 복사하면 어떤 결과가?

Object.assign({}, obj1, obj2} 이고 obj1과 obj2가 같은 키 값을 갖고 있을 경우, 나중에 들어간 인자(obj2)의 키값이 이전의 키값을 덮어쓰기 한다.