Object

- Object는 key와 value의 집합체, 각각의 key를 묶은 집합체의 주소만 변수에 할당
- 각각의 key마다 메모리가 할당됨
- const 는 메모리값이 정해져 있기 때문에, 원시타입과 마찬가지로 object에 할당된 레퍼런스(주소)를 바꿀수 ❌, but 레퍼런스가 가르키는 key의 값을 수정 ⭕️

const obj1 = {};           // object literal
const obj2 = new Object(); // object constructor
let nct = { name: ‘mark’, age: 4};

console.log(nct.name);
console.log(nct[‘name’]); 
// key는 string, 동적으로 key의 value를 가져올때

let nctDream = nct;        // object를 가리키는 주소만 그대로 복사됨
console.log(nctDream.name) // nct의 주소를 이용해서 name의 값을 출력

nct.name = 'haechan';      // 값 재할당 가능
console.log(nct.name);     // haechan
console.log(nctDream.name);// haechan

 

- key와 value값이 동일하면 생략 가능

{
    const nct = {
        name: 'mark',
        age:'99',
    };

    const name = 'yuta';
    const age = '95';

    const nct127 = {
        name,    // 이름 같으면 생략 가능
        age,
    }
}

 

- Spread Syntax

{
   const obj1 = { key: "key1" };
   obj1.key = "newKey";      
   // 스프레드 연산자는 주소의 참조값만 복사하기 때문에 key값 수정하면 모두 수정됨
   const obj2 = { ...obj1 }; 
   console.log(obj2);
   
   //merge
   const fruits1 = { fruits: "🍎" };
   const fruits2 = { fruits: "🍌" };
   const fruits = { ...fruits1, ...fruits2 };  // key값이 같으면 뒤에오는 것으로 덮어씌어짐
   console.log(fruits);                        // {fruits: '🍌'}
 }

 

1. Constuctor function

const person4 = new Person(‘heachan’, 30);
console.log(person4); // 

function Person(name, age){
	// this = {} 생략
	this.name = name;
	this.age = age;
	// return this;
}

 

- Destructuring Assignment

{
    const nct = {
        name: 'mark',
        age: 99,
    };

    // const name = nct.name;
    // const age = nct.age;

    const {name, age} = nct;                          // 이름 같을때
    console.log(name, age); 

    const { name: memberName, age: birthYear } = nct; // 이름 다를때
    console.log(memberName, birthYear);
}

// Object Destructuring
const person = {
    name:'Julia',
    age:20,
    phone:'11110020',
};

function displayPerson(person){
    /*  ❌ Bad Code
        displayAvatar(person.name);
        displayName(person.age);
        displayProfile(person.name, person.age);
    */

  const { name, age } = person;
  displayAvatar(name);
  displayName(age);
  displayProfile(name, age);
}

 

2. In operator

: Key의 유무 확인

console.log(‘name’ in heachan);     // true
console.log(‘age’ in heachan);      // true
console.log(‘random’ in heachan);   // false
console.log(heachan.random);        // undefined

 

3. For ..in / For ..of

: 모든 key를 받아와서 처리할때, for ..of 는 오브젝트가 아닌 배열을 사용

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

 

4. cloning

const user = {name:’mark’, age: ‘99’};
const user4 = Object.assign({}, user);
console.log(user4);  // {name:’mark’, age: ‘99’}

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