[모던 자바스크립트 Deep Dive] 10장.객체 리터럴 / 11장.원시값과 객체 비교

* [출처] 이웅모, 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작원리(2020) , 위키북스, p.124-153

* 책 읽고 공부한 내용 정리한 TIL 입니다. (정보 전달 목적이 아니라 개인 기록용이니 참고 바랍니다.)

---

10장. 객체 리터럴

let person ={
name : 'Lee', // 프로퍼티
age  : 20     // [구성] 프로퍼티 키: 프로퍼티 값
};

10.1 객체란?

- 프로퍼티의 집합

- 프로퍼티 값이 함수이면, [메서드]라고 함 = 객체에 묶여있는 함수 

 

10.2 객체 리터럴에 의한 객체 생성

- 객체 리터럴은 중괄호{...} 내에 0개 이상의 프로퍼티 정의 > 변수에 할당되는 시점에 JS엔진이 객체생성

- [인스턴스] : 클래스에 의해 생성되어 메모리에 저장된 실체 

@ [인스턴스] > 동작 > [메서드]

[예제 10-01]
let person = {
	name : 'Lee',
	sayHello : function () { //메서드
		console.log(`Hello! ${this.name}.`); // this는 person 객체를 가르킨다
 	}
};

console.log(typeof person); //object
console.log(person); // {name : "Lee", sayHello:f}


[예제 10-02]
let empty = {} ; //빈 객체
console.log(typeof empty); //object


//3.프로퍼티 동적 생성
[예제 10-06]
let obj = {};
let key = 'hello';

obj[key] = 'world';           //ES5 : 프로퍼티 키 동적 생성
> obj['hello'] = 'world';
> obj.hello    = 'world';

let obj = { [key] : 'world' } //ES6 : 계산된 프로퍼티 이름
console.log(obj);             // {hello : "world"}

 

10.5 프로퍼티 접근

1) 마침표 표기법 (dot notation) 

2) 대괄호 표기법 (bracket notation)

let person = {
	name : 'Lee'
}

[예제 10-12]
//1. 마침표 접근
console.log(person.name); //Lee
//2. 대괄호 접근
console.log(person['name']); //Lee


[예제 10-13]
//객체에 존재하지 않으면 undefined 반환
console.log(person[name]); //undefined


[예제 10-17]
//3.동적생성
person.age = 20;
console.log(person); // {name:"Lee",age:20}


[예제 10-18]
//4.프로퍼티 삭제
delete person.age;   // {name : "Lee"}

 

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

[예제 10-20]
//ES6 축약표현 (변수이름과 프로퍼티 키가 동일 시)
let x= 1, y=2;
const obj ={x,y};

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


[예제 10-19]
//ES5
let obj = { x:x , y:y}

[예제 10-21]
//계산된 프로퍼티 이름
//ES5
let prefix = 'prop';
let i = 0 ;
let obj ={};

obj[prefix + '-' + ++i] = l;
obj[prefix + '-' + ++i] = l;
obj[prefix + '-' + ++i] = l;

console.log(obj); // {prop-1 : 1, prop-2 : 2, prop-3 : 3}



[예제 10-22]
//ES6
const prefix = 'prop';
let i = 0;

const obj = {
 [`${prefix}-${++i}`] : i,
 [`${prefix}-${++i}`] : i, 
 [`${prefix}-${++i}`] : i
};

console.log(obj); // {prop-1 : 1, prop-2 : 2, prop-3 : 3}

 

** 기타

1. console.dir(객체) : 객체의 속성 데이터 확인 (계층구조 출력)

 

 

 

---

 

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

- 7가지 데이터 타입 (숫자, 문자열, 불리언, null, undefined, 심벌, 객체) => [원시 타입 & 객체 타입]으로 구분

- 구분 이유 3가지

1) 원시 타입 (변경 불가능 값) / 객체 타입 (참조에 의해 변경 가능한 값)

2) 원시 값 (실제 값이 저장)    / 객체 (변수에 참조값 저장)

3) 값에 의한 전달 (원시값이 복사되어 전달 ) / 참조에 의한 전달 

 

11.1 원시 값

- 변경 불가능 "값" (ReadOnly) 

- [값 재할당] : 새로운 메모리 공간 확보 & 메모리 공간의 주소가 변경됨 (값이 변경 불가능하니깐) = 불변성

   불변성 : 값 변경 방법은 재할당 이외에 없음.

- 변수 : 저장을 위한 확보한 메모리 공간 자체 (메모리 공간 식별용 이름)

- 값: 저장된 데이터 (표현식이 평가되어 생성된 결과)

 

 [자바스크립트의 문자열]

- 원시타입 (변경 불가능) -> 값 수정시 재할당해서 다른 메모리 공간 확보

- 유사 배열 객체 + 이터러블  (배열과 유사하게 문자에 접근 가능)

 

* 유사배열객체 *

마치 배열처럼 인덱스로 프로퍼티 값에 접근 가능 + length 프로퍼티를 갖는 객체 

(래퍼객체는 21.3절"원시 값과 래퍼 객체" 참고)

 

** [값에 의한 전달] : 메모리 주소를 전달 & 그 전달된 메모리 주소를 통해 메모리 공간에 접근하여 값 참조 가능

 

11.2 객체

[자바스크립트의 객체]

- 프로퍼티 키를 인덱스로 사용하는 해시테이블 

- 클래스 없이 객체 생성 가능 

- 변경 가능한 "값" 

- 참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체임

- 객체참조는 원시타입(변경불가능: 메모리 위치 재할당) 보다 메모리의 효율적 소비 어렵고 성능 나빠짐

- 여러개의 식별자가 하나의 객체를 공유할 수 있음

[복사해서 생성된 객체 = 다른 객체 (원본과 참조 값 별개의 객체)]

*얕은복사 (1단계만 복사)

*깊은복사 (객체에 중첩된 모든 객체를 복사) : 재귀적으로 원시값까지 복사한 완전한 복사본 (완전히 다른 객체)

[예제 11-14]
//얕은 복사

const o ={ x: {y:1} };
const c1 = {...o};         // 35장 "스프레드 문법" 참고
console.log(c1 === o);     // false
console.log(c1.x === o.x); // true


//lodash의 cloneDeep 사용한 깊은 복사
//"npm install lodash"로 lodash설치후, node.js에서 실행

const _ = require('lodash');
const c2 = _.cloneDeep(o);
console.log(c2 === o);     //false
console.log(c2.x === o.x); //false

[예제 11-15]
//깊은 복사
const v = 1;
const c1 = v;
console.log(c1 === v); //true


//얕은 복사
const o ={ x:1 };
const c2 = o;
console.log(c2 === o); //true

11.2.2 참조에 의한 전달

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

: 저장된 메모리 주소는 다르지만 / 동일한 참조값을 갖음

 ==> 원본 & 사본 동일한 객체를 가르킴 (2개의 식별자가 하나의 객체 공유: 서로 영향을 주고 받음)