object
1. Literals and properties
-javascript의 데이터 타입
- 자바 스크립트에 있는 거의 모든 objects는 instanceOf Objcet이다.
☆★ object는 {key : value}의 집합체이다!!
key : 접근할 수 있는 property
value : property가 가지고 있는 값
const obj1={}; => literal syntax
const obj2=new Object(); =>constructor syntax
function print(person){
console.log(person.name);
console.log(person.age);
}
const hojin={name:'hojin',age:4}; => 이렇게 클래스 없이 바로 object생성할 수 있다.
key:name value: hojin key: age value:4
print(hojin);
javascript는 runtime때 타입이 정해진다.
따라서 이렇게 동적인 문법도 사용할 수 있다.
hojin.hasJob=true;
console.log(hojin.hasJob);
delete hojin.hasJob; =>이렇게 바로 지울 수도 있다.
그러나 이럴 경우 유지보수가 힘들어지기 때문에 자제하는 것이 좋다.
=======================================================
2. computed properties
☆★
key는 항상 string타입이여야 한다.
console.log(hojin['name']);
hojin['hasJob']=true; =>true로 바꿀 수 있다.
☆★
그냥 hojin.name처럼 .을 사용할때는 키에 해당하는 값을 받아오고 싶을 때 사용한다.
반면 []computed properties는 어떤 키가 필요한 지 모를때, 즉 runtimes에서 결정될때 쓴다.
ex)
function printValue(obj, key){
console.log(obj.key);
}
printValue(hojin,'name');
=> 이렇게 obj.key로 쓸 경우 어떤 key값을 받아와야할지 몰라서 undefined라고 출력된다.
그러나 console.log(obj[key]);라고 쓴다면 hojin이 출력된다.
나중에 동적으로 key에 관련된 value을 받아올 때 유용하다.
=========================================================
3. property value shorthand
이 예제는 사람object를 만드는 예제이다. 이름과 나이를 가지고 있는 사람 object 을 만들때 계속 나열하면 만들기보다는 function makePerson처럼 함수를 이용해 만드는 것이 용이하다.
이때, return에서 key와 value의이름이 동일하면 생략하여 name, age,로 적어도 된다.
보통 이렇게 object를 생성하는 함수는 대문자로 적고 return이 아니라 this를 이용한고 호출할때도
new로 호출한다.
======================================================================
5. in operator : property 체크
console.log('name' in hojin);
object안에 키 name의 값이 있는지 체크하는 것
======================================================================
6. for ..in vs for ..of
for(key in obj)
for(key in hojin){
console.log(key);
}
=> hojin object에 있는 모든 키를 볼려고 할 때 사용한다.
for (value of iterable)
const array=[1,2,3,4,5];
for(value of array){
console.log(value);
}
forEach문과 비슷함
=====================================================================
7. cloning
Object.assign(dest,[obj1,obj2,obj3...])
const user={name:'hojin', age:'25'};
const user2=user;
이럴 때의 메모리 상황은?
이렇게 되어 있다. 따라서 user1이랑 user2가 같은 ref와 같은 값을 가지고 있다고 볼 수 있다.
user2.name='babo';
console.log(user);=>{name: "babo" age: 25}로 user도 변하게 된다.
여기서 이 object를 복제하는 방법은??
Object.assign()를 사용한다.
const user4={}; 1. 먼저 타켓을 빈 공간으로 선언하고
Object.assign(user4, user); 2. assign을 이용해 타겟은 왼쪽 source는 오른쪽에 넣어준다.
=>source에서 여러 개의 소스를 전달해도 되고 배열도 전달이 가능하다.
console.log(user4);
const user4=Object.assign({}, user); => 이렇게 적어도 가능하다
다른 예시)
const fruit1={color:'red'};
const fruit2={color:'green',size:'big'};
const fruit3=Object.assign({},fruit1,fruit2);
console.log(fruit3.color); =>green출력
console.log(fruit3.size); => big출력
왜냐하면 Object.assign({},fruit1,fruit2); 에서 fruit2가 fruit1의 값을 덮어쓰기 때문이다.