04_JavaScript: Object

Ex01. Object

const dog = {
    name : 'Siru',
    age : 2
};
console.log(dog) 
console.log(dog.name); //Siru
console.log(dog.age); //2

Ex02. If there is a space, cover it with ' '

const sample = {
    'key with space': true
};

Ex03. Get an object as a parameter

const dog = {
    name : 'Siru',
    age : 2,
    address : 'Korea'
}
const cat = {
    name : 'Bbi Bbi',
    age : 3,
    address : 'America'
}
function print(animal) {
    const text = `${animal.name} is ${animal.age} years old, living in ${animal.address}.`;
    console.log(text);
}
print(dog);
print(cat);

// 비구조화 할당 문법 
const dog = {
    name : 'Siru',
    age : 2,
    address : 'Korea'
}
const cat = {
    name : 'Bbi Bbi',
    age : 3,
    address : 'America'
}
function print(animal) {
    const {name, age, address} = animal; // make your code shorter(1) : define new const {name, age, address} from 'animal' object
    const text = `${name} is ${age} years old, living in ${address}.`;
    console.log(text);
}
print(dog);
print(cat);

const dog = {
    name : 'Siru',
    age : 2,
    address : 'Korea'
}
const cat = {
    name : 'Bbi Bbi',
    age : 3,
    address : 'America'
}
function print({name, age, address}) { // make your code shorter(2) : : define new const {name, age, address} from the object parameter
    const text = `${name} is ${age} years old, living in ${address}.`;
    console.log(text);
}
print(dog);
print(cat);

---

비구조화 할당(구조분해) 문법

const obj1 = { a: 1, b: 2 };

const { a, b } = obj1;

console.log(a); //1
console.log(b); //2

//파라미터로 비구조화 할당하기
const obj1 = { a: 1, b: 2};

function print({a, b}) {
    console.log(a);
    console.log(b);
}
print(obj1);

-> If there is no b,

// b가 주어지지 않았을 때  
const obj2 = { a: 1};
function print({a, b}) {
    console.log(a);
    console.log(b);
}
print(obj2); 
// 1 
// undefined

set the default

-> set b =2 first

// 파라미터에서 하기 
const obj2 = { a: 1};
function print({a, b=2}) {
    console.log(a);
    console.log(b);
}
print(obj2);
// 1
// 2

const obj2 = { a: 1};
const {a, b =2} = obj2;

console.log(a); // 1
console.log(b); // 2

Change the name of the value

const animal = {
    name : 'siru',
    type : 'dog'
};
const nickname = animal.name;
console.log(nickname); // siru

const animal = {
    name : 'siru', 
    type : 'dog'
};
// animal 객체 안에 있는 name을 nickname이라고 선언
const { name: nickname } = animal
console.log(nickname);

(Array) 비구조화 할당

const array = [1, 2];
const [one, two] = array;
console.log(one);
console.log(two);

// 기본값 지정 가능 
const array = [1];
const [one, two = 2] = array;
console.log(one);
console.log(two);

---

Ex04. put the function in an object

const dog = {
    name : 'siru',
    sound : 'bowwow',
    say: function say() {
        console.log(this.sound);
    }
};
dog.say();

• if THIS is in an object, it points to the object 'dog'

const dog = {
    name : 'siru',
    sound : 'bowwow',
    say: function() { // you can delete the name of function 
        console.log(this.sound);
    }
};
dog.say();

• You shouldn't use the arrow function here in an object, it works differently

---

Getter Function & Setter Function

• 굳이 무조건적으로 사용 안해도 되고, 특정 목적이 있는 경우만 사용

• 변수 보호 & 일관성 유지

• setter 사용하면, 파라미터로 직접 넣는 것이아니라 '='으로 파라미터 넣음. 메소드로 접근하는 것처럼 보이지 않기에 외관상 깔끔하고, 정보은닉 가능

Ex05. Getter Function

const numbers = {
    a : 1,
    b : 2
};
numbers.a = 5;
console.log(numbers); // {a= 5, b= 2}

const numbers = {
    a : 1,
    b : 2,
    get sum() {
        console.log('sum function starts');
        return this.a + this.b;
    }
};
console.log(numbers.sum); //3
numbers.b = 5;
console.log(numbers.sum); //6

• we don't have to put numbers.sum()

• numbers.sum can make the function sum() start

Ex06. Setter Function

const numbers = {
    _a: 1,
    _b: 2,
    sum: 3,
    calculate() {
        console.log('calculate');
        this.sum = this._a + this._b;
    },
    get a() {
        return this._a;
    },
    get b() {
        return this._b;
    },
    set a(value) {
        console.log('change a');
        this._a = value;
        this.calculate();
    },
    set b(value) {
        console.log('change b');
        this._b = value;
        this.calculate();
    }
};

console.log(numbers.sum);
numbers.a = 5; // put 5 in the parameter of the set function 
numbers.b = 7; // 메소드로 접근하는 것처럼 보이지 않기에 외관상 깔끔하고, 정보 은닉 가능 
numbers.a = 9;
console.log(numbers.sum); 
console.log(numbers.sum);
console.log(numbers.sum);

• If there is the set function, numbers.sum doesn't make the function sum() start anymore

---

cf. https://learnjs.vlpt.us/basics/06-object.html - 뒷 부분 이어서 보기