object(JavaScript)

object

 

literals properties

primitive 타입은 변수 하나만 담음

만약 출력하는 함수 만들면 하나씩 파라미타 써야해

문제는 인자가 많아지게 되면 추가해야 할 것들이 많아져 관리 힘듦

 

개선하고자 오프젝트를 씀

프린트할때 위와같이 eliie만 전달하면 끗

 

오프젝트 만들때 1. {} 로 만들기 2. class 이용해 만들기 

 

자바스크립트는 동적으로 타입이 런타입때(프로그램이 동작할때) 결정됨

그래서 뒤늦게 하나의 프로퍼티를 추가할 수 있음

 

이미 name, age 가 들어있는 오브젝트를 정의 했음에도 

뒤늦게 변수 추가 가능함 

위와 같은 경우 ellie.hasjob 이 true 가 출력됨

이렇게 동적이면 빠르지만 유지보수 힘듦

가능하면 피하는게 좋음 

 

삭제도 가능

delete사용

위와 같은경우 만들었던거 삭제되어서 undefinded가 출력됨

 

중요한 것은 object는 key와 value의 집합체 라는것

접근할 수 있는 변수. 프로퍼티와 그 값 두가지로 구성됨

 

computed properties

object['key']

계산된 프로퍼티

 

Object안의 데이터 접근 

1. 오브젝트 안의 데이터 접근시 . 점을 이용

2. 다른 방법은 오브젝트에 괄호[]이용해 오브젝트안의 변수를 스트링형태로 입력함

프로퍼티 (key)는 string 타입이어야 함

그냥 name이라고 하면 값 안나와 

 

 

위에서 .으로 hasjob 프로퍼티 만든거 처럼

[] 이용해서 프로퍼티 만들기 가능함

 

어떤경우에 어떤걸 쓰지?

.을 쓸뗀 코딩하는 순간에 그 키에 해당하는 값을 받아오고 싶을때

[] 정확하게 어떤 키가 필요한지 모를때 (런타임에서 결정될때) 사용

실시간으로 원하는 키를 받아오고 싶으면 []를 씀

 

key는 항상 string 타입으로 '' 를 붙여 전달해야 함

위와 같은경우 undefined 가 출력됨

위와 같이 . 이아닌 []를 사용해야 정상적으로 출력됨

 

동적으로 키에 관련된 벨류를 받아와야 할때 유용

 

lovely shorthand

property value shorthand

 위와 같이 person4를 만들고 싶은경우 번거롭게 name. age 프로퍼티를 입력해야 함

 

편하게 하기 위해

아이디어 1. 함수만들기

자바스크립트는 property value shorthand 기능이있어서

key 와 value가 동일하다면 생략가능함

 

위와 같이 코딩시 person4 는 {name : "ellie" , age : 30} 이 출력됨

 

constructor function 

해결하고자 한 문제점 ; 오브젝트를 필요할때 일일히 만들면 동일한 키와 벨류를 반복해서 작성해야함

이를 해결하기 위해 만든 makePercon은 class와 같은 역할을 함

이전에 클래스가 없을때 위와 같이 사용

위와 같이 다른 계산 하지 않고 오브젝트를 생성하는 함수는 대문자로 시작하게 만듦

return 아닌 this. 이용 호출할때도 아래 와 같이 new 를 사용함(클래스에서 오브젝트만드는것처럼)

this={}, return this ; 가 생략된 것임

 

in operater

 

in 키워드를 이용해서 해당하는 오브젝트안에 키가 있는지 확인하는 것

정의하지 않는 key를 접근하면 undefined 출력

위의 경우 true true false undefined 순

 

+ console.clear() 하면 이전에 출력된거 다 지워짐

 

for in, for of

 

for in 

키들이 출력됨

 

for of

배열, 리스트같은 순차적인 것에서 씀

위와 같이 배열의 값을 순차적으로 돌아가며 출력할 경우에 가능은 하지만 번거로움

 

쉽게하기 

array에 있는 값들이 value에 순차적으로 할당되면서 값을 출력함

cloning

user2가 user를 가르키고 있을때 메모리의 변화

메모리를 가르키고 있는데 레퍼런스가 들어있어, 오브젝트 가르키는

user2의 변수가 가르키는 메모리에는 동일한 레퍼런스가 들어있고 같은 오브젝트 가르킴

 

그런데 

위와 같이 user2의 name을 바꾸면 ??? user는 어떻게 될까??

user 또한 ellie가 coder로 바뀌게 됨 

 

그럼 따로 사용할 수 있도록 진짜로 오브젝트를 복제할수있는 방법??

 

방법1. for in 돌리기

 

방법2. object에 있는 assign 이용

(자바스크립트의 모든 오브젝트는 Object를 상속함)

Object.assign(복사되어지는 오브젝트, 복사하고싶은 오브젝트)

또는 위와 같이 바로 할당하는 식으로도 가능

 

assign 함수는 여러개의 소스를 전달할 수 있음

위와 같이 color는 동일하게 있고 size만 추가로 fruit2에 있는 경우에 

무엇이 출력 될지?? blue big 이 출력됨

 

assign에서 인자로 들어가는 오브젝트가 여러개일때 뒤에 입력된 것 일수록  앞에 공통적인 값이 있다면

덮어쓰기 되어지기 때문