jsNote 06: 객체 Object

Q. Object란?

• js date type 중 하나이다.
• object = { key: value }
• key에 상응하는 value가 들어있는 key와 value의 집합체가 object이다.
• property 하나는 key와 value로 이루어져 있다.
  
  

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

const emma = { name: 'emma', age: '4' }; //name과 age라는 key 안에 각각 상응하는 값 존재
print(emma);// emma, 4

//dynamically typed language 동적 타입 언어
emma.hasJob = true; //뒤에 property 추가도 가능
console.log(emma.hasJob); //true 가능한 쓰지 않기

delete emma.hasJob; //property 삭제도 가능
console.log(emma.hasJob); // undefined 출력

2. Computed properties 계산된 프로퍼티

• 실시간으로 값을 받아오고 싶은 경우 사용한다.

console.log(emma.name);
console.log(emma['name']); //배열에 접근하여 값을 받아올 수도 있다. key는 항상 string 타입. 어떤 key인지 모를 때, key가 runtime에서 결정될 때 쓸 수 있다.
emma['hasJob'] = true;
console.log(emma.hasJob); //true

function printValue(obj, key){
    console.log(obj[key]);
} 
//object에 key라는 property가 들어있지 않을 때 사용
//사용자에게 key라는 input을 받아야 하는 상황에 사용
printValue(emma, 'name'); //emma

3. Property value shorthand

const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
const person4 = makePerson('jay', 5);
console.log(person4); //object { name: 'jay', age: '5' }

function makePerson(name, age){
    return{
        name,
        age
    }
//key와 value의 이름이 동일하다면 name:name을 name으로 생략 가능(shorthand)
}

4. Constructor function 생성자 함수

• class가 없었을 때 사용하던 방법이다.
• 함수명은 대문자로 시작해야 한다.
• class와 같이 호출시 new 키워드를 사용한다.

const person5 = new Person('kane', 6);
function Person(name,age){
    this.name=name;
    this.age=age;
    //return this
}

class Person {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
}//위와 동일

console.log(person5); //Person { name: kane, age: 6 }

5. In operator : property existance check

• 해당하는 object 안에 key가 있는지 없는지 확인하는 방법이다.

console.log('name' in emma); //true
console.log('random' in emma); //false
console.log(emma.random); //정의하지 않은 값을 출력할 때는 undefined 

6. For..in vs For..of

//for(key in obj)

for (const key in emma){
    //emma가 가지고 있는 key를 블럭을 돌 때마다 key라는 지역변수 안에 할당
    console.log(key);
} //name, age, hasJob 3번 출력

//for (value of iterable)
const array = [1, 2, 5, 6];
for (const value of array){
    console.log(value);
} //1, 2, 5, 6 4번 출력

7. Fun cloning

//Object.assign(targetObj, [obj1, obj2, obj3...])
const user = {name: 'emma', age: '20'}
const user2 = user;

//user2가 user를 가르키게 했을 때 user의 reference가 동일하게 user2에 할당
user2.name = 'coder';
console.log(user); //coder, 20로 출력. user의 reference도 바뀜

//object를 복제할 수 있는 old way
const user3 ={}; //텅텅 빈 obj 만들기
for (const key in user){
    user3[key]=user[key]; //user 안에 있는 key 는 name, age. user3의 key가 user의 key에서 복사
}
console.log(user3); //coder, 20

//object를 복제하는 다른 방법
const user4 = Object.assign({}, user); //복사하고자 하는 target과 리턴하려는 source를 함께 입력
//object.assign은 얕은 복사이며 최상위 속성만 복사
console.log(user4); //coder, 20

//다른 예제
const fruit1 = {color: 'red'};
const furit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, furit2);
console.log(mixed.color); //blue
console.log(mixed.size); //big 복제 방향으로 덮힌다

얕은 복제, 깊은 복제 참조