Object

one of the Javascript's data types
(JavaScriptのデータ型の1つ)

a collection of related data and|or functionality
(関数に関連するデータセット)

Nearly all object in Javascript are instances of Object
(ほとんどのJavaScriptオブジェクトのインスタンス)

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);
}

//object 생성

const ellie = {
    //key : value 의 집합체
    name : 'ellie',
    age : 24
}

print(ellie);

//자바스크립은 다이나믹 런타임 language 이라서 객체에 값을 추가할 수 있다.

ellie.hasJob = true;
//객체를 살펴보면 hasJob이 추가되었다.

console.log(ellie);

//객체의 삭제 가능
delete ellie.hasJob;
console.log(ellie)

Computed properties

// 아래와 같이 객체(object)를 생성 할 수 있다. 
function print(person){
    console.log(person.name);
    console.log(person.age);
}

const kangmin = {name : 'kangmin', age : 24};
print(kangmin);
 
//배열 타입으로 가져올 수도 있다. 이것을 Computed properties라고 한다.
console.log(kangmin['name'])

// 또한 객체에 값을 넣을 수 있다.
kangmin['gender'] = 'male';
console.log(kangmin.gender);

// computed properties는 어떤 key를 가져올지 모를 때 사용한다.
function printValue(obj,key){
    console.log(obj.key);
//obj의 key라는 value로 찾게 되서 undefined.
    console.log(obj[key]); 
//따라서 computed properties 로 사용해야 값을 할당할 수 있다. 
}

printValue(kangmin, 'name');

properties value shorthand

keyのnameは、同じ入力と重複する入力がある場合に関数を使用してコードを減らすことができます.

const person1 = {name : 'bob', age: 22};
const person2 = {name : 'steve', age: 32};
const person3 = {name : 'dave', age: 42};
// 아래의 함수를 이용해 name이라는 매개변수를  받아 name이라는 key에 다가 넣음
function makePerson(name, age){
    return {name: name, age: age};
//객체{ }로 return 한다. 
}
const person4 = makePerson('kangmin', 23) 
//함수에 매개변수로 value를 넣음
console.log(person4)

constructor function

//클래스처럼 사용할 수도 있다.
function Person(name, age){
//클래스처럼 클래스명은 대문자로 시작하고 함수처럼 매개변수를 만든다.
// 클래스처럼 this.객체로 만든다. 
    this.name = name;
    this.age = age;
}

//사용할때도 클래스처럼 사용한다. 
const person5 = new Person('hyehwa', 23) 
//class를 초기화하여 값을 할당시킴. 
//클래스는 자동으로 객체로 만들어줌
console.log(person5); 

in operator : property existence check (key in obj)

これは、キーがobjにあるか否かを不確定にする方法である.

console.log('name' in kangmin) //true
console.log('character' in kangmin) //false
console.log(kangmin.character) // undefined

console.clear();

for ... in vs for ... of

//for(key in obj)
// kangmin이라는 object가 가지고 있는 key를 출력할 수 있다. 
//for in은 숫자형이 출력된다.
for(key in kangmin){
    console.log(key)
}

//array가 가진 배열들을 순차적으로 출력할 수 있다.
//배열, 객체의 value를 출력한다. 
const array = [1,2,3,4]
for(key of array){
    console.log(key)
}

cloning

//다른이름의 object의 reference를 동일한 값으로 지정시킬 수 있다. 
const user = {name: 'kangmin', age : 24};
const user2 = user; 
// 2개의 object의 referencrt는 동일한 value를 가르킴.
user2.name = 'ellie'; 
console.log(user); 
//동일한 값을 가르키고 동일한 값을 수정하였으니 user가 가르키는 값은 변화 하였다.

//예전에는 완전히 값을 복사해서 사용했다, 
const user3 = {}; //user3의 빈 객체를 만들고
for(key in user){
    //user의 값을 for..in을 이용하여 key에다가 할당하는 방식으로 복사하였음.
    //첫번째 동작만 보면 key에 name이 할당되고 user3[name] = 'ellie'; 되는 것과 같다. user[name]의 값은 ellie다.     
    user3[key] = user[key];
}

console.log(user3)

user3.name = 'kangming';
//user3의 값은 따로 있기때문에 user3의 값만 변경되고 user,user2가 가르키는 값은 별도의 값이 되었다.
console.log(user);

//assign 메소드는 target과 합치고자 하는 resource를 매개변수로 받는다. 
const user4 = {};
Object.assign(user4, 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)
//뒤에 나오는 매개변수는 앞의 매개변수의 동일한 값을 덮어씌운다.