[읽으며 기록] 모던 자바스크립트 Deep Dive

책 목차대로 읽지않고 읽으며 정리하는 Deep Dive

 

Day 1 ✪ 10장 객체 리터럴

객체

자바스크립트에선 클래스와 인스턴스를 포함

인스턴스

클래에 의해 생성되어 메모리에 저장된 실체

함수와 메서드의 차이

• 함수는 일급객체로 값으로 취급
• 메서드는 객체에서 프로퍼티의 값으로 사용되는 함수 </aside>

 

📌 Point

자바스크립트를 구성하는 “모든 것”이 객체가 될 수 있다.

객체와 함수는 밀접한 관게가있다. 함수로 객체를 생성 또는 함수자체가 객체가 되기도 한다.

Node.js 브라우저 환경의 에러는 다를 수 있다. 브라우저는 window 객체가 존재하기 때문

 

알게된 개념

1. 객체의 프로퍼티로 가능한 것들

// 1. 식별자 네이밍 규칙을 따르지 않는 키는 반드시 따옴표를 사용
var person = {
	firstName: "Kim",
	last-name: 'Lee' // SyntaxError
};

var person = {
	firstName: "Kim",
	'last-name': 'Lee'
};

// 2. 빈 문자열도 프로퍼티 키로 사용 가능
var foo = {
	'': ''
};

// 3. 예약어도 가능
var foo = {
	var: '',
	function: ''
};

// 4. 숫자도 가능하지만 암묵적으로 문자열 변환
var foo = {
	0: 1,
	1: 2,
	2: 3
};

 

2. 프로퍼티 접근법

// 마침표 표기법, 대괄호 표기법이 있다.
// 대괄호로 접근하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열
var person = {
	name: 'Lee
};

console.log(person.name);
console.log(person['name']);
console.log(person[name]); // ReferenceError: name is not defind

 

3. 프로퍼티 삭제

// delete 연산자 사용
delete person.name;

 

4. 프로퍼티 축약

// 변수를 사용하여 프로퍼티 값을 만드는 경우 이름-프로퍼티가 동일하면 key를 생략 가능
var x = 1, y = 2;
var obj = {
	x: x,
	y: y
};

 

5. 계산된 프로퍼티 이름

var perfix = 'prop';
var i = 0;
var obj = {};

// 이렇게 키를 동적으로 생성도 가능하다
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1: 1, prop-2: 2, prop3: 3}

 

---

Day 1 ✪ 원시 값과 객체의 비교

원시 / 객체(참조) 타입

개념	변경 불가능한 값	변경 가능한 값
메모리	실제 값 저장	참조값이 저장
특성	불변성	가변성

 

유사 배열 객체

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

 

얕은/깊은 복사

객체의 1단계 까지만 복사	객체에 중첩된 객체까지 모두 복사
복사된 객체는 원본 객체와 참조값 공유	원본과 와넌히 독립된 복사본을 생성
Object.assign()이나 스프레드 연산자 ...를 사용한 복사	JSON.parse(JSON.stringify(obj))를 사용하거나, structuredClone()

 

📌 Point

• 객체만으로도 엄청나게 많은 개념들이 존재 ..
• Javascript와 클래스기반 객체지향 언어는 객체 메모리가 다르게 표현될 수 있다
• Javascript는 포인터가 존재하지 않아 “참조에 의한 전달”의 의미가 정확하지 않아. 고로, “값/공유에 의한 전달”이라고 표현

 

알게된 개념

1. 문자열은 원시 타입이다.
2. Java, C++ 같은 클래스 기반은 사전에 정의된 클래스를 기반으로 객체(인스턴스) 생성
3. Javascript는 클래스 없이 객체를 생성. but, 성능 면에서 생성/프로퍼티 접근에 비용이 비효율적
4. 동적 탐색? 히든 클래스?
5. V8 자바스크립트 엔진 - 객체를 효율적으로 관리
6. 객체는 원시타입이지만 프로퍼티는 참조타입
7. == 타입 변환을 허용, === 엄격한 동등 연산자

var person1 = {
	name: 'Lee'
};

var person2 = {
	name: 'Lee'
};

console.log(person1 === person2) // false
console.log(person1.name === person2.name) // true