드림코딩 by 엘리_Object

---

Object

---

object 생성방법

 

obj를 만드는 방법은 {}을 사용해서 만들 수 도있고, 

이 방법을 object literal 문법 이라 한다.

 

클래스를 이용해서 new라는 키워드를 이용해서 class를 template를 이용해서 obj를 만들 수 도있다.

이 방법을 object constructor 문법 이라 한다.

우리가 obj를 new 라는 키워드를 통해서 생성하면 Object()에 정의된 constructor가 호출이된다.

그래서 이름이 지어진 것이다.

자바스크립트 에서는 클래스가 없어도 {} 괄호를 이용해서 obj 생성이 가능하다. 

 

자바스크립트는 동적으로 런타임일때 결정되는 언어인데

(Runtime : 프로그램이 동작하고 있을 때)

그래서 뒤늦게 하나의 properties가 추가 가능하다.

이미 우리가 name과 age를 obj에 정의 하였음에도 불구하고 뒤늦게 추가 가능하다.

다른 언어에서는 흔한 일은 아니다. 그래서 가능하면 이것을 피해서 코딩하는 것이 좋다.

또 하나 가능한 것은 삭제가 가능하다.

 

object는 key와 value의 집합체 이다.

이 말은 obj는 key 우리가 접근가능한 변수 property와 

그 property가 가지고 있는 value 이렇게 두 가지로 나누어지는게 보인다.

 

Computed properties ( object['key'] _ 계산된 properties ) 

 

 

우리가 obj에 있는 데이터에 접근시 .(dot)을 이용해서 데이터에 접근했는데 다른 방법도 있다.

anglera 라는 obj에 []를 이용해서 name 이라는 string 즉 obj안에 있는 변수의 이름을 string 형태로 접근이 가능하다. 

따라서 obj의 name property를 .dot 이란 문법을 이용해서 접근이 가능하고

또는 computed properties 이렇게 배열에서 우리가 데이터를 받아오는 것처럼 접근이 가능하다.

여기서 주의할 점은 properties는 string 타입으로 해야한다.

항상 key는 string 타입으로 지정해서 받아야된다.

angelra 라는 obj에 computed properties 문법으로 value를 ture로 할당하게 되면 다시 true가 출력된다. 

 

그렇다면 어떤 경우에 Computed properties가 쓰일까?

우리가 .dot 을 쓸때는 코딩하는 그 순간 우리가 정말 그 key에 해당하는 값을 받아오고 싶을 때 코딩한다.

computed properties를 쓸때는 우리가 정확하게 어떤 key가 필요한지 모를 때 

즉 runtime에서 결정될때 computed properties를 쓰게된다.

우리가 실시간으로 원하는 key의 값을 받아오고 싶다면 computed properties를 쓴다.

 

 

나중에 동적으로 key의 value를 받아와야 할때 유용하게 쓸 수 있다.

이때 key는 반드시 string type으로 전달한다.

 

Lovely shorthand

 

 

templete function 이란?

여기서 우리가 해결하고자 했던 문제점은 obj를 필요할 때 일일이 만들게 되면 불가피하게

동일한 key와 value들을 반복해서 작성해야 하는 문제점이 있다.

우리가 함수를 이용해서 값만 전달해주면 obj를 만드는 유용한 함수를 만들었다.

 

constructor function 이란?

이렇게 다른 계산을 하지않고 순수하게 obj를 생성하는 함수들은 보통 함수명이 대문자로 시작하게 만든다.

return을 사용하지 않고 this.name 이런식으로class에서 constructor에서 했던 것처럼 작성하게 된다.

(this.name에 name을 할당한다.)

또한 호출할때도 클래스에서 object를 만드는 것처럼 할 수 있다.

이렇게 하면 자바스크립트 엔진이 알아서 obj를 생성해준다.

 

우리가 새로운 obj를 만들어서 this에 name이라는 새로운 properties를 넣고결국은 this를 return 하는 함수이다.

 

in operator : property existence check (key in obj) 

해당 하는 obj안에 key가 있는지 없는지 확인하는 것이다.

간단하게 key가 있는지 없는지 확인 할 수 있는 키워드 이다.

우리가 정의하지 않은 다른 key를 사용하게 되면 false라고 나온다.

정의하지 않은 값에 접근하게 되면 undefined가 출력된다.

in 이라는 키워드를 이용해서 해당하는 key가 object에 있는지 확인 가능하다. 

 

for in, for of

 

 

cloning (object 복제)

const user = { name: 'seul-ki, age: 33 };

const user2 = user;

 

 

그럼 메모리는 어떤 변화가 생길까? -->

user라는 변수는 메모리를 가르키고 있고 

메모리에는 reference가 들어있고

이 ref는 실제로 name: 'seul-ki', age: 33 이라는 obj를 가리키고 있는 ref가 들어있다.

그리고 user2의 변수는 user가 할당되어 있다.

그말은 user안에 들어있는 ref값이 user2에도 동일하게 할당된다는 말이다.

그래서 user2에도 동일한 ref가 들어있다.

그리고 이 동일한 user2(reference)에도 똑같은 seul-ki obj를 가리키고 있다.

 

old way

텅빈 obj를 만들고

for..in 으로 obj를 빙글빙글 돌면서 메뉴얼적으로 수동적으로 할당해주는 방법이 있다.

 

new way

 

 

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

자바스크립에 있는 모든 object는 자바스크립트에 탑재되어 있는 Object를 상속한다.

이렇게 새로운 함수나 API를 쓸 때 어떤 파라미터를 전달해서 어떤 값이 리턴되는 지를 꼭 확인하고 쓰는 것이 중요하다.

assign은 복사하고자 하는 target과

복사를 할려고 하는 그 소스를 같이 전달해준다.

return값은 target과 복사하고자 하는것이 통합된 것이 return 된다.