JavaScript(ES6)|Object

Objects

-one of the JavaScript's data typys.

-a collection of related data and/or functionlity.

-Nearly all objects in JavaScript are instances of Object.

-Object = {key:value}; (오브젝트는 키와 밸류의 집합체이다.)

 

 

1. Literals and properties

 

프리미티 타입은 변수 하나당 값을 하나만 담을 수 있다.

이렇게 하면 추가해야 할 인자들이 많아 짐.

관리가 힘들다.

 

 

이것을 개선하고자 object를 사용한다.

이렇게 파라미터에 person이라고 지정하고

console.log(person.name)';처럼 작성.

 

그리고 const ellie = {name: 'ellie', age: 4};작성.

출력도 print(ellie);만 하면 돼서 편함.

 

 

*object를 만드는 방법

const obj1 = {};  // 'object literal' syntax

const obj2 = new Object();  // 'object constructor' syntax

 

 

자바스크립트는 프로그램이 동작하고 있을때 결정되는 동적인 언어.

그렇기 때문에 뒤늦게 하나의 변수를 추가할 수 있다.

다른 언어에서는 흔한 일은 아니지만 자바스크립트에서는 가능한 일.

하지만 이렇게 코딩하면 유지보수가 힘들고 생각지도 못한 에러가 발생할 수 있으므로

이런 방법을 피해서 코딩하는 것이 좋다.

 

뿐만 아니라 삭제도 가능.

 

 

 

2.Computed properties

(계산된 properties)

-key should be always string.

 

오브젝트 안에 있는 데이터에 접근할때는 .을 이용했는데

다른 방법으로는  [ ]안에 작성하는 방법도 있다.

결과 값이 똑같이 출력되는것을 위 사진에서 볼 수 있다.

 

*여기서 주의할 점은 꼭 'srting' 타입으로 작성해야함.

 

 

삭제한 hasJob 프로퍼티를 다시 []를 통해 만드는 방법.

 

 

 

** .과 [ ]의 상황에 따른 이용법.

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

[ ] -> 정확하게 어떤 키가 필요한지 모를 때.

 

* [ ]가 필요한 예시.

 

printValue함수에 key라는 값을 사용자에게 인풋을 받아서 출력하는 것이라고 하면

코딩할 때는 알 수 없는 값이 된다.

그래서 .을 사용하게 되면 '오브젝트에 key라는 프로퍼티가 들어 있니?'하고

undefined을 출력하게 됨.

 

 

그래서 이때는 [ ] (Computed properties)를 사용해야 한다.

 

 

 

 

3.Property value shorthand

 

person의 오브젝트를 늘리려면 하나하나 name, age를 작성해야 하는 번거로움이 있다.

 

 

이렇게 함수를 사용해서 보다 간편하게 코드를 작성할 수 있다.

 

 

이때, 자바스크립트에는 priperty value shorthand라는 기능이 있어서

키와 밸류의 이름이 동일하다면 하나만 작성해도 오브젝트가 생성된다.

 

 

 

 

4.Constructor Function

 

오브젝트를 필요할 때마다 하나하나 만들게 되면,

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

그래서 함수를 이용해 값만 전달해주면 오브젝트를 만들 수 있는 방법을 사용.

makePerson함수는 class 같은 존재. 즉, 템플릿 같은 것.

그래서 class가 없을 때는 이런 식으로 많이 작성을 했음.

 

다른 계산을 하지 않고 순수하게 오브젝트를 생성하는 함수들은

보통 이름을 대문자로 시작함. makePerson -> Person

 

또 return을 사용하지 않고 클래스에서 사용한 것처럼

this. 을 사용해서 작성하게 됨.

 

 

호출도 클래스에서 사용한 방법처럼 new를 통해 호출하게 됨.

 

 

생략된 것은,

새로운 오브젝트를 만들어서 this에 새로운 프로퍼티를 넣고,

결국 이 this를 리턴하는 함수.

 

 

 

 

5.in operator: property existence check (key in obj)

-해당하는 오브젝트 안에 key가 있는지 없는지 확인하는 것.

 

있으면 true, 없으면 false.

 

 

6.for..in vs for..of

 

 

 

for (key in obj)

 

in이라는 키워드를 사용해서 ellie안에 있는 모든 키들을 출력할 수 있음.

console.clear();을 이용하면 이전 로그들을 지울 수 있음.

 

 

for (value of interable)

:오브젝트를 쓰는 게 아니라 배열과 같은 배열, 리스트 같은 것들을 씀.

 

array의 값을 출력하려면 원래는 이런 코드를 작성했을 텐데

이것은 그렇게 효율적인 코드가 아님.

 

 

이렇게 for of를 사용하면 더 간단하게 쓸 수 있음.

 

 

 

 

7.Fun cloning

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

 

 

 

user에 name과 age의 메모리를 주고,

user2를 만들어 user와 같다고 주면

user2의 name을 수정하면

user의 name도 수정되어 있음.

이것은 user와 user2의 가리키는 메모리의 값이 같아서 일어나는 일.

 

 

그럼, 오브젝트를 복제할 수 있는 방법은 없을까? 있다.

 

-옛날 방법

텅텅 비어져 있는 오브젝트를 먼저 만들고,

for..in을 사용하여 오브젝트를 빙글빙글 돌면서 수동적으로 할당.

코드 설명

user안에 있는 key를 빙글빙글 돌면서 -> name, age

첫 번째 돌때는 user에 있는 첫번째 키인 name, 두 번째는 두번째 키인 age가 할당.

 

 

-Object.assign

자바스크립트 자체에 있는 Object의 assign을 사용할 수 있다.

빈 user4를 생성하고

Object.assign(전달할 오브젝트, 복사할 오브젝트);을 입력.

 

 

또 다른 방식으로는 전달하는 오브젝트는 텅텅 비어져 있고 { },

리턴되는 값은 두 개가 섞인 것이 리턴되니까 위 그림처럼 한 번에 리턴을 받아오게 작성해도 됨.

 

 

-another example

color라는 공통된 프로퍼티를 가지고 있는 오브젝트를 

assign 하면 뒤에 있는 오브젝트의 값이 출력됨.

이유는 뒤에 있을수록 그 값을 덮기 때문.

fruit3이라는 black 색상의 오브젝트가 뒤에 있었다면 색상은 black이 나왔을 것임.