[엘리의 드림코딩 JS] 7. Object

https://youtu.be/1Lbr29tzAA8

참고하기
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

// Objects
// one of the JavaScript's data types.
// a collection of related data and/or functionality


// 1. Literals and properties
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); //'object constructor' syntax

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

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

// JS는 dynamically typed language라 이렇게 미리 정의하지 않은 프로퍼티에 value
// 바로 할당하고 사용하는 게 가능하다.(하지만 권장하진 않는다.)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);


// 2. Computed properties
// key should be always string
console.log(ellie.name); // dot, 코딩할 때 사용하는 방법
console.log(ellie['name']); // computed properties, 실시간으로 원하는 키 값을 받아오고 싶다면
ellie['hasJob'] = true;
console.log(ellie.hasJob);

function printValue(obj, key) {
  // console.log(obj.key); //undefine 
  // key가 runtime에 동적으로 결정되므로 그 전에는 obj에 key라는 프로퍼티를 찾을 수 없다. 
  console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');


// 3. property value shorthand
const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
const person4 = new Person('ellie', 30);
console.log(person4);


// 4. Constructor Function
function Person(name, age) {
  // this = {};
  this.name = name;
  this.age = age;
  // return this;
}


// 5. in operator: property existence check (key in obj)
console.log('name' in ellie); //true
console.log('random' in ellie); // false


// 6. for...in vs for...of
// for (key in obj)
console.clear();
for (key in ellie) {
  console.log(key);
}

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


// 7. Fun cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'ellie', age: '20' };
const user2 = user;
user2.name = 'coder'
console.log(user); //{name: 'coder', age: '20'}

// old way
const user3 = {}
for (key in user) {
  user3[key] = user[key];
}
console.clear()
console.log(user3);

// new way
const user4 = Object.assign({}, user);
console.log(user4);

// another example
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); // big