[javascript] 메모리개념과제

September 23, 2022

javascript의 자료형과 메모리

javascript의 자료형과 javascript만의 특성은 무엇일까 ?

자료형
- 숫자형(number type) int, float과 같은 숫자형과 특수 숫자 값(special numeric value)을 모두 포함한다. 특수 숫자값 Infinity : 무한대(∞). ‘‘나누기 0’ 연산을 하면 무한대가 출력된다 Nan : Not a Number
- BigInt : 기본 숫자형 범위 ( (2^53-1)~-(2^53-1) ) 보다 큰 값을 저장할 때 사용하는 자료형. 숫자 뒤에 n을 붙여 표시한다. 일부 브라우저에서 호환되지않는다. const bigint = 12345678901234567890n;
- 문자형(string) 기본 문자열 : ‘ ‘ 또는 “ “ 으로 표시한다. 템플릿 리터럴(template literal) : ` ` 으로 표시한다. ${ } 문구를 통해 문자열 사이 표현식을 입력할 수 있으며, 여러줄에 걸쳐 문자열을 작성할 수 있다.
- 논리형(boolean) 참(true), 거짓(false) 두 가지 값만을 포함한다.
- null ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타낸다.
- undefined 변수 선언 후 값이 대입되어있지 않을 때 초기값으로 할당된다.
- 객체(object) 키(key)와 값(value)의 쌍( 프로퍼티(property) ) 로 구성된 데이터 집합 { } 로 선언하고, . 을 통해 값에 접근한다.
```
let person = {
    name: "harry",
    job: "magician",
    age: 15
}
console.log(person.name)
```
- 심볼(symbol) : 변경이 불가능하며 다른 값과 중복될 수 없는 고유 상수값이며 객체의 key로 사용된다.
특성
- HTML/CSS와 통합할 수 있다.
- 모든 주요 브라우저에서 지원하고, 기본 언어로 사용된다.
- 컴파일 과정이 필요하지않다.

javascript 객체와 불변성이란 ?

immutable value & mutable value 자료형 중 원시타입 (Boolean, numm, undefined, Number, String, Symbol) 은 값의 변경이 불가능하다. ( immutable value ) 값을 바꾸는 경우 다른 메모리에 데이터를 넣어 메모리 주소를 변경하는 방식으로 진행한다. 대입 시에는 값을 넘겨준다. 때문에 참조받은 레퍼런스에서 원본데이터를 변경할 수 없다. ( immutable value ) ( 이 점 때문에 선언 시 자료형을 지정할 필요가 없나보다.)
```
let a = 1;
let b = a; // ▶ 대입 시 값을 넘겨준다.
a = 2;
  
console.log(a) // 2
console.log(b) // 1 ▶ 값을 넘겨받았기 때문에 a값의 변경에 영향을 받지 않는다.
```
객체는 참조(reference) 형태로 데이터를 주고 받기때문에 참조받은 레퍼런스에서 원본데이터를 변경할 수 있다. (mutable value)
```
let obj = { a:1 };
let copy = obj; // ▶ 대입 시 참조형태로 넘겨준다. ( C의 pointer와 같은 개념인것같다. )
  
obj.b = 2;
  
console.log(obj)  // {a: 1, b: 2}
console.log(copy) // {a: 1, b: 2} ▶ 참조형태로 넘겨받았기 때문에 obj값의 변경에 영향을 받는다.
```
원본데이터 변경 시 참조데이터도 변한다.
불변 데이터 패턴(immutable data pattern) 예제와 같이 객체는 의도하지 않은 원본데이터의 변경이 발생할 수 있으므로 이를 방지하기 위해 아래와 같은 데이터 패턴을 사용한다.
- 객체의 방어적 복사(defensive copy) Object.assign(target, source... ); 객체의 참조가 아닌 값(프로퍼티)을 넘겨받는다.
```
let obj1 = { a: 1 };
let obj2 = { b: 2 };
let copy = {};
Object.assign(copy, obj1, obj2); // ▶ obj1, obj2 의 값을 copy로 병합하여 넘겨받는다.
// copy = Object.assign({}, obj1, obj2); ▶ assign 함수의 Return 값도 복사결과의 객체이기때문에 이렇게 사용할 수도 있다.
    
console.log(obj1) // { a: 1 } 
console.log(obj2) // { b: 2 } ▶ 값을 넘겼기 때문에 원본 데이터가 유지된다.
console.log(copy); // { a: 1, b: 2 }
```
- 불변화객체
  - Object.freeze(object) 불변객체로 만든다.
    let obj = { a: 1 }; Object.freeze(obj); obj.a = 2; // ▶ 무시된다 console.log(obj) // { a: 1 }
    단, 이 경우 객체 내 객체(Nested Object)는 변경이 가능하며 객체 내 객체도 보호할 경우 deepFreeze() 를 사용한다.
  - Immutable.js Facebook이 제공하는 영구 불변 데이터 구조로 install 후 사용이 가능하다.

참조

https://poiemaweb.com/

https://ko.javascript.info/

https://noogoonaa.tistory.com/78

Rose

javascript의 자료형과 메모리

javascript의 자료형과 javascript만의 특성은 무엇일까 ?

javascript 객체와 불변성이란 ?

참조