[드림코딩]자바스크립트 기초 정리 ⑤ Object 오브젝트란?

Literals and properties

 

자바스크립트에서 primitive 타입을 사용하면 인자가 많아질수록 추가해야하는 것들이 점점 늘어나서

관리하거나 그룹으로 묶어서 생각하기도 힘들다. 그래서 이걸 개선하고자 오브젝트를 사용한다.

 

 

 

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

또한 자바스크립트는 매우 동적인 언어이므로 데이터 타입이 런타임 때 결정된다.

그래서 뒤늦게 property를 추가하거나 삭제가 가능한데, 금방 코딩하기엔 좋지만 나중에 유지보수가 힘들어진다는

단점이 있다.

 

 

computed properties

 

코딩하는 그 순간, 키에 해당하는 값을 받아오고 싶을 때나 평소 코딩할때는 주로 . 을 사용하고

컴퓨티드 프로퍼티즈 ['']를 쓸땐 정확히 어떤 키가 필요한지 모를 때 (런타임에서 결정될 때)

실시간으로 원하는 키 값을 받아오고 싶으면 컴퓨티드 방식을 사용한다.

 

 

예를 들어서,

우리가 key는 사용자에게 받아오는 값이라 코딩하는 상태에는 저기에 어떤 값이 들어가는지 모름

(참고로 key는 항상 string타입으로 전달) 위 처럼 작성하면 undefined가 출력된다.

console.log(obj.key)는 오브젝트에 key가 들어있는지 확인하지만 지금은 없기 때문

여기서 컴퓨티드 프로퍼티즈를 사용하여 console.log(obj['name']); 으로 바꿔주면 값이 ellie로 잘 출력된다.

 

 

shorthand

 

반복되는 name, age를 makePerson이라는 함수를 만들어서 한 번에 사용하는데

여기서 key (name) 와 value (age) 의 이름이 동일하면 아래처럼 생략이 가능하다

 

 

Constructor function

오브젝트를 필요할때 일일이 만들게 되면 동일한 키와 벨류를 반복해서 작성해야하는 문제점이 생김'

그래서 makePerson이라는 함수를 이용해서 name,age라는 값만 전달해주면 오브젝트를 알아서 만들어주는 함수를 만듦

 

 

여기서 makeperson은 지난 시간의 class같은건데, 이전 자바스크립트에서 클래스가 없을 땐 이런 식으로 작성이 많이 됐었다. 이렇게 다른 계산을 하지않고 순수하게 오브젝트를 생성하는 함수들은 대문자로 시작하도록 함수를 만든다 (makePerson ⇒ Person)

return 과정을 this.name 이런식으로 작성하고 (클래스에서 constructor 생성할때와 비슷) 호출할때는 앞에 new 붙여서 new Person이라고 작성한다. 이를 Constructor Function이라 부른다

 

 

In operator

해당하는 오브젝트 안에 키가 있는지 없는지 확인하는 것이다

 

random은 없어서 false로 나온다

 

 

for in, for of

 

for of는 ellie안에 있는 모든 key를 가져와서 콘솔창에 name, age, hasJob 을 출력한다

 

일반적인 for문

for of 사용시

for of는 배열과 같은 배열리스트 출력한다.

원래는 위의 방식으로 출력해주었는데 for of를 사용하면 두 번째 처럼 사용이 가능하고

for of는 array에 있는 모든 값들이 value에 할당되면서 순차적으로 나온다

 

 

cloning

 

user2에 user를 대입해서 user2가 user와 같은 레퍼런스를 갖게된다

그래서 user2의 이름을 corder로 변경해주면 결국 같은 레퍼런스에 있는 eliie라는 이름이 corder로 바뀌게 된다

(=> user 에게도 영향이 간다)

 

 

old way

 

 

old way 대신 밑의 방식으로 object.assign에 전달하여 정의하는게 더 편하다

참고로 assign에는 여러개의 소스를 전달할 수 있다

 

 

assign( target, source ) 로 복사하고자 하는 타겟과 복사되고자 하는 소스를 같이 전달해줘야하고

리턴값으로는 타겟과 소스가 통합 된 아이가 리턴된다.

 

 

위의 경우는 뒤에 fruit2가 1에 덮여 씌여지는데 assign은 뒤에있는게 앞에꺼를 대체하게 된다

그래서 fruit1의 color가 red임에도 불구하고 뒤의 friut2의 color인 blue가 출력된다.