Deep Dive 10-11 [객체 리터럴 | 원시값과 객체의 비교]

10장. 객체

- 객체: 원시 값을 제외한 나머지 값 , 변경 가능한 값

 

- 상태(프로퍼티)와 동작(메소드)을 하나의 단위로 구조화 함

- 생성 방법 : 객체 리터럴 사용하기 ({} 중괄호 안에 0개 이상의 프로퍼티 정의)

변수에 할당되는 시점에 자바스크립트 엔진이 객체 리터럴을 해석해 객체를 생성함

 

- 프로퍼티 키 동적 생성 : obj[key] = "value"

- 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀

- 자바스크립트에서 함수 = 일급객체. 즉, 값으로 취급할 수 있기 때문에, 프로퍼티 값으로 사용할 수 있음

 

프로퍼티 접근

1) 마침표 표기법 person.name 

2) 대괄호 표기법 person['name'] (키 네임을 따옴표로 감싸야 함 -> 그렇지 않으면 식별자로 해석, reference error)

 

프로퍼티 값 갱신

- 이미 존재하는 프로퍼티에 값 할당 -> 프로퍼티 값 갱신

- 생성 : 존재하지 않는 프로퍼티에 값 할당 

 

프로퍼티 삭제

delete person.age

 

프로퍼티 축약 표현

let x = 1, y = 2;

const obj = { x , y }
console.log(obj) // {x:1, y:2}

 

객체 리터럴 내부에서 프로퍼티 키 동적 생성

const obj = {
	[`prop - 1`] : 1
 	// ...
}

 

메소드 축약 표현

const obj = {
	name : 'kim',
    sayHi() {
    	console.log('hi ' + this.name); 
    }
}

 

11장. 원시 값과 객체의 비교

 

원시값 : 변경 불가능한 값 (메모리공간에 실제 값이 저장됨)

- 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 '원시 값'이 복사되어 전달 -> 값에 의한 전달 (변수가 새롭게 재할당한 원시 값을 가리킴)

 - 재할당 이외에 변수 값을 변경할 방법이 없음

- 원시값의 복사 : 새로운 변수에 변수를 할당하면 그 변수가 가진 원시 값이 복사되어 전달됨 => 값은 같지만 서로 다른 메모리 공간에 저장된 별개의 값임 (하나의 변수의 값을 변경해도 다른 변수의 값에는 영향을 주지 않음, 서로 간섭하지 않음)

 

 

객체 : 변경 가능한 값 (메모리 공간에 참조 값이 저장됨 -> 새로운 객체 참조로 값을 변경할 수 있음)

- 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 '참조 값'이 복사되어 전달 -> 참조에 의한 전달

- 동적 생성, 삭제가 가능하기 때문에 확보할 메모리 공간의 크기를 사전에 정할 수 없음 (자바스크립트는 클래스 없이 객체를 생성하기 떄문)

- const 키워드를 사용해 선언한 변수에 할당한 '객체'는 변경할 수 있음

- 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면, '원시값'이 아닌 '참조값'에 접근할 수 있다.

- 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있음 (프로퍼티 동적 추가, 갱신, 삭제 가능)

 

- 객체는 복사 및 생성의 비용이 많이 들어 메모리 성능 저하됨 -> 객체는 변경가능한 값으로 설계되어있음

- 즉 메모리 주소를 전달해서 copy하면 두 변수가 하나의 객체를 공유하게 만들 수 잇고, 이는 어느 한 쪽에서 객체를 변경하면 서로 영향을 주고받는다는 것

 

 

- 얕은 복사와 깊은 복사 : 객체를 프로퍼티 값으로 갖는 객체일 경우의 복사

1) 얕은 복사 : 객체에 중첩되어있는 객체의 경우 참조 값만 복사됨

2) 깊은 복사: 객체에 중첩되어있는 객체까지 모두 복사해서 원시값처럼 완전한 복사본을 만듦