드림코딩 - 자바스크립트 7. 오브젝트 넌 뭐니?
자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)
-object 선언 방법
1. object literal syntax
const obj1 = { }
class가 없어도 바로 오브젝트 생성이 가능함
2. object constructor syntax
new키워드를 사용하여 class를 이용하는 방법
const obj2 = new Object();
new 키워드를 사용하면
Object에서 정의한 constructor가 호출이 됨
JS는 타입이 Runtime(프로그램이 동작하고 있을 때)때 결정됨
그래서 이미 정의한 오브젝트에
속성을 뒤늦게 추가하거나 삭제할 수 있음
(혼란을 주거나 생각하지 못한 에러가 발생할 수 있어서 가능하면 이용하지 않는 것이 좋지만,,)
- object는 키와 밸류의 집합체이다.
object = { key : value }
- object 안에 있는 데이터에 접근하는 방법
1. 객체명.속성명
2. 객체명['속성명']
*key should be always string*
동적으로 키에 관련된 밸류를 받아와야 할 때 유용함
약간.. 불확실한 경우에 쓰고
보통은 1번을 사용함.
-Lovely shorthand
동일한 키와 밸류가 반복될 때. 반복해서 작성하는 것을 최소화하는 방법
-Constructor function
이렇게 다른 계산을 하지 않고 순수하게 오브젝트를 생성하는 함수들은 대문자로 시작하도록 만듦
클래스에서 컨스트럭쳐한테 했던 것처럼! this를 이용해서 만듦
호출할 때도 마찬가지로 new Person
-in operator
해당하는 오브젝트안에 키가 있는지 없는지 확인하는 것. (key in obj)
console.log('name' in ellie);
true/false 로 출력됨
+
console.clear();
이렇게 하면 콘솔창에 있는 로그들이 지워짐
-for..in vs for..of
반복문 for문을 이용하는 건데,
for ( key in obj ) {
console.log(key);
}
이렇게 하면 obj 안에 있는 모든 key들이 출력됨
for ( value of iterable ) (iterable 이터러블 반복가능한)
오브젝트가 아니라 배열리스트들을 씀
예를 들어
const array = [1, 2, 3, 4, 5];
for ( value of array ) {
console.log(value);
}
1
2
3
4
5
가 출력됨
보통 반복문에서 쓰던 것을 간단하게 쓸 수 있음
-cloning
오브젝트를 복사하고 싶을 때
const user1 = { name: 'ellie', age: 20;}
const user2 = user1
이렇게 하면,
object는 reference 를 가리키고 reference가 각 속성을 가리킴
그래서 user2와 1은 동일한 레퍼런스를 갖고 있고 같은 속성을 가리킴
만약에 user2.name = 'coder';로 바꿔버리면
user1의 이름도 똑같이 바뀌어버림
왜냐면 레퍼런스가 동일하고 같은 속성을 가리키고 있으니까.
그렇다면 이런 방법말고 찐으로 오브젝트를 복제하는 방법은 뭘까
-기존의 방법
-이번에 배울 방법
Object.assign()
assign을 ctrl 누르고 클릭하면 해당 함수에 대한 설명이 나옴
(어떤 파라미터를 전달해서 어떤 값이 리턴되는지 확인하고 쓰는 습관!)
(+ Object JS에 기본적으로 탑재되어있는 오브젝트.
JS에 있는 모든 오브젝트는 Object를 상속함)
assign<T, U>(target: T, source: U): T & U;
복사하고자하는 타겟과
복사하려고하는 소스를 같이 전달해야하고
리턴값은 타겟과 복사하고자하는 것이 통합된 아이가 리턴됨
하지만 주의해야 할 점이 하나 있다.
나중값을 덮어씌운다는 점은 유의해야 한다.
