Javascript - Object 파헤치기

구현하는 기능과 배우는 컨셉

✅ Object란
✅ Object literal syntax
✅ Object constructor syntax
✅ Computed properties
✅ Property value shorthand
✅ for in - for (key in obj)
✅ Object Copy
✅ cloning - Object.assign

👉 Object란 ?

const name = 'chan';
const age = 4;
print(name,age);
function print(name, age) {
 console.log(name)
 console.log(age);
}

◾ 변수는 값을 하나만 할당할 수있는데, name,과 age를 출력하고싶은 함수를 만들고싶으면
파라미터 두개를 받아와야한다.
◾ 문제는 추가하고싶은 address, last name등 추가해야하는 것들이 많아진다.
◾ 이렇게되며 관리하기 힘들고, 로지컬하게 생각하기 힘들다.

const chan = {name : 'chan',  age : 4 };

print(chan);

◾ 이렇게 객체를 만들면 관리가 편해진다.

👉 Object 만드는 방법 2가지

1. Object literal syntax

const chan = {};

chan.hasJob = true;
delete obj1.hasJob

◾ 자바스크립트는 Dynamically typed language이라서 동적으로 런타임때 결정되는 언어라서 뒤늦게 하나의 프로퍼티를 추가할 수있다.
◾ 삭제도 가능하다.
◾ object는 {key : value}의 집합이다

2. Object constructor syntax

const chan1 = new Object();

👉 Computed properties (계산된 프로퍼티)

chan['name']
chan.name
chan['hasJob'] = true;

◾ dot을 이용하거나 대괄호를 사용해서도 데이터를 가져올 수 있다.
◾ 대괄호안의 key는 꼭 string type으로 가져와야한다.
◾ dot은 코딩하는 그순간 그 key에 해당하는 값을 받아오고싶을 때 사용
◾ 우리가 정확하게 어떤 key가 필요한지 모를때, runtime에서 결정될때 comuputed property를 사용한다.
◾ 실시간으로 원하는 key의 값을 받아오고싶다면 사용한다.

computed properties를 사용하는 예시)

function printValue(obj, key)}{
console.log(obj[key]);
}
printValue(chan, 'name');
printValue(chan, 'age');

◾ printValue는 obj와 key를받아서 그 오브젝트에있는 key에 상응하는 value를 출력하는 함수라서 언제 어떤 key를 받을지 모른다.
◾ 원하는 key를 인풋을 받아서 출력해야한다면, key는 어떤걸 출력해야하는지 모른다.
◾ 그래서 닷이 아니라 computed property를 사용해야한다.
◾ 즉, obj.key 를 사용하게되면 chan의 오브젝트의 key가 있는지 물어본다.
obj[key]를 사용하게되면 변수를 사용할 수 있으므로, 파라미터에서 받아온 값을 받아 원하는 key값을 출력할 수 있게되는것이다.
◾ 동적으로 key의 value를 받아올때 유용하다.

👉 Property value shorthand

const person1 = {name : 'chan', age :1 };
const person2 = {name : 'na' , age : 2 };
const person3 = {name : 'ji' , age : 3} ;
const person4 = makePerson('chan',40);
cosnole.log(person4);
function makePerson(name, age){
return {
name,
age
};
}

결과 값 : { name: 'chan', age: 40 }

◾ 4번째 person4를 만들려면 다시 일일이 객체를 만들어야하는 번거러움이 있다.
◾ name, age 파라미터를 만들어서 함수안에서 obj를 만들어서 return을 하여 반복을 줄일수있다.
◾ 자바스크립트에선 Property value shorthand기능이 있어서 name,age로 줄일수 있다.

👉 Constuctor function

function Person(name,age){
// this = {};
this.name =name;
this.age = age;
  //return this
  }
const person4 = new Person('chan', 30);

◾ 순수하게 obj를 생성하는 함수들은 대문자로 시작한다.
◾ class에서 obj를 만드는것처럼 할 수 있다.
◾ 새로운 obj를 만들어서 this에 name,age이란 프로퍼티를 넣고 this를 return하는 것이 생략되있다.

👉 in operator

console.log('name' in person4);

결과 값 : true

◾ 객체안에 key가 있는지 간단히 확인하는 방법
◾ 객체안에 해당 key가 없다면 undefined가 출력된다

👉 for in - for (key in obj)

const chan = {
  name : 'chan',
  age : '3',
  hasJob :'true'
}
for (let key in chan){
  console.log(key)
}

결과 값 :  
'name'
'age'
'hasJob'

◾ chan가 가지고있는 key들이 block을 돌때마다 key라는 지역변수에 할당되어진다.
◾ name, age, hasJob 3개의 key들을 받아온다

👉 for (value of iterable)

const arr = [1,2,4,5];
for (let i=0; i < arr.length; i++){
console.log(arr[i])
}

for(value of arr) {
console.log(value);
}
결과 값 : 1 2 3 4 5

◾ 순차적으로 data가 담겨있는 배열이있다면, data의 모든값을 출력하려면 for문을 사용해야했다.
◾ for of를 사용하면, arr에 있는 모든 값들이 value에 할당하거나 계산할 수 있다.

👉cloning - Object.assign(dest, [obj1, obj2, obj3...])

const user = { name: 'chan', age : '20'};
const user2 = user;

user2.name = 'coder';
console.log(user);

결과 값 :{ name: 'coder', age: '20' }

user의 객체를 user2에 할당한다면 메모리에는 어떤 변화가 생길까?

◾ user라는 변수는 메모리를 가리키고 있는데 메모리는 레퍼런스를 가지고있다
◾ 레퍼런스는 실제로 name은 'chan' age는 20을 가리키는 레퍼런스를 가지고있다.
◾ user2의 변수는 user가 할당되었는데, user안에 있는 레퍼런스 값이 user2에도 동일하게 할당된다.
◾ 그래서 user2에도 user의 key, vaule 값들이 할당되어진다.

user2에 name을 수정하면 어떻게 될까?

◾ user의 name이 chan에서 coder로 변경되었다.
◾ user2가 가리키고 있는 refernce는 chan을 coder로 변경했기때문이다.

👉 Object 복사방법

old way

const user3 = {};
for (key in user){
    user3[key] = user[key];
 }
 console.log(user3)

결과 값 : '20'
{ name: 'chan', age: '20' }

◾ user안의 있는 key들을 돌면서, 첫번째 key는( name, 두번째는 age가 된다.
◾ 첫번째 name일때는 user3에 새로운 프로퍼티 name을 추가하고, 값은 기존의 있는 user의 key인 name에 있는 value 즉, 엘리가 할당이 된다,
두번째 돌때는 user3에 age라는 프로퍼티가 추가되고 value는 20이 추가된다.

new way

1. const user4 = {};
Object.assign(user4, user);

2. const user4 = Object.assign({}, user);
console.log(user4);

결과 값 :{ name: 'coder', age: '20' }

3. const arr = [{
  name : 'chan',
  age : 17
},
  {
  name : 'bora',
  age : 18
     }]
const user4 = {};
Object.assign(user4, arr);
console.log(user4[0])

결과 값 : 
{ 
'0': { name: 'chan', age: 17 }, 
'1': { name: 'bora', age: 18 } 
}
{ name: 'chan', age: 17 }

◾ assign함수의 첫번째파라미터는 복사하고자하는 target / 두번째 파라미터는 복사를 하고싶은 source를 받는다.
◾ 심지어 배열도 source 파라미터로 받는다.

여러 source를 받는경우

``py
const fruit1 = { color : 'red'}
const fruit2 = { color : 'blue', size : 'big'}
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);

결과 값 :
'blue'
'big'
``
◾ fruit2가 fruit1보다 더 뒤에있기 때문에 앞에있는 fruit1을 덮어버린다.