7. 오브젝트 넌 뭐니?

** 이 글은 유튜브 강의을 보고 공부하면서 스스로 콘솔로 작성하고, 따라치면서 Javascript 기초 공부를 하는 공간입니다.

 

www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7

// objects
// one of the Javascript's data types.
// a collection of related data and/or functionality
// Nearly all objects in JavaScripts are instances of Object

//*object = { key : value};


const name = "ellie";
const age = 24;

print(name, age);

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

//문제사항 : 관리하기 힘들고, 정말 logical 하게 고루고루 사용하지못함. 이걸 해결하기위해 object 가 나옴 
// 1. Literals and properties
function print(ellie){
    console.log(ellie.name);
    console.log(ellie.age);
}

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

//object 만드는 방법은 2가지
//1. 
const obj1 = {}; //'object literal' syntax
//2.
const obj2 = new Object(); //'object constructor' syntax

//javascript 는 동적으로 움직이는 언어이다 (추가 삭제 어디서든지 가능)
ellie.hasJob = true;
console.log(ellie.hasJob); //true
delete ellie.hasJob;
console.log(ellie.hasJob); //undefined

//2. Computed properties
//key should be always string
console.log(ellie.name); //ellie
console.log(ellie['name']); //ellie

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

// key 에 대해서 무엇이 들어올지 잘 모를때는 computed properties 를 쓴다.
//예시로 

printValue(ellie, 'name');
function printValue(obj, key){
    console.log(obj.key); // undefined 출력이 된다. key 라는 이름의 key 가 없기 때문
}

//하지만 computed properties 를 쓴다면 ?

printValue(ellie, 'name');
function printValue(obj, key){
    console.log(obj[key]); // ellie 로 출력이된다. 
}

//3. Property value shorthand
const Person1 = { name: 'bob', age:2};
const Person2 = { name: 'Steve', age:3};
const Person3 = { name: 'alice', age:4};
const Person4 = new Person('ellie', 30 );
console.log(person); //Person {name: "ellie", 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 ellie); //true
console.log('age' in ellie); //true
console.log('random' in ellie); //false
console.log(ellie.random); //undefined


//6. for..in vs for..of
// for (key in obj)

for (key in ellie){
    console.log(key); // name //age //has Job
}

// for (value of iterable)

const array = [1,2,3,4];
for(let i =1 ; i <array.length ; i++){
    console.log(array[i]); //1 //2 //3 //4
} // 번거러움 !! 이걸 해결하기 위해서 ??o

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

//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}

// 정말 object 를 복사 할 수 있는 방법은 있을까 ?

//old way 
const user3 = {};

for(key in user) {
    user3[key] = user[key];
}

console.log(user3); // {name:'coder', age:20}

//new way 
const user4 ={};
Object.assign(user4, user);
console.log(user4); // {name:'coder', age:20}

// 혹은 
const user4 = Object.assign({}, user);
console.log(user4); // {name:'coder', age:20}

//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