オブジェクトの理解

Objectとは？

1. Literals and properties

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

const name = 'somi';
const age = 20;

print(name, age); //somi, 20

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

const somi = { name: 'somi', age: 20 }

print(somi); // somi, 20

オブジェクトを作成する2つの方法

const obj1 = {}; //object literal(객체 리터럴 문법)
const obj2 = new Object(); //object constructor (객체 생성자 문법, 클래스를 이용하는 방법)

データの追加

somi.hasJob = false;
console.log(somi.hasJob); //false
console.log(somi) //{name: "somi", age: 20, hasJob: false}

データの削除

delete somi.hasJob;
console.log(somi.hasJob); //undefined
console.log(somi) //{name: "somi", age: 20}

2.計算された属性

console.log(somi.name); //somi
console.log(somi['name']); //somi

somi['hasJob'] = true;
console.log(somi.hasJob); //true

function printValue(obj, key){
    console.log(obj.key) //언제 어떤 키를 받을지 모른다.
}
printValue(somi, 'name')//undefined

function printValue2(obj, key){
    console.log(obj[key])
}
printValue2(somi, 'name')//somi

3. Property value shorthand

const person1 = { name: 'bob', age: 2};
const person2 = { name: 'steve', age: 3};
const person3 = { name: 'dave', age: 4};

//자바스크립트에서는 아래와 같이 키와 벨류의 이름이 동일하다면 생략이 가능하다.
//클래스가 나오기 전까지는 아래와 같이 객체를 만들었다!ㄷㄷ
function makePerson(name, age) {
    return{
        name,
        age,
    };
}

const person4 = makePerson('somi', 30);

console.log(person4); //{name: "somi", age: 30}

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 somi); //true
console.log('age' in somi); //true
console.log('random' in somi); //false
console.log(somi.random); //정의하지 않은 키를 설정하면 undefined 

6. for..in vs for..of

for (key in obj)

for(let key in somi){
    console.log(key) //name, age, hasJob
}

for (value of iterable)

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

7. Cloning

const user = { name: 'somi', age: '20'};
const user2 = user;
user2.name = 'coder';
console.log(user); //{name: "coder", age: "20"}

old way

const user3 = {};
for (let key in user) {
    user3[key] = user[key];
}
console.log(user3) //{name: "coder", age: "20"}

new way1

const user4 = {}; //타겟 생성
Object.assign(user4, user); //복사하고자하는 오브젝트 전달
console.log(user4); //{name: "coder", age: "20"}

new way2

const user5 = Object.assign({}, user)
console.log(user5);

another example

const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color, mixed.size); //blue, big
//뒤에 있는 오브젝트가 덮혀 씌어진다.