Obejct에 대해서

오브젝트는 무엇이고 어떻게 쓰면 좋은지 알아보자

Primitibe 타입은 변수 하나당 값을 하나만 담을 수가 있는데 아래는 추가해야될 것이 많을 때 관리하기 힘든 로직컬하게 그룹으로 묶어서 생각할 수 없는 코드 이다. 

이것을 개선하고자 오브젝트를 쓴다. 전달할 때도 jay만 호출하면 되니까 print jay를 쓴다.

간편하게 데이터를 관리할 수 있다.

자바스크립트에서는 클래스가 없어도 중괄호를 이용해서 바로 오브젝트를 생성할 수 있다.

오브젝트를 만드는 방법으로는 bracket을 이용해서 만들 수도 있고 클래스를 이용해서 만들 수도 있다.

또 클래스를 template를 이용해서 만들 수가 있다.

자바스크립트는 동적으로 타입이 runtime때 결정되는 언어인데 그래서 아래와 같이 미친 짓을 할 수가 있다.

뒤늦게 하나의 property를 추가할 수가 있는데 이미 name과 age라는 오브젝트를 정의했음에도 불구하고

 

일을하는지안하는지도 추가하고 싶어서 넣으면 추가할 수가 있다.(가능하면 피해서 코딩하자 왜냐 유지보수하기 힘들고 예상치 못한 에러가 발생하기 때문에)

삭제도 가능한데 hasJob을 빼고 넣으면 undefined라고 나온다.

중요한 것은 오브젝트는 key와 value의 집합체인 것이다. 즉 오브젝트는 키 사용자가 접근할 수 있는 변수 프로퍼티와 그 프로퍼티가 가지고 있는 값 두가지로 나눠진다.

 

두번째로는 Computed properties에 대해서 보면

계산된 properties라는 말인데 오브젝트에 안에 있는 데이터에 접근할 때 .을 이용해서 (jay.name) 접근했는데 다른방법도 있다. jay라는 오브젝트에 대괄호를 이용해서 name이라는 스트링 형태로 접근이 가능하다.

그리고 여기서 property는 string타입으로 해야한다. 즉 key는 항상 string타입으로 지정해서 해준다.

 

computed properties를 이용해서 위에서 삭제한 hasjob을 넣어서 결과값을 넣을 수가 있다.

 

.이라는 것을 쓸때는 코딩하는 순간 키에 해당하는 값을 받아오고 싶을 때 쓴다.

[]를 쓸때는(computed property) 정확하게 어떤 키가 필요한지 모를 때 즉, 런타임에서 결정될 때 computed property를 쓰게 된다. 그래서 코딩할 때는 .을 쓰는게 맞다.

 

실시간으로 원하는 key의 값을 받아오고 싶으면 []을 쓰면된다. 한 가지 예를 들면 printValue라는 함수가 있다고 하면 obj와 key를 받아서 obj와 key에 상응하는 value를 출력하는 함수이다. 언제어떤 키를 받을지 모른다. 즉 오브젝트에 키라는 프로퍼티가 들어있냐 했을 때 없기 때문에 이때는 computed property를 쓴다.

즉 나중에 동적으로 키에 관련된 벨류를 받아올 때 유용하게 쓸 수 있다.

 

세 번째로는 shorthand이다

 

person1 2 3 세 가지의 오브젝트를 생성해 놨는데 여기서의 문제점은 오브젝트를 필요할 때마다 만들게 되면 불가피하게 동일한 키와 벨류들을 반복해서 작성해야되는 문제점이 있다.

 

여기서 4번째 사람을 만들라면  person이라는 함수를 만들고 함수안에서 오브젝트를 만들어서 리턴해주는것이다.

그래서 함수를 이용해서 값만 전달해주면 오브젝트를 전달해주는 유용한 함수를 만들었다.

 

여기서 Person이라는 것은 class같은 것이다. 즉 template같은 것이다. 이전에 js에 class가 없을 때는 다른 계산을 하지 않고 순수하게 오브젝트를 생성하는 함수들은 대문자로 시작하도록 함수를 만들고 return이라는 값을 하지않고 this.name = name; 이런식으로 아래와 같이 작성한다.

 

이렇게 하면 자바스크립트 엔진이 알아서 오브젝트를 생성해준다. 여기서 생략된것은 this = {};(새로운 오브젝트를 만들어서) (this.name이라는 프로퍼티를 넣고)  return this; 이 두개가 생략됐다.=> Constructor function

다섯번째로는 in operator이 있다.

해당하는 오브젝트 안에 키가 있는지 없는지 확인하는 것이다. name이라는 key안에 jay오브젝트가 있는지 확인해보면 

true라고 나온다. 간단하게 키가 있는지 없는지 확인할 수 있는 키워드이다.

여기서 만약 정의하지 않은 키를 적으면 undefined가 나온다. 이렇게 in이라는 키워드를 이용해서 해당하는 키가 오브젝트 안에 들어가 있는지 확인할 수 있다.

여섯번째로는 for.. in, for..of이다

in이라는 키워드를 이용해서 쓸수 있다.

jay가 가지고 있는 키들이 블록을 돌 때마다 key라는 지역변수에 할당이 되어진다. 이렇게 key를 출력하게 되면 jay안에 있는 모든 key들이 출력되어진다. 이전에 있는 로그들을 clear을 이용해서 다 지워주면 이전것들이 다 지워진다. 이렇게 하면 3가지의 key들이 출력되어진다.

 

그래서 모든 키들을 받아와서 처리하고 싶을 때 이렇게 for in을 쓰면 좋고 한개 더있는데 for of이다

for of는 오브젝트를 쓰는 것이 아니라 배열과 같은 배열 리스트 이렇게 순차적으로 이터러블한 것들을 쓴다.

순차적으로 담겨 있는 데이터가 있다고 가정하면 데이터의 모든 값들을 찍을려면 예전에는 let i를 찍어서 

for(let i = 0; i <array.length ; i++) {

console.log(array[i]);  } 이렇게 해줬어야 했는데 for of를 사용해서 간단하게 사용할 수가 있다.

다음으로는 cloing에 대해서 보면

user라는 곳에 오브젝트를 만들어 놓고 user2가 user를 가르키게 했다. 그러면 메모리에는 user라는 변수는 메모리를 가르키고 있는데 메모리에는 레퍼런스가 들어있다. 이 레퍼런스는 실제로는 name은 jay이고 age는 20이라는 object를 가리키고 있다.

user2의 변수는 즉 user안에 들어있는 레퍼런스의 값이 user2에도 동일하게 할당되어져 있다는 것이다.

즉 user2에도 동일한 레퍼런스가 들어있다. 또 동일한 레퍼런스도 같은 jay 오브젝트를 가르키고 있다.

 

오브젝트를 복제하는 옛날방법은

텅텅 빈 오브젝트를 만들고 for in 오브젝트를 돌면서 메뉴얼적으로 수동적으로 할당해주는 방법이 있다. user3[key]에는 user에 있던 벨류를 할당해주는 것이다.

이렇게 해서 새로 만들어진 user3을 찍으면 값들이 복사되어져 있다.

 

복사는 코더라는 값이 변경된 다음에 복사가 일어나서 코더로 되어 있지만 변경이 되지않으면 jay로 되어있을 것이다.

다시보면 user안에 있는 key들을 돌면서 (첫번째 key = name 두번째 key = age)

 

첫번째 key일때는 user3에 새로운 property name을 추가할 건데

값은 기존에 이름에 있는 key jay가 할당되고 두번째 key age 20이 할당되어지는 것이다.

 

다른 방법은 object에 있는 assign을 쓰는 것이다.

object는 기본적으로 자바스크립트에 탑재되어 있는 오브젝트중에 하나이다.

assign은 복사하고자 하는 target과 그 복사를 하려고 하는 그 source를 전달해줘야 하고 리턴값은 타겟과 복사하고자하는 것이 통합된 것이 리턴되는 것을 볼 수 있다. 

 

그래서 타겟을 만들면 user4 텅텅 비어져있는것을 만든다음에 user4 전달해서

바로 복사하고자 하는 오브젝트를 전달하면 된다. 콘솔찍으면 아래와 같이 나오게 된다.

 

세번째 그림과 같이 해줘도 되고 첫번째 그림처럼 리턴값을 받아와서 작성해도 된다.

 

assign 함수의 인터페이스를 살펴보니까 여러개의 소스도 전달할 수 있었는데 아래와 같은 경우에는 

fruit1과 fruit2를 섞어서 mixed를 만들었는데 mixed 색깔과 크기는 blue와 big이 출력된다. 왜냐 값이 계속 덮어씌워지기 때문이다. fruit3이 있고 color이 black이 있으면 또 덮어져서 mixed의 color은 black가 될 것이다. 

 

 

 

 

참고: https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7