# 자바스크립트 object

### object

```javascript
'use strict';
// Objects
// 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 };

//object 만드는 방식
const obj1 = {}; // 'object literal' syntax 
const obj2 = new Object(); // 'object constructor' syntax

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

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


//자바스크립트는 동적으로 타입이 runtime때 결정되므로 밑에 상황이 가능하다.
// can add properties later
// 나중에 추가가 가능함 (유지보수할때 힘들기 때문에 피하는게 좋음)
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
// 나중에 삭제 가능함 (유지보수할때 힘들기 때문에 피하는게 좋음)
delete ellie.hasJob;
console.log(ellie.hasJob);

```

* 자바스크립트는 동적으로 타입이 runtime때 결정됨
* object 은 key : value 의 집합체이다.

###  Computed properties

```javascript
console.log(ellie.name); // ellie 어떠한 값을 정확히 가져올때
console.log(ellie['name']); // ellie 정확하게 어떠한 값을 받을지 모를때 사용함 
ellie['hasJob'] = true;
console.log(ellie.hasJob); // true

function printValue(obj, key) {
    console.log(obj[key]); // 어떤키를 받을지 모를때 이렇게 사용함
}

printValue(ellie, 'name'); // ellie
printValue(ellie, 'age'); // 4
```

###

### Property value shorthand

```javascript
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'allice', age: 5 };
const person4 = new Person('elile', 30);
console.log(person4); //{ name:'ellie'; age:30}

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

###

### in operator: property existence check (key in obj)

```javascript
// 키가 있는지 없는지 확인해줌
console.log('name' in ellie); //true
console.log('age' in ellie); //true
console.log('random' in ellie); //false
console.log(ellie.random); // undefined
```

###

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

```javascript
// for (key in obj)
console.clear();
for (let key in ellie) {
    console.clear(); // clear() 이전 로그를 다 지워줌
    console.log(key); //ellie에 있는 모든키을을 출력
}
//  ellie의 모든 속성을 확인해보고 싶을때 사용 for in

// for (value of iteralble)
const array = [1, 2, 4, 5];
for (let value of array) { //array 모든값을 할당해줌
    console.log(value);
}
// 배열안에 모든 값들을 한번에 불러오는 속성 
```

###

### Fun cloning

```javascript
// Object.assign(dest, [obj1, 0bj2, obj3...])
const user = { name: 'ellie', age: '20' };
const user2 = user; // user2에도 동일한 레퍼런스를 가지고 있음
user2.name = 'coder';
console.log(user); // coder

//old way
const user3 = {};
for (let key in user) {
    user3[key] = user[key];
}

console.clear();
console.log(user3); // 값이 복사됨 coder, 20 이 출력이됨

const user4 = Object.assign({}, user); // Object.assign -> 복사됨
console.log(user4); //coder, 20 이 출력이됨
// 같은 코드
// const user4 = {};
// Object.assign(user4, user);
// console.log(user4);

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

###

### 공부 참조 링크

<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object>


---

# 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://leeboa.gitbook.io/study/_/object.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.