도서 리뷰
[코어 자바스크립트] 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 => 배열은 인덱스에 값이 지정할때, 빈공간을 확보할뿐 배열의 길이가 있다고 빈공간을 확보하는 것이 아님 -> 아직 존재하지 않는 프로퍼티 |
소감
- 실행컨텍스트를 학습했다고 자부했는데 인출하는 작업에서는 형편없는 모습에 이러한 인출 작업을 반복해서 할 필요성을 느꼈다.