Object란?

• JavaScript의 데이터 타입이다.

• 관련 데이터들의 모음이다.

• key와 value의 집합체이다. object = {key : value};

Object를 만드는 두가지 방법

• 'object literal' syntax

  {} 괄호 이용 const obj1 = {};

• 'object constructor' syntax

  new를 이용한 class template 만들기 const obj2 = new Object();

<script>
	const yura = {name: 'yura', age:4 };
    function print(person){
        console.log(person.name);
        console.log(person.age);
    }
    print(yura);
    
    /*
    	Js는 동적 언어이기 때문에 아래와 같이 오브젝트에 새 데이터를 
        추가/삭제할 수도 있지만, 유지보수가 어려우니 되도록 사용하지 말 것.
    */
    ellie.hasJob = true;
    console.log(yura.hasJob); //true
    delete ellie.hasJob;
    console.log(yura.hasJob); //undefined
</script>

Computed properties (계산된 속성)

• Runtime, 실시간으로 값을 받아올 때 사용한다.
• []를 사용하여 배열과 같이 접근한다.
• 속성은 ''string 형태로 가져올 것
  = console.log(yura['name']);
  ( 보통 코딩 시에는 이렇게 console.log(yura.name); 사용하면 된다. )

Property value shorthand(속기)

<script>
    const person1 = {name: 'bob', age: 2};
    const person2 = {name: 'steve', age: 3};
    const person3 = {name: 'dave', age: 4};
</script>

이렇게 일일이 오브젝트를 만들려면 힘들고 시간이 오래 걸린다.
요즘이라면 class를 사용하겠지만, class가 없던 시절엔 다음과 같이 계산식이 없는 함수를 만들어서 사용했다.

<script>
	const person4 = makePerson('yura',20);
    function makePerson(name, age){
        return{
            //속성과 값이 같을 때는 한번만 써도 된다. 
            // name: name,
            // age: age
            name,
            age
        };
    }
    console.log(person4);
</script>

이 식을 class object 형식으로 바꿔보자.
오브젝트를 생성하는 함수는 대문자로 시작하고, return이 아닌 this를 사용해준다.
이를 < Constructor function > 이라고 한다.

<script>
	const person5 = new Person('yura',20);
    function person(name, age){
        //this = {}; 
        this.name = name;
        this.age = age;
        //return this; 가 생략된 것.
    }
    console.log(person5);
</script>

in operator (property 존재여부 체크)

• key in obj : 이 key가 이 obj에 있는가?

<script>
    console.log('name' in yura); //true
    console.log('age' in yura); //true
    console.log('random' in yura); //false
    console.log(yura.random); //undefined
</script>

for..in / for..of

• for (key in obj) : obj의 모든 값이 key 안에 할당됨

<script>
    for(key in yura){ 
        console.log(key); // yura의 모든 속성 출력 
    }
</script>

• for (value of iterable) : iterable의 모든 값이 value에 할당됨

<script>
    const array = [1, 2, 3, 4, 5];

        // for (let i = 0; i < array.length; i++){
        //     console.log(array[1]);
        // } 이걸 쉽게 만들면?
    
    for(value of array){ 
        console.log(value); //12345
    }
</script>

Cloning

• Object.assign(dest, [obj1, obj2, obj3...])

<script>
    const user = { name:'yura', age: '20'};
    const user2 = user;
    user2.name = 'coder';
    console.log(user); // coder
</script>

user2의 name을 바꾼 것인데 user의 값도 바뀌었다. 가리키고 있는 레퍼런스의 주소값이 같기 때문이다. 레퍼런스는 항상 복사하여 할당되게 된다.
이번엔 객체를 클론해보자!

먼저, Object.assign을 사용하지 않은 예전 방법

<script>
    const user3 = {}; //빈 변수를 먼저 정의하고
        for (key in user){
            //user3에 기존에 있던 user의 key를 할당하겠다.  
            user3[key] = user[key]; 
        }
    console.log(user3); //1)name 2)age
</script>

Object.assign을 사용한 방법

<script>
    const user4 = {}; //빈 변수 정의
    Object.assign(user4, user);
        // 또는 두 식을 합쳐셔 
        // const user4 = Object.assign({},user);
    console.log(user4);
</script>

추가 예제

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

👉 MDN Object

👉 Dream Coding 영상을 정리한 내용입니다.