# Object

## Object : 객체

* **one of the JavaScript's data types** : 자바스크립트의 데이터 타입 중의 하나
* **a collection of related data and/or functionality** : 데이터와 함수와 연관된 집합
* **Nearly all objects in JavaScript are instances of Object**\
  : 자바스크립트에서 거의 모든 객체는 객체의 인스턴스
* **object = { key : value }** : **오브젝트는 key(변수)와 value의(값) 집합체**

### 1. 리터럴 객체와 프로퍼티 : Literals and properties

```javascript
/*const name = 'ellie';
const age = 4;
print(name, age);
function print(name, age) {
  console.log(name);
  console.log(age);
}
const ellie = { name: 'ellie', age: 4 }; 오브젝트로 관리*/

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

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

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

// with JavaScript magic (dynamically typed language)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);
```

### 2. 계산된 프로퍼티 : Computed properties

```javascript
// key should be always string
console.log(kelly.name);    // 코딩할 때
console.log(kelly["name"]); // 정확하게 어떤 키가 필요한지 모를 때
kelly["hasJob"] = true;
console.log(kelly.hasJob);

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(kelly, "name");
printValue(kelly, "age");
```

### 3. Property value shorthand : key와 value의 값이 같을 때 생략 가능한 기능

```javascript
const person1 = { name: "bob", age: 2 };
const person2 = { name: "steve", age: 3 };
const person3 = { name: "dave", age: 4 };
const person4 = new Person ("ellie", 26);
console.log(person4);
```

### 4. 생성자 함수 : Constructor Function

```javascript
function Person(name, age) {
    // this = {};
    this.name = name;
    this.age = age;
    // return this;
}
```

### 5. In 연산자 : In operator

**property existence check (key in obj) :** 해당하는 object 안에 key가 있는지 없는지 확인하는 것

```javascript
console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);
```

### 6. for..in vs for..of

```javascript
// for (key in obj)
console.clear();
for (key in ellie) {
    console.log(key);
} // name, age, hasJob

// for (value of iterable) - 순차적
const array = [1, 2, 4, 5];
for(value of array){
    console.log(value);
} // 1 , 2 , 4 , 5
```

### 7. Fun cloning

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

// old way - 수동적
const user3 = {};
for (key in user){
    user3[key] = user[key];
}
console.clear();
console.log(user3); // {name: 'coder', age: 20}

// Object.assign() - ctrl키 누르고 정의된 것 확인하기(어떤값이 리턴됐는지 등)
// assign<T, U>(target: T, source: U): T & U;
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
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://westsilver.gitbook.io/study-script/undefined/es5+/7.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.