4장부터는 요약 메모로 진행한다.

객체 

원시타입이 아닌 다양한 Key : Value로 이루어진 속성을 가지고 있다.

{ 키 : 값 }

객체(서랍^ㅁ^) 만들기 2가지 방법

let user = new Object(); // '객체 생성자' 문법
let user2 = {};           // '객체 리터럴' 문법
const cat = '야옹이';      // 'cat' 상수의 '야옹이' 리터럴
const catObject = {      // 'catObject' 상수의 "{ name: 'cat' }" 리터럴
  name: 'cat'
};      

위 서랍의 이름은 user, user2, cat, catObject

빈 서랍의 생성방법은 2가지. 보통 리터럴 방식을 많이 씀.

생성자 : 생성을 위해 도와주는 친구

리터럴 : 한번 정하면 변하지 않는 데이터 자체를 의미 !== 변수파트의 상수와 다름.

 

리터럴과 프로퍼티

 

아무튼 저렇게 중괄호 안에 리터럴 방식으로 객체를 만들었고, 각 리터럴엔 프로퍼티(속성/이름/식별자)이 있다.

const catObject = {
  name: 'cat',  // 첫번째 프로퍼티 name(key), cat(value)
  age: 12       // 두번째 프로퍼티 age (key), 12 (value)
};
alert(catObject.name); // cat

프로퍼티를 추가하고 삭제하는건 자유롭다.

 

상수 객체

상수와 상수객체는 다름.

상수 객체 내부 속성인 key value들은 수정 가능 하지만, 상수로 선언된 상수객체 전체를 객체로 재할당 하려하면 안됌.

 

대괄호표기법

let animal = {
  'animal name': 'nabi'
};

. 찍는 것 말고 키에 접근하는 다른 방법. 키가 공백이 있으면 유용함.

animal["animal name"]

 

계산된 프로퍼티

객체 내부 공간에 속성을 계산해서 동적으로 만들어 저장. "따옴표"로 문자열로 구분하지 않기 때문에 변수로 인식.

 

단축 프로퍼티

받은 매개변수와, 반환하고자 하는 키가 같은 경우 짧게 쓸 수 있다는 의미.

 

프로퍼티 존재 여부 확인‘in’ 연산자로 프로퍼티 존재 여부 확인하기

"animal name" in object
// 를 사용해서 true 가 반환되면 있는거다.

내용이 undefined 인 프로퍼티가 있을 수 있으니, in 연산자를 쓰면 됌.

 

'for ... in' 반복문

내부의 모든 객체를 순환하는 방법.

 

객체 정렬 방식 

정수 - 자동

그외에 추가한 순서.

참조에 의한 객체 복사

참조에 의해 = by reference

변수와 객체는 저장방식이 다르다. 근본적인 리터럴이 저장되어있는 서랍은 따로 있고, 이를 변수명으로 참조하여 접근하는 형태.

새 변수를 만들어 할당하면 바라보는 서랍이 같아지므로 조작을 잘 해야함.

 

참조에 의한 비교

위에서 참조에 복사된 객체 공간을 비교하면, 같다고 판단한다.

같은 내용의 객체라도 다른공간이기 때문에 각각 선언하면 다르다고 판단한다.

 

객체 복사, 병합 Object.assign

복사, 병합, 할당에 대해.

복사

1. 손수 루프 돌며 한땀한땀 복사하는 방법.

2. Object.assign 쓰는 방법.

이걸 쓰면 객체를 여러개 복사해서 전달하는 것. 단점은 동일한 키가 있으면 덮어써짐.

이렇게 그냥 기존 객체랑 합치거나, 빈 object를 dest에 넣으면 그냥 복사할 수 있다.

 

중첩객체복사

객체 안에 객체가 있는 경우 처리.

참조 속 참조이기 떄문에 어설프게 복사하면 내부에 같은 객체가 만들어짐.

그래서 deep cloning 깊은복사 개념이 나옴.

본문에서 안다뤘는데, 여러가지 방법이 있음. 이미 lodash 라이브러리에 구현되어있는걸 쓰거나, 재귀방식을 쓰거나, JSON String으로 내부를 싹 긁어 변환 후, 다시 Object로 만드는방식도 있음. 아래 링크에서 좀 더 설명을 잘 해둠

www.zerocho.com/category/JavaScript/post/5750d384b73ae5152792188d

 

 

가비지 컬렉션

메모리 관리를 수행하는건데, 가비지(garbage-찌꺼기)를 모아다 버린다고 보면 됨.

그 기준을 설명 함.

 

가비지 컬렉션 기준

도달가능성이라는 개념인데, 쉽게말해 사용자가 변수나 객체나 함수에 접근가능한가? 사용을 하고자 할 때 사용하면 버리지 않음. 접근할 수 없으면 버림.

 

1. '루트'라 부르는 조건 - 이유없이 삭제되지 않음

  • 현재 함수와 지역 매개변수
  • 중첩함수에 연결된 함수에서 쓰는 매개변수
  • 전역변수
  • ...기타등등

2. 위 조건을 루트라 부르고 저기서 연결된 함수나 변수, 객체는 또 사용해야하니 지우지 않음.

간단 예시

특히 객체리터럴의 경우, 구성하는 변수명에 참조가 끊어지면 접근할 수 없기에 지워짐.

 

참조 두 개

참조로 복사된 경우 한쪽이 끊어지더라도 반대쪽이 남아있기 때문에 삭제되지 않음.

 

연결된 객체

연결된 경우 일반적으로 지우지 않지만, 접근하는 포인트를 잃어버리는 경우, 삭제됨.

 

도달할 수 없는 섬

내부에서 객체 리터럴끼리 연결되어 있지만, 전체를 참조하는 외부 루트연결이 없으면 (섬)전체가 사라짐.

 

내부 알고리즘

일단 이런 방식("페인트를 부으면 색칠되는 부분만 남기고 안되면 지운다.")으로 한다고 읽어두고 넘어가자

'프론트 > 모던JS요약' 카테고리의 다른 글

5장 - 자료구조와 자료형  (0) 2021.03.07
4장 - 객체(1)  (0) 2021.01.22
3장 - 코드품질(1)  (0) 2021.01.16
3장 - 코드품질(0)  (0) 2021.01.13
2장 - 자바스크립트 기본(2)  (0) 2021.01.13

+ Recent posts