6. JS basic (object - Literals and properties, Computed properties, Propertiy value shorthand, Constructor Function, in operator, for .. in, for .. of, cloning)

1. object

속성(Field) + 행동(Method)로 구성

• instanse of a class
• created many times
• data in

- Literals and properties

object = { key : value }
a collection of related data and/or functionality

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

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

const lee = {name: 'lee', age: 26};
print(lee);

// runtime에 type이 결정 되기 때문에 가능 한 것들
lee.hasJob = true;
console.log(lee.hasJob);
delete lee.hasJob;
// 동적 코딩은 유지보수가 어려움

- Computed properties

key should be always string
보통 object 안에 있는 변수에 접근 할 때 dot을 활용해 접근
Computed properties의 경우 object 안에 있는 변수의 이름을 string 형태로 접근 가능

console.log(lee.name);
console.log(lee['name']); // Computed properties
lee['hasJob'] = true;
console.log(lee.hasJob);
//key should be always string
console.log(lee[name]); // undefined

dot을 사용하는 경우는 코딩하는 순간 해당하는 값을 받아오고 싶을 때 사용함.
Computed properties를 사용할 경우에는 정확하게 어떤 key가 필요한지 모를 때 즉, run time에서 결정 될 때 사용

// Computed properties 사용해야 할 경우
function printValue(obj, key) {
	console.log(obj[key]);
  console.log(obj.key); // undefined
}
// 사용자의 input을 받아야 하는 경우는 key는 값이 
// 정해져 있지 않기 때문에 Computed properties 사용
printValue(lee, 'name');
printValue(lee, 'age');

- Propertiy value shorthand

key와 value의 이름이 동일 하다면 생략 가능

const person1 = { name: 'jay', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'kim', age: 3 };
const person4 = makePerson('lee', 26);
// class와 동일 한 역할
// js에 class가 없을 때 사용하던 방법
function makePerson(name, age) {
    // 객체를 return
	return {
    	name, // == name: name,
      	age, // == age: age,
    }
}

- Constructor Function

object를 만들기 위해 생성한 함수를은 대문자로 시작

// class에서 object를 만드는 것 처럼호출 가능
// js엔진이 알아서 object 생성
const person = new Person('lee', 26);

// 새로운 object 를 만들어서 properties를 삽입하고 return 하는 과정
function Person(name, age) {
    // this = {};
  	this.name = name;
  	this.age = age;
    // return this;
}

- in operator

property existence check (key in obj)

console.log('name' in person); // true
console.log('age' in person); // true
console.log('random' in person); // false
console.log(person.random); // undefined

- for .. in, for .. of

// for (key in obj)
for (key in person) {
	console.log(key);
}

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

- cloning

Object.assign(dest, [obj1, obj2, obj3...])

// old way1
const user = { name: 'lee', age: '20' };
const user2 = user;
user2.name = 'kim';
console.log(user) // { name: 'kim', age: '20' };

// old way2
const user3 = {}; // empty object 생성
for (key in user) {
	user3[key] = user[key];
}
console.log(user3); // { name: 'kim', age: '20' };

// Use Object.assign
const user4 = {}; // empty object 생성
Object.assign(user4, user);
console.log(user4); // { name: 'kim', age: '20' };
// or
const user4 = Object.assign({}, user);
console.log(user4); // { name: 'kim', age: '20' };

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

// 위에 위치한 property가 계속 덮어쓴다
console.log(mixed); // { color: 'red', size: 'big' }