도서 리뷰

[코어 자바스크립트] 01 데이터 타입

선인장777 2023. 7. 16. 11:28
  책 읽기 전 책 읽은 후
JS의 데이터 타입 2가지 - 원시 타입 => 객체 타입을 제외한 나머지
- 객체 타입 => {}, [], function 등의 자료구조인 타입
- 기본형 => 참조형을 제외한 나머지, 값이 담긴 주솟값을 복제, 데이터의 성질에 따라 '변수영역', '데이터영역'으로 구분
- 참조형 => Date, 정규식도 객체, 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제, 데이터의 성질에 따라 '변수영역', '데이터영역', '객체의 변수영역'으로 구분
데이터 타입의 세부 종류   - 기본형 => String, Number, Boolean, Null, Undefined, Symbol, BigInt
- 참조형 => Function, Array, Object, Date, RegExp
자바스크립트에서 object가 있는데 왜 Map을 쓸까? 어떨때 쓸까?   - object만으로는 온전히 Map을 구현 할 수 없으므로 파생
- Map =>실행시까지 키를 알 수 없고, 모든 키와 값이 동일한 타입일 경우에 사용
- Object => 각 개별 요소에 적용해야하는 로직이 있을 경우에 사용
Set은 실제로 프론트 개발을 할 때 어떤 경우에 사용할까?   - 중복제거, 데이터 필터링, 데이터 구조 조작(-> 교집합, 합집합, 차집합), 이벤트 처리, 데이터 검색, 고유한 값 관리, 집합 연산
Map, Set   현실에서 객체와 배열 만으로는 반영하기 어려워서 Map, Set의 등장
- Map => 객체와 달리 키타입의 제약이 없어 객체도 키타입이 될 수 있으며, 유용한 프로퍼티와 메서드가 있음
- Set => 중복이 없는 값을 저장할 때 사용하는 컬렉션
 WeakMap, WeakSet은 언제 사용할까?   -  WeakMap => 객체의 사적인 정보를 저장 또는 상세 구현 내용을 숨기고자 할때 사용
- WeakSet => 
상수와 불변의 차이   변수와 상수를 구분짓는 변경가능성의 대상은 변수영역메모리, 
불변성 여부를 구현할 때의 변경가능성 대상은 데이터 영역 메모리
불변성이란   한번 만든 값을 다른 값으로 변경할 수 없는 성질이며 변경은 새로 만드는 동작을 통해서만 가능
불변성을 언제 지켜야 하는지   함수형 프로그래밍에서 함수는 동일한 입력에 대해 동일한 결과를 반환해야하므로 데이터의 변경이 없는 것이 보장되어야함 
=> 원본 데이터를 변경하지 않고 새 배열을 생성
불변성을 언제 지키지 않아야 하는지   성능 최적화를 위해 변경이 필요한 부분만 변경하고 원본 데이터를 직접 수정하는 것이 더 효율적
얕은복사, 깊은 복사 - 얕은 복사 => 객체타입에서 1뎁스만 복사 되는 경우
- 깊은 복사 => 객체가 통째로 복사되는 경우
- 얕은 복사 => 바로 아래 단계의 값만 복사하는 방법
- 깊은 복사 => 내부의 모든 값을 하나씩 찾아서 전부 복사하는 방법
자바스크립트에서 객체를 생성하는 방법 3가지 코드로 작성해보기   - {} :리터럴
- 생성자 함수
- 클래스 사용하여 객체 생성
프로퍼티 객체 내부에 위치하는 키의 명칭 - css => CSS 특성은 연관된 값이 어떻게 브라우저가 요소를 표시하는지 한 측면을 정의하는 특성
- js => JavaScript 속성은 키와 값을 연결하는 객체의 구성원입니다. JavaScript 객체는 속성 모음을 저장하는 데이터 구조
객체의 참조과정   JS에서 객체 변수를 사용할때 발생하며 객체 변수는 객체에 대한 참조값을 저장 
객체 생성시, 메모리 할당되는 과정 스택에 힙에 위치하는 주소값을 저장하고  - 변수영역에서 빈 주소를 선택
- 데이터 영역에 위치할 주소값을 변수 영역의 데이터에 저장
- 프로퍼티의 값이 기본형이면 데이터영역에서 해당 값이 있는지 확인하고 있다면 데이터 영역의 주소값을 할당
데이터 영역에 해당값이 없다면 새로운 값을 데이터 영역에 생성하고 주솟값을 객체의 변수영역에 주솟값을 할당 
call by value, call by reference - call by value => 원시 타입이 사용될 때, 
- call by reference => 객체 타입이 사용될때
- call by value => 기본형(원시형)을 매개변수로 넘길 때
- call by reference => 참조형을 매개변수로 넘길 때
call by reference의 경우에 어떤 문제가 생길 수 있는지 예제 코드와 같이 작성   // Call by reference의 문제점 예제 코드

// 객체 생성
const person = { name: 'John' };

// 객체 속성 변경 함수
function changeName(obj) {
  obj.name = 'Jane'; // 객체 속성 변경
}

// 객체 속성 변경 함수 호출
changeName(person);

console.log(person.name); // 출력: 'Jane'

=> 원본 객체에 의도치 않은 변경을 초래(가변성)할 수 있으므로 새로운 객체를 생성해서 반환하는 방식을 취해야함
깊은 복사를 코드로 작성해보기   - JSON.Stringify => JSON.parse
- spread 문법을 이용하여 재조합

- 파라미터로 받은 값의 type이 object이면서 해당 값이 null이 아닐 경우에 파라미터의 프로퍼티를 하나씩 할당해서 내부까지 복사함
깊은 복사가 현대 프론트엔드 개발에서 왜 중요한지? 대부분의 프론트 라이브러리가 리얼돔이 아닌 가상돔의 변화를 감지하여 동작하는데, 
얕은 복사를 하게되면 객체타입의 내부 프로퍼티와 값의 변화를 감지하지 못하므로 깊은 복사를 하여 내부 값의 변화를 감지하고자 중요하다고 생각
값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야하는 경우가 있음

 
 

추가로 알게 된 것 질문
식별자와 변수 - 변수 => 변경가능한 데이터가 담길 수 있는 공간
- 식별자 => 데이터를 식별하는 데 사용하는 이름, 변수명
가변값 (참조형 데이터 자체를 변경할 경우가 아니라) 내부의 프로퍼티를 변경할 때만 성립
얕은 복사 코드 구현 파라미터의 프로퍼티 값을 받아서 리턴할 프로퍼티로 변환
undefined vs null vs empty - undefined => 사용자가 명시할 경우, 해당 undefined자체가 값으로 여겨지므로 명시할 경우 null 사용을 지향, 배열에서는 해당 값처럼 메서드의 요소로 사용됨 / 엔진에서 자동 적용될 경우 해당 값이 할당되지 않았음을 나타냄
- null => 해당 값이 없을음 나타냄
- empty => 배열은 인덱스에 값이 지정할때, 빈공간을 확보할뿐 배열의 길이가 있다고 빈공간을 확보하는 것이 아님 -> 아직 존재하지 않는 프로퍼티

소감
- 실행컨텍스트를 학습했다고 자부했는데 인출하는 작업에서는 형편없는 모습에 이러한 인출 작업을 반복해서 할 필요성을 느꼈다.