원시형 타입은 변수 하나에 값을 하나만 담을 수 있다.
출력 시에도 각각의 변수를 파라미터로 전달해줘야하여 함수를 정의하여 쓸 때도 각각의 변수를 파라미터로 받아올 수 있아야하는데 만약 인자가 많아지면 추가해야하는 것들이 너무 많아져
관리하기 힘들고 로직컬하게 그륩으로 묶어서 생각하기도 어렵다.
- literal과 properties
따라서 이를 개선하기 위해서 object를 사용한다.
이렇게하면 함수 정의시 파라미터에 인자를 오브젝트 하나만 받고 호출 시에도 오브젝트만 넣어주면 된다.
오브젝트는 퀄리브라켓을 {} 이용해서 만드는데 이를 오브젝트 리터럴이라 부른다.
클래스 템플릿을 이용해서 new 키워드를 붙여 new Object();를 만드는 것을 오브젝트 컨스트럭터라고 부른다. new 키워드로 오브젝트를 생성하면 오브젝트에서 정의된 컨스트럭터가 호출이 된다.
JS는 dynamically typed language로 이는 동적으로 타입이 런타임, 프로그램 동작하고 있을때 결정되는 언어로 뒤늦게 하나의 프로퍼티를 추가할 수 도 있다. 또한 delte키워드로 프로퍼티를 삭제할 수 도 있다.
중요한 건 오브젝트는 key와 value의 집합체라는 것이다. 이는 오브젝트는 key, 바로 우리가 접근할 수 있는 변수 프로퍼티와 그 프로티가 가지고 있는 값으로 나눠진다는 걸 알 수 있다.
object = {key:value}
- Computed properties
오브젝트에 있는 안에 있는 값, 데이터에 접근 시엔 '.key' 처럼 이용 접근하거나 또는
Computed properties, 배열에서 데이터를 받아오는 것처럼 []를 이용해서 오브젝트 안에 있는 변수를 string형태로 ["key"] 다음과 같이 넣어주면 된다.
주의해야할 점은 key는 항상 string 타입으로 넣어야한다는 것이다.
마찬가자로 Computed properties를 이용해서 런타임 시 프로퍼티를 추가할 수 있는데
object["newKey"] = value;를 사용하여
보통 ., dot을 쓸 땐 코딩하는 순간 그 키에 해당하는 값을 받아오고 싶을 때 .을 쓰며
Computed properties는 방금과 같이 runtime에서 key가 결정되는 것 처럼 정확하게 어떤 key가 필요한지 모를 때 주로 사용한다.
코딩 시에는 .을 쓰고 실시간으로 원하는 key의 값을 받아오고싶을 땐 Computed properties로 obj[key]와 같이 쓰는 것이 좋다. 이처럼 동적으로 key를 받아야할 때 유용하게 쓰인다.
-
Property value shorthand
오브젝트가 다수 있고 공통된 프로퍼티를 가지고 있을 때 새로운 오브젝트를 추가시 또 프로퍼티를 추가로 작성하는 것은 비효율적이다.
이것을 편하게 하기 위해서
Property value shorthand는 key와 value가 동일하다면 name : name을 name으로 생략할 수 있다.
오브젝트를 필요할 때 일일이 만들면 불가피하게 동일한 키 그리고 밸류를 반복해서 작성해야되는 문제점이있다. -
Constructor Function
따라서 이를 함수를 이용해서 값만 전달해주면 오브젝트를 만드는 유용한 함수를 만들 수 있다. 이는 마치 클래스와 같이 템플릿같은 역할을 한다. 그래서 클래스가 없을 땐 이러한 함수를 이용하여 작성이 주로 되었다.
이런식으로 다른 계산을 하지 않고 순수하게 오브젝트를 만드는 목적을 가진 함수는 함수명을 대문자로 적어주고 return이라 하지 않고 class에서 constructor안에 했던 것처럼 this.key = value와 같은 형태를 이용해서 작성할 수 있다.
호출 할 때도 class에서 오브젝트를 만들때 처럼 new 키워드로 new Object(key, ...)와같이 만들어 주면된다.
이러한 함수에서는 생략된 부분은 새로운 오브젝트를 만들어서 this = {}; this에다가 프로퍼티를 넣어주는 부분과 이러한 this를 리턴하는 return this 부분이 라고 보면 된다.
- in operator: property existence check (key in obj)
해당하는 오브젝트안에 키가 있는지 없는지 확인하는 키워드로 in 키워드를 중심으로 외쪽에 'key'를 스트링으로 담아주고 오른쪽에 해당 오브젝트를 넣어준다.
- for..in
for문을 in키워드를 사용하여 for(key in obj) 오브젝트가 가지고 있는 key들이 블록을 돌 때마다 지역변수 key에 할당이된다. 그래서 블록안에서 할당한 key를 호출하면 object안에 있는 모든 key들을 불러온다.
for ..of (value of iterable)
for of 오브젝트를 쓰는 것이 아닌 배열과 같은 배열 리스트, 순차적으로 리터러블한 아이들을 사용하는 반복문이다. 배열 안에 있는 값을 부르기 위해
for (let i=0; array.length;i++){ console.log(array[i]) }와 같이 쓰던
for (value of array){console.log(array[value])}와 같이 간단하게 작성하여
array안에 있는 모든 값들을 value에 할당되어 순차적으로 출력하거나 값을 계산하는 작업을 할 수 있다.
- Fun cloning
오브젝틀를 만들고 다른 오르젝트가 기존의 오브젝트를 가리키게 하고 새로운 오브젝트가 기존의 오브젝트의 프로퍼티를 수정하면 어떤일이 벌어질까?
당연히 같은 레퍼런스를 가리키고 있기때문에 프로퍼티를 수정하면 기존의 오브젝트도 변경된다.
그렇다면 오브젝트를 복제할려면 어떻게 해야할까?
Object.assign(dest, [obj1, obj2, obj3...]}
object에 있는 assign을 사용하면 된다. JS에 있는 모든 오브젝트는 이 Object(JS에 기본적으로 탑재된 Object 중 하나)를 상속한다.
따라서 빈 오브젝트를 가진 newObj를 정의한뒤 Object.assign(newObj, copyobj);를 이용하여 복사해준다. 또는 전달하려는 newObj를 비어놓은 상태로 {}인자를 넣어주고 리턴된 값이
{}와 newObj가 섞여서 나오기 때문에 이를 새로운 newObj에 할당해줘도된다.
만약 여러가지 오브젝트를 assign소스로 전달하면 가장 뒤에 전달한 obj일수록 앞에 동일한 프로퍼티가 있다면 값이 계속 덮여서 씌어진다.
